fix: bring back notifications and help on desktop
This commit is contained in:
parent
5fa87d1a57
commit
9e1ccefb6d
4 changed files with 103 additions and 6 deletions
|
|
@ -23,9 +23,41 @@
|
|||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="desktop-avatar">
|
||||
<div class="flex " style="gap:12px; 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-sm"
|
||||
>
|
||||
<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>
|
||||
|
||||
|
||||
<button class="btn-reset nav-link help-dropdown" aria-controls="toolbar-help" aria-label="Help Dropdown"> <span> Help <svg class="es-icon icon-xs"><use href="#es-line-down"></use></svg> </span> </button>
|
||||
<div class="desktop-avatar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="desktop-container">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -214,6 +214,8 @@ class DesktopPage {
|
|||
|
||||
setup() {
|
||||
this.setup_avatar();
|
||||
this.setup_help();
|
||||
this.setup_notifications();
|
||||
this.setup_navbar();
|
||||
this.setup_awesomebar();
|
||||
this.setup_editing_mode();
|
||||
|
|
@ -303,6 +305,19 @@ class DesktopPage {
|
|||
me.stop_editing_layout("submit");
|
||||
});
|
||||
}
|
||||
setup_notifications() {
|
||||
this.notifications = new frappe.ui.Notifications({
|
||||
wrapper: $(".desktop-notifications"),
|
||||
full_height: false,
|
||||
});
|
||||
}
|
||||
setup_help() {
|
||||
frappe.ui.create_menu({
|
||||
parent: $(".help-dropdown"),
|
||||
menu_items: frappe.utils.get_help_siblings(),
|
||||
open_on_left: true,
|
||||
});
|
||||
}
|
||||
setup_avatar() {
|
||||
$(".desktop-avatar").html(frappe.avatar(frappe.session.user, "avatar-medium"));
|
||||
let is_dark = document.documentElement.getAttribute("data-theme") === "dark";
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue