From f92226880e42f11986fa690ba709defe2adf5d16 Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 27 Nov 2025 20:43:02 +0530 Subject: [PATCH] refactor: menu component --- frappe/desk/page/desktop/desktop.js | 54 ++++---- frappe/public/js/frappe/ui/menu.js | 43 +++--- .../js/frappe/ui/sidebar/sidebar_item.js | 130 +++++++++--------- frappe/public/scss/desk/index.scss | 1 + frappe/public/scss/desk/menu.scss | 41 ++++++ frappe/public/scss/desk/sidebar_header.scss | 44 ------ 6 files changed, 156 insertions(+), 157 deletions(-) create mode 100644 frappe/public/scss/desk/menu.scss diff --git a/frappe/desk/page/desktop/desktop.js b/frappe/desk/page/desktop/desktop.js index 643c9081ae..bd3c6ca6a6 100644 --- a/frappe/desk/page/desktop/desktop.js +++ b/frappe/desk/page/desktop/desktop.js @@ -162,34 +162,36 @@ class DesktopPage { } setup_avatar() { $(".desktop-avatar").html(frappe.avatar(frappe.session.user, "avatar-medium")); - $(".desktop-avatar").data("menu", "user-menu"); - let menu_items = [ - { - icon: "edit", - label: "Edit Profile", - url: `/update-profile/${frappe.session.user}`, - }, - { - icon: "lock", - label: "Reset Password", - url: "/update-password", - }, - { - icon: "rotate-ccw", - label: "Reset to Default", - onClick: function () { - reset_to_default(); - window.location.reload(); + let menu_items = { + name: "user-menu", + items: [ + { + icon: "edit", + label: "Edit Profile", + url: `/update-profile/${frappe.session.user}`, }, - }, - { - icon: "log-out", - label: "Logout", - onClick: function () { - frappe.app.logout(); + { + icon: "lock", + label: "Reset Password", + url: "/update-password", }, - }, - ]; + { + icon: "rotate-ccw", + label: "Reset to Default", + onClick: function () { + reset_to_default(); + window.location.reload(); + }, + }, + { + icon: "log-out", + label: "Logout", + onClick: function () { + frappe.app.logout(); + }, + }, + ], + }; frappe.ui.create_menu($(".desktop-avatar"), menu_items, null, true); } setup_navbar() { diff --git a/frappe/public/js/frappe/ui/menu.js b/frappe/public/js/frappe/ui/menu.js index 0c3bb1e951..fdb00298a8 100644 --- a/frappe/public/js/frappe/ui/menu.js +++ b/frappe/public/js/frappe/ui/menu.js @@ -2,9 +2,10 @@ import "../dom"; frappe.provide("frappe.ui"); frappe.ui.menu = class ContextMenu { - constructor(menu_items, left) { - this.template = $(``); - this.menu_items = menu_items; + constructor(opts, left) { + this.template = $(``); + this.menu_items = opts.items; + this.name = opts.name; this.open_on_left = left; } @@ -23,7 +24,7 @@ frappe.ui.menu = class ContextMenu { const me = this; let item_wrapper = $(`
-
+
${ item.icon ? frappe.utils.icon(item.icon) @@ -114,50 +115,42 @@ frappe.ui.menu = class ContextMenu { frappe.menu_map = {}; -frappe.ui.create_menu = function attachContextMenuToElement( - element, - menuItems, - right_click, - open_on_left -) { +frappe.ui.create_menu = function (element, opts, right_click, open_on_left) { $(element).css("cursor", "pointer"); - let contextMenu = new frappe.ui.menu(menuItems, open_on_left); + let context_menu = new frappe.ui.menu(opts, open_on_left); - frappe.menu_map[$(element).data("menu")] = contextMenu; + frappe.menu_map[context_menu.name] = context_menu; if (right_click) { $(element).on("contextmenu", function (event) { event.preventDefault(); event.stopPropagation(); - if ( - frappe.menu_map[$(element).data("menu")] && - frappe.menu_map[$(element).data("menu")].visible - ) { - frappe.menu_map[$(element).data("menu")].hide(); + if (frappe.menu_map[context_menu.name] && frappe.menu_map[context_menu.name].visible) { + frappe.menu_map[context_menu.name].hide(); } else { - frappe.menu_map[$(element).data("menu")].show(this); + frappe.menu_map[context_menu.name].show(this); } }); } else { $(element).on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (frappe.menu_map[$(element).data("menu")].visible) { - frappe.menu_map[$(element).data("menu")].hide(); + if (frappe.menu_map[context_menu.name].visible) { + frappe.menu_map[context_menu.name].hide(); } else { - frappe.menu_map[$(element).data("menu")].show(this); + frappe.menu_map[context_menu.name].show(this); } }); } $(document).on("click", function () { - if (frappe.menu_map[$(element).data("menu")].visible) { - frappe.menu_map[$(element).data("menu")].hide(); + if (frappe.menu_map[context_menu.name].visible) { + frappe.menu_map[context_menu.name].hide(); } }); $(document).on("keydown", function (e) { - if (e.key === "Escape" && frappe.menu_map[$(element).data("menu")].visible) { - frappe.menu_map[$(element).data("menu")].hide(); + if (e.key === "Escape" && frappe.menu_map[context_menu.name].visible) { + frappe.menu_map[context_menu.name].hide(); } }); }; diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js index 0a7411827a..2fb3be900a 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_item.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_item.js @@ -77,39 +77,42 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem { } get_menu_items() { let me = this; - let menu_items = [ - { - label: "Edit Item", - icon: "pen", - onClick: () => { - frappe.app.sidebar.edit_item(me.item); + let menu_items = { + name: "edit-item", + items: [ + { + label: "Edit Item", + icon: "pen", + onClick: () => { + frappe.app.sidebar.edit_item(me.item); + }, }, - }, - { - label: "Add Item Below", - icon: "add", - onClick: () => { - frappe.app.sidebar.add_below(me.item); + { + label: "Add Item Below", + icon: "add", + onClick: () => { + frappe.app.sidebar.add_below(me.item); + }, }, - }, - { - label: "Duplicate", - icon: "copy", - onClick: () => { - console.log("Start Deleting"); - frappe.app.sidebar.duplicate_item(me.item); + { + label: "Duplicate", + icon: "copy", + onClick: () => { + console.log("Start Deleting"); + frappe.app.sidebar.duplicate_item(me.item); + }, }, - }, - { - label: "Delete", - icon: "trash-2", - onClick: () => { - console.log(me.item); - frappe.app.sidebar.delete_item(me.item); - console.log("Start Deleting"); + { + label: "Delete", + icon: "trash-2", + onClick: () => { + console.log(me.item); + frappe.app.sidebar.delete_item(me.item); + console.log("Start Deleting"); + }, }, - }, - ]; + ], + }; return menu_items; } add_menu_items() {} @@ -258,43 +261,46 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends get_menu_items() { let me = this; - let menu_items = [ - { - label: "Edit Item", - icon: "pen", - onClick: () => { - console.log("Start ediitng"); - frappe.app.sidebar.edit_item(me.item); + let menu_items = { + name: "edit-section-break", + items: [ + { + label: "Edit Item", + icon: "pen", + onClick: () => { + console.log("Start ediitng"); + frappe.app.sidebar.edit_item(me.item); + }, }, - }, - { - label: "Add Nested Items", - icon: "add", - onClick: () => { - frappe.app.sidebar.show_new_dialog({ - nested: true, - parent_item: me.item, - }); + { + label: "Add Nested Items", + icon: "add", + onClick: () => { + frappe.app.sidebar.show_new_dialog({ + nested: true, + parent_item: me.item, + }); + }, }, - }, - { - label: "Duplicate", - icon: "copy", - onClick: () => { - console.log("Start Deleting"); - frappe.app.sidebar.duplicate_item(me.item); + { + label: "Duplicate", + icon: "copy", + onClick: () => { + console.log("Start Deleting"); + frappe.app.sidebar.duplicate_item(me.item); + }, }, - }, - { - label: "Delete", - icon: "trash-2", - onClick: () => { - console.log(me.item); - frappe.app.sidebar.delete_item(me.item); - console.log("Start Deleting"); + { + label: "Delete", + icon: "trash-2", + onClick: () => { + console.log(me.item); + frappe.app.sidebar.delete_item(me.item); + console.log("Start Deleting"); + }, }, - }, - ]; + ], + }; return menu_items; } }; diff --git a/frappe/public/scss/desk/index.scss b/frappe/public/scss/desk/index.scss index cbbf49ddc6..c52b857dc3 100644 --- a/frappe/public/scss/desk/index.scss +++ b/frappe/public/scss/desk/index.scss @@ -52,4 +52,5 @@ @import "../common/quill"; @import "plyr"; @import "version"; +@import "menu"; @import "sidebar_header"; diff --git a/frappe/public/scss/desk/menu.scss b/frappe/public/scss/desk/menu.scss new file mode 100644 index 0000000000..2bff90e83b --- /dev/null +++ b/frappe/public/scss/desk/menu.scss @@ -0,0 +1,41 @@ +.sidebar-header-menu { + position: absolute; + top: 60px; + left: 9px; + width: 200px; + padding: 6px; + border-radius: var(--border-radius-lg); + background: var(--surface-modal); + box-shadow: var(--shadow-xl); +} + +.dropdown-menu-item { + // padding: var(--padding-xs); + border-radius: var(--border-radius-sm); + &:hover { + background-color: var(--sidebar-hover-color); + } + + a { + height: 28px; + padding: 6px 8px 6px 8px; + gap: 8px; + text-decoration: none; + display: flex; + align-items: center; + gap: var(--margin-sm); + .menu-item-icon { + line-height: 0px; + .app-logo { + width: 16px; + height: 16px; + } + } + } + + .menu-item-title { + text-overflow: ellipsis; + text-wrap: nowrap; + overflow: hidden; + } +} diff --git a/frappe/public/scss/desk/sidebar_header.scss b/frappe/public/scss/desk/sidebar_header.scss index 8c9449322e..010a7cc060 100644 --- a/frappe/public/scss/desk/sidebar_header.scss +++ b/frappe/public/scss/desk/sidebar_header.scss @@ -51,47 +51,3 @@ line-height: 1; margin-top: 4px; } - -.sidebar-header-menu { - position: absolute; - top: 60px; - left: 9px; - width: 200px; - padding: 6px; - border-radius: var(--border-radius-lg); - background: var(--surface-modal); - box-shadow: var(--shadow-xl); - z-index: 1; -} - -.dropdown-menu-item { - // padding: var(--padding-xs); - border-radius: var(--border-radius-sm); - opacity: 0px; - &:hover { - background-color: var(--sidebar-hover-color); - } - - a { - height: 28px; - padding: 6px 8px 6px 8px; - gap: 8px; - text-decoration: none; - display: flex; - align-items: center; - gap: var(--margin-sm); - .sidebar-item-icon { - line-height: 0px; - .app-logo { - width: 16px; - height: 16px; - } - } - } - - .menu-item-title { - text-overflow: ellipsis; - text-wrap: nowrap; - overflow: hidden; - } -}