fix: use indicator class for notification dot and sync seen state

This commit is contained in:
Kaushal Shriwas 2026-04-10 13:39:40 +05:30
parent fa7b946bf8
commit a80feaf8d4
2 changed files with 28 additions and 6 deletions

View file

@ -222,11 +222,11 @@ class NotificationsView extends BaseNotificationsView {
.attr("title", __("Notifications"))
.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
this.bell_icon = this.parent.find(".desktop-notification-icon use");
if (!this.bell_icon.length) {
this.bell_icon = this.parent
this.bell_indicator = this.parent.find(".desktop-notification-icon");
if (!this.bell_indicator.length) {
this.bell_indicator = this.parent
.closest(".body-sidebar")
?.find(".sidebar-notification use");
?.find(".sidebar-notification .sidebar-item-icon");
}
this.setup_notification_listeners();
@ -387,7 +387,7 @@ class NotificationsView extends BaseNotificationsView {
}
toggle_notification_icon(seen) {
this.bell_icon?.attr("href", seen ? "#icon-bell" : "#icon-bell-dot");
this.bell_indicator?.toggleClass("indicator blue", !seen);
}
toggle_seen(flag) {
@ -402,11 +402,13 @@ class NotificationsView extends BaseNotificationsView {
setup_notification_listeners() {
frappe.realtime.on("notification", () => {
this.settings.seen = 0;
this.toggle_notification_icon(false);
this.update_dropdown();
});
frappe.realtime.on("indicator_hide", () => {
this.settings.seen = 1;
this.toggle_notification_icon(true);
});
@ -430,7 +432,7 @@ class NotificationsView extends BaseNotificationsView {
}
this.toggle_seen(true);
if (this.bell_icon?.attr("href") === "#icon-bell-dot") {
if (this.bell_indicator?.hasClass("indicator")) {
this.toggle_notification_icon(true);
frappe.call(
"frappe.desk.doctype.notification_log.notification_log.trigger_indicator_hide"

View file

@ -44,6 +44,26 @@
display: none;
}
.sidebar-notification .sidebar-item-icon.indicator,
.desktop-notification-icon.indicator {
position: relative;
&::before {
position: absolute;
top: 0;
right: 0;
left: auto;
height: 6px;
width: 6px;
margin: 0;
z-index: 1;
}
}
.sidebar-notification .item-anchor {
overflow: visible;
}
.mark-read {
display: none;
margin-left: 10px;