Commit 8e7c54e4 authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'ui/2-class-on-unread' into 'master'

ui: add class for unread notifications #2

See merge request !11
parents c0104977 20b874a4
Pipeline #3685 passed with stage
in 32 seconds
......@@ -70,6 +70,7 @@ sib-display-value{
display: block;
cursor: pointer;
position: relative;
border-bottom: 1px solid #DDD;
}
.sib-notifications__items sib-display:hover{
background: rgba(0,0,0,0.02);
......@@ -80,25 +81,9 @@ sib-display-value{
}
/* Read / unread */
/*.sib-notifications__items [name=content]:before{
content: '';
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 [data-read=read] + [name=content]{
opacity: .4;
.sib-notifications__items [data-read] [name=content]{
opacity: .3;
}
.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-unread]{
display: block;
......@@ -141,13 +126,12 @@ sib-display-value{
/* Fields */
.sib-notifications__items [name=content]{
padding: 0.8rem 0;
border-bottom: 1px solid #DDD;
position: relative;
display: flex;
}
.sib-notifications__items [name="wrapper"]{
flex-grow: 1;
padding-right: 0.8rem;
padding-right: 2rem;
}
.sib-notifications__items [name="author.username"]{
font-weight: bold;
......@@ -156,10 +140,13 @@ sib-display-value{
margin-top: 0.15rem;
margin-bottom: 0.5rem;
}
.sib-notifications__items [name="source"] > sib-display-value{
.sib-notifications__items [name="source"] > sib-display-value,
.sib-notifications__items [name="source"] > sib-display-labelled-div,
.sib-notifications__items [name="source"] > sib-display-labelled-div label,
.sib-notifications__items [name="source"] > sib-display-labelled-div div{
display: inline;
}
.sib-notifications__items [name="separator"]{
.sib-notifications__items [name="object.name"] label{
margin: 0 7px;
}
.sib-notifications__items [name="date"]{
......
......@@ -61,6 +61,11 @@ class SIBNotifications extends SIBTemplateElement {
if (unreadFilter) {
unreadFilter.addEventListener("populate", () => this._updateUnread())
}
let notificationsList = this.querySelector('#notifications-list')
if (notificationsList) {
notificationsList.addEventListener("populate", () => this._updateUI())
}
}
/* Events listeners */
......@@ -91,7 +96,14 @@ class SIBNotifications extends SIBTemplateElement {
_updateUnread() {
let unread = Number(document.querySelector('#badge-unread').innerText)
this.favicon.badge(unread)
}
}
_updateUI() {
const notifications = this.querySelectorAll('#notifications-list sib-display')
notifications.forEach(notif => {
if (!notif.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread
});
}
_getNotificationsList() {
const notificationsList = this.querySelector('#notifications-list');
......@@ -131,8 +143,9 @@ class SIBNotifications extends SIBTemplateElement {
class="sib-notifications__items"
data-src="${sourceUrl}"
widget-unread="read-badge"
value-separator="·"
set-source="type, separator, object.name"
set-source="type, object.name"
widget-object.name="sib-display-labelled-div"
label-object.name="·"
set-wrapper="author.username, source, date"
set-content="author.avatar, wrapper"
data-fields="unread, content"
......
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