Commit 719a7911 authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'gm-notifications' into 'master'

ui: add a new template to display the counter of unread notifications + style...

See merge request !3
parents db361bb6 1ddd6a9f
Pipeline #2882 passed with stage
in 32 seconds
......@@ -12,10 +12,14 @@
right: -5px;
width: 20px;
height: 20px;
line-height: 20px;
}
.sib-notifications__counter span{
display: block;
background-color: var(--sib-notifications-theme, gray);
border-radius: 50%;
font-size: 12px;
line-height: 20px;
}
/* Button */
......@@ -57,6 +61,7 @@
.sib-notifications__items sib-display{
display: block;
cursor: pointer;
position: relative;
}
.sib-notifications__items sib-display:hover{
background: rgba(0,0,0,0.02);
......@@ -67,7 +72,7 @@
}
/* Read / unread */
.sib-notifications__items [name=content]:before{
/*.sib-notifications__items [name=content]:before{
content: '';
display: block;
width: 4px;
......@@ -85,6 +90,23 @@
.sib-notifications__items [data-read=unread] + [name=content]:before{
border-color: var(--sib-notifications-theme, gray);
background-color: var(--sib-notifications-theme, gray);
}*/
.sib-notifications__items read-badge [data-read]{
display: block;
width: 4px;
height: 4px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -2px;
border-radius: 50%;
border: 2px solid #DDD;
}
.sib-notifications__items read-badge [data-read=unread]{
border-color: var(--sib-notifications-theme, gray);
background-color: var(--sib-notifications-theme, gray);
}
/* Pager */
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title>
<script type="module" src="../sib-notifications.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000/openid/"
data-client_id="464079"
data-id="paris"
>
</sib-auth-provider>
</sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/core@0.6"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style>
:root{
--sib-notifications-theme: #ffd759;
}
</style>
</head>
<body>
<h1>SIB Notifications and routing - Demo</h1>
<sib-notifications
bind-user
id-suffix="inbox"
extra-context='{"doap": "http://usefulinc.com/ns/doap#"}'
></sib-notifications>
<sib-router default-route="home">
<sib-route name="home"></sib-route>
<sib-route name="project" rdf-type="doap:project"></sib-route>
</sib-router>
<div id="home">
<h1>Home</h1>
</div>
<div id="project">
<h1>Project</h1>
<sib-display bind-resources data-fields="name"></sib-display>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title>
<script type="module" src="../sib-notifications.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000/openid/"
data-client_id="464079"
data-id="paris"
>
</sib-auth-provider>
</sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/core@0.6"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style>
:root{
--sib-notifications-theme: #ffd759;
}
</style>
</head>
<body>
<h1>SIB Notifications - Demo</h1>
<sib-notifications
bind-user
id-suffix="inbox"
>
</sib-notifications>
</body>
</html>
......@@ -2,50 +2,27 @@
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title>
<script type="module" src="sib-notifications.js"></script>
<script src="https://cdn.happy-dev.fr/oidc-client/oidc-client.min.js"></script>
<script src="https://cdn.happy-dev.fr/sib-oidc/sib-oidc.js"
data-authority="http://127.0.0.1:8000/openid/"
data-client_id="464079"
data-redirect_uri="http://127.0.0.1:8001"
data-response_type="id_token token"
data-scope="openid profile email"
data-automaticSilentRenew="true"
data-loadUserInfo="true"
></script>
<script type="module" src="https://unpkg.com/@startinblox/core@0.5"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style>
:root{
--sib-notifications-theme: #ffd759;
}
</style>
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000/openid/"
data-client_id="464079"
data-id="paris"
>
</sib-auth-provider>
</sib-auth>
</head>
<body>
<h1>SIB Notifications - Demo</h1>
<sib-notifications
bind-user
id-suffix="inbox"
extra-context='{"doap": "http://usefulinc.com/ns/doap#"}'
></sib-notifications>
<sib-router default-route="home">
<sib-route name="home"></sib-route>
<sib-route name="project" rdf-type="doap:project"></sib-route>
</sib-router>
<div id="home">
<h1>Home</h1>
</div>
<div id="project">
<h1>Project</h1>
<sib-display bind-resources data-fields="name"></sib-display>
</div>
<h2>Examples</h2>
<ul>
<li><a href="examples/notifications.html">notifications</a></li>
<li><a href="examples/notifications-routing.html">notifications-routing</a></li>
<li><a href="examples/badge.html">badge</a></li>
</ul>
</body>
</html>
import { SIBTemplateElement, store } from 'https://unpkg.com/@startinblox/core@0.5';
import { importCSS } from 'https://cdn.happy-dev.fr/sib-core/helpers.js'
import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.6';
import Favico from 'https://dev.jspm.io/favico.js-slevomat';
const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
importCSS(`${base_url}/css/main.css`)
Helpers.importCSS(`${base_url}/css/notification.css`)
class SIBNotifications extends SIBTemplateElement {
constructor() {
......@@ -66,30 +65,25 @@ class SIBNotifications extends SIBTemplateElement {
}
_onClickNotification(target) {
store.get(target.resource.object['@id'], JSON.parse(this.props.extraContext)).then((resource) => {
window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: resource } }))
this.querySelector('details').removeAttribute("open")
})
if(this.props.extraContext){
store.get(target.resource.object, JSON.parse(this.props.extraContext)).then((resource) => {
window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: resource } }))
this.querySelector('details').removeAttribute("open")
})
}
}
_updateUnread(resource) {
let unread = 0
resource['ldp:contains'].forEach(notification => {
const resources = Array.isArray(resource['ldp:contains']) ? resource['ldp:contains'] : [resource['ldp:contains']]
resources.forEach(notification => {
if (!notification.read) unread++
// TODO : read / unread
})
// Update favicon
this.favicon.badge(unread)
// Update badge icon
let badgeUnread = this.querySelector('#badge-unread')
if (unread > 0) {
badgeUnread.innerText = unread
badgeUnread.style.display = 'block'
} else {
badgeUnread.style.display = 'none'
}
this.querySelector('#badge-unread').innerText = unread
}
_getNotificationsList() {
......@@ -108,8 +102,10 @@ class SIBNotifications extends SIBTemplateElement {
<div class="sib-notifications">
<details class="sib-notifications__container">
<summary class="sib-notifications__button">
<img src="./img/notification-icon.svg" />
<div class="sib-notifications__counter" id="badge-unread"></div>
<img src="${base_url}/img/notification-icon.svg" />
<div class="sib-notifications__counter">
<span id="badge-unread"></span>
</div>
</summary>
<div class="sib-notifications__list">
<sib-display
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment