Merge pull request #35839 from sokumon/help-notif

frappe/desk/page/desktop/desktop.html

@@ -23,9 +23,38 @@
                 </span>
             </button>
         </div>
-        <div class="desktop-avatar">
-
+        <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" >
+                        <svg
+                            class="icon icon-md"
+                        >
+                            <use href="#icon-bell"></use>
+                        </svg>
+                    </button>
+                    <div
+                        style="top: unset"
+                        class="dropdown-menu dropdown-menu-right notifications-list"
+                        role="menu"
+                    >
+                        <div class="notification-list-header">
+                            <div class="header-items"></div>
+                            <div class="header-actions"></div>
+                        </div>
+                        <div class="notification-list-body">
+                            <div class="panel-notifications"></div>
+                            <div class="panel-events"></div>
+                            <div class="panel-changelog-feed"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="desktop-avatar">
+            </div>
+            </div>
         </div>
+
     </header>
     <div class="desktop-container">
     </div>

frappe/desk/page/desktop/desktop.js

@@ -214,6 +214,7 @@ class DesktopPage {
 
 	setup() {
 		this.setup_avatar();
+		this.setup_notifications();
 		this.setup_navbar();
 		this.setup_awesomebar();
 		this.setup_editing_mode();
@@ -303,6 +304,12 @@ class DesktopPage {
 			me.stop_editing_layout("submit");
 		});
 	}
+	setup_notifications() {
+		this.notifications = new frappe.ui.Notifications({
+			wrapper: $(".desktop-notifications"),
+			full_height: false,
+		});
+	}
 	setup_avatar() {
 		$(".desktop-avatar").html(frappe.avatar(frappe.session.user, "avatar-medium"));
 		let is_dark = document.documentElement.getAttribute("data-theme") === "dark";
@@ -319,6 +326,20 @@ class DesktopPage {
 					new frappe.ui.ThemeSwitcher().show();
 				},
 			},
+			{
+				icon: "info",
+				label: "About",
+				onClick: function () {
+					return frappe.ui.toolbar.show_about();
+				},
+			},
+			{
+				icon: "support",
+				label: "Frappe Support",
+				onClick: function () {
+					window.open("https://support.frappe.io/help", "_blank");
+				},
+			},
 			{
 				icon: "rotate-ccw",
 				label: "Reset to Default",

frappe/public/js/frappe/ui/notifications/notifications.js

@@ -1,15 +1,17 @@
 frappe.provide("frappe.search");
 
 frappe.ui.Notifications = class Notifications {
-	constructor() {
+	constructor(opts) {
 		this.tabs = {};
 		this.notification_settings = frappe.boot.notification_settings;
+		this.full_height = opts?.full_height || true;
+		this.wrapper = opts?.wrapper || $(".standard-items-sections");
 		this.make();
 	}
 
 	make() {
-		$(".standard-items-sections").find(".sidebar-notification").removeClass("hidden");
-		this.dropdown = $(".standard-items-sections").find(".dropdown-notifications");
+		this.wrapper.find(".sidebar-notification").removeClass("hidden");
+		this.dropdown = this.wrapper.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");
@@ -50,7 +52,9 @@ frappe.ui.Notifications = class Notifications {
 			${frappe.utils.icon("x")}
 		</span>`)
 			.on("click", (e) => {
-				this.dropdown.addClass("hidden");
+				if (!this.full_height) {
+					this.dropdown.addClass("hidden");
+				}
 			})
 			.appendTo(this.header_actions)
 			.attr("title", __("Close"))
@@ -130,6 +134,7 @@ frappe.ui.Notifications = class Notifications {
 
 	setup_dropdown_events() {
 		const dropdown = this.dropdown;
+		const full_height = this.full_height;
 		this.dropdown.on("hide.bs.dropdown", (e) => {
 			let hide = $(e.currentTarget).data("closable");
 			$(e.currentTarget).data("closable", true);
@@ -146,7 +151,9 @@ frappe.ui.Notifications = class Notifications {
 			const isInsideDropdown = $(e.target).closest(".notifications-list").length > 0;
 
 			if (!isInsideNotificationBtn && !isInsideDropdown) {
-				dropdown.addClass("hidden");
+				if (!full_height) {
+					dropdown.addClass("hidden");
+				}
 			}
 		});
 

frappe/public/js/frappe/utils/utils.js

@@ -2116,4 +2116,47 @@ Object.assign(frappe.utils, {
 		}
 		return frappe.user.has_role(["System Manager", "Administrator"]);
 	},
+
+	get_help_siblings() {
+		const navbar_settings = frappe.boot.navbar_settings;
+		let help_dropdown_items = [];
+
+		let custom_help_links = this.get_custom_help_links();
+
+		help_dropdown_items = custom_help_links.concat(help_dropdown_items);
+
+		navbar_settings.help_dropdown.forEach((element) => {
+			let dropdown_children = {
+				name: element.name,
+				label: element.item_label,
+			};
+			if (element.item_type === "Route") {
+				dropdown_children.url = element.route;
+			}
+			if (element.item_type === "Action") {
+				dropdown_children.onClick = function () {
+					frappe.utils.eval(element.action);
+				};
+			}
+			help_dropdown_items.push(dropdown_children);
+		});
+
+		return help_dropdown_items;
+	},
+	get_custom_help_links() {
+		let route = frappe.get_route_str();
+		let breadcrumbs = route.split("/");
+
+		let links = [];
+		for (let i = 0; i < breadcrumbs.length; i++) {
+			let r = route.split("/", i + 1);
+			let key = r.join("/");
+			let help_links = frappe.help.help_links[key] || [];
+			links = $.merge(links, help_links);
+		}
+		if (links.length) {
+			links.push({ is_divider: true });
+		}
+		return links;
+	},
 });