vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: show notification badge on desktop bell icon

Browse source
This commit is contained in:
Kaushal Shriwas 2026-04-08 20:15:29 +05:30
parent 6841a4a808
commit c5aa51a7e6
3 changed files with 40 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frappe/desk/page/desktop/desktop.html
View file

@ -26,7 +26,7 @@
<div class="flex" style="gap:16px; align-items: center;">
<div class="desktop-notifications">
<div class="dropdown dropdown-notifications">
<button class="btn-reset nav-link text-muted" data-toggle="dropdown" aria-label="{{ _("Notifications") }}" aria-haspopup="true">
<button class="btn-reset nav-link text-muted desktop-notification-icon" data-toggle="dropdown" aria-label="{{ _("Notifications") }}" aria-haspopup="true">
<svg
class="icon icon-md" aria-hidden="true"
>

23
frappe/public/js/frappe/ui/notifications/notifications.js
View file

@ -383,8 +383,21 @@ class NotificationsView extends BaseNotificationsView {
}
toggle_notification_icon(seen) {
this.notifications_icon.find(".notifications-seen").toggle(seen);
this.notifications_icon.find(".notifications-unseen").toggle(!seen);
let sidebar_bell = $(".sidebar-notification");
let desktop_bell = $(".desktop-notification-icon");
if (seen) {
sidebar_bell.find(".notification-badge").remove();
desktop_bell.find(".notification-badge").remove();
} else {
if (sidebar_bell.find(".notification-badge").length === 0) {
sidebar_bell
.find(".sidebar-item-icon")
.append('<span class="notification-badge"></span>');
}
if (desktop_bell.find(".notification-badge").length === 0) {
desktop_bell.append('<span class="notification-badge"></span>');
}
}
}
toggle_seen(flag) {
@ -407,10 +420,10 @@ class NotificationsView extends BaseNotificationsView {
this.toggle_notification_icon(true);
});
this.parent.on("show.bs.dropdown", () => {
this.toggle_seen(true);
if (this.notifications_icon.find(".notifications-unseen").is(":visible")) {
$(document).on("click", ".sidebar-notification, .desktop-notification-icon", () => {
if ($(".notification-badge").length > 0) {
this.toggle_notification_icon(true);
this.toggle_seen(true);
frappe.call(
"frappe.desk.doctype.notification_log.notification_log.trigger_indicator_hide"
);

21
frappe/public/scss/desk/notification.scss
View file

@ -44,6 +44,27 @@
display: none;
}
.sidebar-notification .sidebar-item-icon,
.desktop-notification-icon {
position: relative;
}
.notification-badge {
position: absolute;
top: 4px;
right: 4px;
width: 8px;
height: 8px;
background-color: var(--red-500);
border-radius: 50%;
pointer-events: none;
}
.desktop-notification-icon > .notification-badge {
top: 2px;
right: 0;
}
.mark-read {
display: none;
margin-left: 10px;