Commit bcfef840 authored by Matthieu Fesselier's avatar Matthieu Fesselier

feature: mark as read on click button

parent 42c019a2
......@@ -101,20 +101,29 @@ sib-display-value{
.sib-notifications__items read-badge [data-unread]{
display: block;
width: 4px;
height: 4px;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -2px;
padding: 0;
border-radius: 50%;
border: 2px solid #DDD;
background-color: transparent;
z-index: 2;
cursor:pointer;
outline:none;
}
.sib-notifications__items read-badge [data-unread=unread]{
border-color: var(--sib-notifications-theme, gray);
background-color: var(--sib-notifications-theme, gray);
}
.sib-notifications__items read-badge [data-unread=unread]:hover,
.sib-notifications__items read-badge [data-unread=unread]:disabled{
opacity: .5;
}
/* Pager */
.sib-notifications__list nav{
......
......@@ -19,13 +19,23 @@ class SIBNotifications extends SIBTemplateElement {
}
})
// On click notification, navigate to corresponding resource
// On click events, ...
this.addEventListener("click", event => {
let notif = event.target.closest('sib-display')
if (notif && notif.classList.length === 0) { // TODO: classList can be improved
this._onClickNotification(notif)
// unread button -> mark as read
let unreadButton = event.target.closest('button[data-unread=unread]')
if (unreadButton) {
this._onClickUnreadButton(unreadButton)
return
}
// notif item -> navigate to resource
let notifItem = event.target.closest('sib-display')
if (notifItem && notifItem.classList.length === 0) { // TODO: classList can be improved
this._onClickNotification(notifItem)
return
}
})
}
static get propsDefinition() {
......@@ -65,6 +75,10 @@ class SIBNotifications extends SIBTemplateElement {
})
}
}
_onClickUnreadButton(target) {
this._onReadResource(target.closest('sib-display').resource.object['@id'])
target.disabled = true
}
_updateUnread() {
let unread = document.querySelector('#badge-unread').innerText
......@@ -119,7 +133,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-widget name="read-badge">
<template>
<div data-unread="\${value?'unread':'read'}"></div>
<button data-unread="\${value?'unread':'read'}"></button>
</template>
</sib-widget>
</div>
......
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