From b0cbb9b7dcf2739cb2fcbf9bcf81d001b5baad44 Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Wed, 3 Dec 2025 23:36:53 +0530 Subject: [PATCH] feat: move notification to sidebar --- .../frappe/ui/notifications/notifications.js | 35 ++++++++++++++++--- .../public/js/frappe/ui/sidebar/sidebar.html | 16 ++++++++- frappe/public/js/frappe/ui/sidebar/sidebar.js | 19 ++++++++++ .../js/frappe/ui/sidebar/sidebar_item.js | 1 + .../js/frappe/ui/toolbar/awesome_bar.js | 2 +- .../public/js/frappe/ui/toolbar/navbar.html | 28 --------------- frappe/public/js/frappe/ui/toolbar/toolbar.js | 7 ---- frappe/public/scss/desk/notification.scss | 17 +++++++-- frappe/public/scss/desk/sidebar.scss | 20 +++++++++++ 9 files changed, 101 insertions(+), 44 deletions(-) diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js index 2cdfd5ba33..fe05ee56b8 100644 --- a/frappe/public/js/frappe/ui/notifications/notifications.js +++ b/frappe/public/js/frappe/ui/notifications/notifications.js @@ -8,7 +8,8 @@ frappe.ui.Notifications = class Notifications { } make() { - this.dropdown = $(".navbar").find(".dropdown-notifications").removeClass("hidden"); + $(".standard-items-sections").find(".sidebar-notification").removeClass("hidden"); + this.dropdown = $(".standard-items-sections").find(".dropdown-notifications"); this.dropdown_list = this.dropdown.find(".notifications-list"); this.header_items = this.dropdown_list.find(".header-items"); this.header_actions = this.dropdown_list.find(".header-actions"); @@ -25,19 +26,19 @@ frappe.ui.Notifications = class Notifications { setup_headers() { // Add header actions - $(` + $(` ${frappe.utils.icon("setting-gear")} `) .on("click", (e) => { e.stopImmediatePropagation(); - this.dropdown.dropdown("hide"); + console.log("what"); frappe.set_route("Form", "Notification Settings", frappe.session.user); }) .appendTo(this.header_actions) .attr("title", __("Notification Settings")) .tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" }); - $(` + $(` ${frappe.utils.icon("mark-as-read")} `) .on("click", (e) => this.mark_all_as_read(e)) @@ -45,6 +46,16 @@ frappe.ui.Notifications = class Notifications { .attr("title", __("Mark all as read")) .tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" }); + $(` + ${frappe.utils.icon("x")} + `) + .on("click", (e) => { + this.dropdown.addClass("hidden"); + }) + .appendTo(this.header_actions) + .attr("title", __("Close")) + .tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" }); + this.categories = [ { label: __("Notifications"), @@ -118,6 +129,7 @@ frappe.ui.Notifications = class Notifications { } setup_dropdown_events() { + const dropdown = this.dropdown; this.dropdown.on("hide.bs.dropdown", (e) => { let hide = $(e.currentTarget).data("closable"); $(e.currentTarget).data("closable", true); @@ -127,6 +139,21 @@ frappe.ui.Notifications = class Notifications { this.dropdown.on("click", (e) => { $(e.currentTarget).data("closable", true); }); + + $(document).on("click", function (e) { + if (!dropdown.find(".notifications-list").is(e.target)) { + dropdown.addClass("hidden"); + } + }); + + dropdown.find(".notification-item").on("click", (e) => { + dropdown.addClass("hidden"); + }); + $(document).on("page-change", function () { + if (dropdown && dropdown.length) { + dropdown.addClass("hidden"); + } + }); } }; diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar.html b/frappe/public/js/frappe/ui/sidebar/sidebar.html index 86c48db035..518d459909 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar.html +++ b/frappe/public/js/frappe/ui/sidebar/sidebar.html @@ -1,7 +1,21 @@
-
+
+ +
diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar.js b/frappe/public/js/frappe/ui/sidebar/sidebar.js index 445744da2a..505625e74a 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar.js @@ -236,12 +236,26 @@ frappe.ui.Sidebar = class Sidebar { icon: "search", type: "Button", id: "navbar-modal-search", + class: "navbar-search-bar hidden", + }, + { + label: "Notification", + icon: "bell", + type: "Button", + class: "sidebar-notification hidden", + onClick: () => { + this.wrapper.find(".dropdown-notifications").toggleClass("hidden"); + if (frappe.is_mobile()) { + this.wrapper.removeClass("expanded"); + } + }, }, ]; this.standard_items.forEach((w) => { this.add_item(this.$standard_items_sections, w); }); this.setup_awesomebar(); + this.setup_notifications(); this.standard_items_setup = true; } setup_awesomebar() { @@ -260,6 +274,11 @@ frappe.ui.Sidebar = class Sidebar { } } } + setup_notifications() { + if (frappe.boot.desk_settings.notifications && frappe.session.user !== "Guest") { + this.notifications = new frappe.ui.Notifications(); + } + } add_item(container, item) { this.items.push( this.make_sidebar_item({ diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js index 00a6d9b9af..fc0fdb1b5f 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js @@ -368,6 +368,7 @@ frappe.ui.sidebar_item.TypeButton = class SidebarButton extends frappe.ui.sideba super(item); this.title = frappe.app.sidebar.workspace_title; this.item.id && this.wrapper.attr("id", this.item.id); + this.item.class && this.wrapper.attr("class", this.item.class); this.wrapper.attr("title", this.item.label); this.setup_click(); } diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js index 801e89af79..4d924b0f11 100644 --- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js +++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js @@ -5,7 +5,7 @@ frappe.provide("frappe.tags"); frappe.search.AwesomeBar = class AwesomeBar { setup(element) { - $(".search-bar").removeClass("hidden"); + $(".search-bar, .navbar-search-bar").removeClass("hidden"); this.options = []; this.global_results = []; diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html index 51987e2053..5e6e13c0d2 100644 --- a/frappe/public/js/frappe/ui/toolbar/navbar.html +++ b/frappe/public/js/frappe/ui/toolbar/navbar.html @@ -11,34 +11,6 @@
    -