fix(menu): use data-menu to configure menu items for every element

This commit is contained in:
sokumon 2025-10-31 01:35:15 +05:30
parent bfea06a108
commit 9aedc74d67
4 changed files with 62 additions and 162 deletions

View file

@ -92,56 +92,8 @@ function reset_to_default() {
frappe.pages["desktop"].on_page_show = function () {
frappe.pages["desktop"].desktop_page.setup();
setup_context_menu();
};
function setup_context_menu() {
const me = this;
let menu_items = [
{
label: "Edit Item",
icon: "pen",
onClick: () => {
console.log("Start ediitng");
frappe.app.sidebar.edit_item(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: "Delete",
icon: "trash-2",
onClick: () => {
console.log(me.item);
frappe.app.sidebar.delete_item(me.item);
console.log("Start Deleting");
},
},
{
label: "Hide",
icon: "eye-off",
onClick: () => {
let icon = get_desktop_icon_by_label(this.icon_title);
icon.hidden = 1;
save_desktop();
},
},
];
frappe.ui.create_menu($(".desktop-wrapper").get(0), menu_items, true);
}
function toggle_icons(icons) {
icons.forEach((i) => {
$(i).parent().parent().show();
@ -159,27 +111,6 @@ class DesktopPage {
this.make();
this.setup();
}
// prepare() {
// this.apps_icons = [];
// let all_icons =
// JSON.parse(localStorage.getItem(`${frappe.session.user}:desktop`)) ||
// frappe.boot.desktop_icons;
// let child_icons = all_icons.filter((d) => {
// return d.parent_icon != "" && d.parent_icon != null && d.hidden != 1;
// });
// let parent_icons = all_icons.filter((e, index) => {
// e.child_icons = [];
// return (e.parent_icon == null || e.parent_icon == "") && e.hidden != 1;
// });
// this.apps_icons = parent_icons;
// child_icons.forEach((f) => {
// let parent_icon = parent_icons.find((g) => g.label == f.parent_icon);
// if (parent_icon) {
// parent_icon.child_icons.push(f);
// }
// });
// }
prepare() {
this.apps_icons = [];
@ -207,6 +138,7 @@ class DesktopPage {
}
});
}
make() {
this.page.page_head.hide();
$(this.page.body).empty();
@ -230,6 +162,7 @@ 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",
@ -243,7 +176,6 @@ class DesktopPage {
},
];
frappe.ui.create_menu($(".desktop-avatar"), menu_items, null, true);
$(".desktop-avatar").on("click");
}
setup_navbar() {
$(".sticky-top > .navbar").hide();
@ -478,7 +410,6 @@ class DesktopIcon {
// this.child_icons_data = this.get_child_icons_data();
this.parent_icon = this.icon_data.icon;
this.setup_click();
this.setup_context_menu();
this.render_folder_thumbnail();
this.setup_dragging();
this.child_icons = this.get_child_icons_data();
@ -508,65 +439,6 @@ class DesktopIcon {
}
}
setup_context_menu() {
const me = this;
this.context_menu_items = {
icon: [
{
label: "Add Children Icon",
icon: "add",
onClick: function () {
console.log("Open folder modal");
},
},
],
};
let menu_items = [
{
label: "Edit Item",
icon: "pen",
onClick: () => {
console.log("Start ediitng");
frappe.app.sidebar.edit_item(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: "Delete",
icon: "trash-2",
onClick: () => {
console.log(me.item);
frappe.app.sidebar.delete_item(me.item);
console.log("Start Deleting");
},
},
{
label: "Hide",
icon: "eye-off",
onClick: () => {
let icon = get_desktop_icon_by_label(this.icon_title);
icon.hidden = 1;
save_desktop();
},
},
];
frappe.ui.create_menu($(this.icon.find(".icon-container")), menu_items, true);
}
render_folder_thumbnail() {
if (this.icon_type == "Folder") {
if (!this.folder_wrapper) this.folder_wrapper = this.icon.find(".icon-container");

View file

@ -121,38 +121,39 @@ frappe.ui.create_menu = function attachContextMenuToElement(
open_on_left
) {
let contextMenu = new frappe.ui.menu(menuItems, open_on_left);
frappe.menu_map[element] = contextMenu;
frappe.menu_map[$(element).data("menu")] = contextMenu;
if (right_click) {
$(element).on("contextmenu", function (event) {
event.preventDefault();
event.stopPropagation();
if (contextMenu.visible) {
frappe.menu_map[element].hide();
if (frappe.menu_map[$(element).data("menu")].visible) {
frappe.menu_map[$(element).data("menu")].hide();
} else {
frappe.menu_map[element].show(this);
frappe.menu_map[$(element).data("menu")].show(this);
}
});
} else {
$(element).on("click", function (event) {
event.preventDefault();
event.stopPropagation();
if (contextMenu.visible) {
frappe.menu_map[element].hide();
if (frappe.menu_map[$(element).data("menu")].visible) {
frappe.menu_map[$(element).data("menu")].hide();
} else {
frappe.menu_map[element].show(this);
frappe.menu_map[$(element).data("menu")].show(this);
}
});
}
$(document).on("click", function () {
if (contextMenu.visible) {
contextMenu.hide();
if (frappe.menu_map[$(element).data("menu")].visible) {
frappe.menu_map[$(element).data("menu")].hide();
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape" && contextMenu.visible) {
contextMenu.hide();
if (e.key === "Escape" && frappe.menu_map[$(element).data("menu")].visible) {
frappe.menu_map[$(element).data("menu")].hide();
}
});
};

View file

@ -35,7 +35,7 @@
<use href="#es-line-drag"></use>
</svg>
</button>
<button class="btn btn-secondary btn-xs setting-btn edit-menu" title="">
<button data-menu='{{ item.label }}' class="btn btn-secondary btn-xs setting-btn edit-menu" title="">
{%= frappe.utils.icon("dot-horizontal", "xs") %}
</button>
</div>

View file

@ -51,10 +51,16 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem {
edit_mode: frappe.app.sidebar.edit_mode,
})
);
this.setup_editing_controls();
$(this.container).append(this.wrapper);
this.setup_editing_controls();
}
setup_editing_controls() {
this.menu_items = this.get_menu_items();
this.$edit_menu = this.wrapper.find(".edit-menu");
this.$sidebar_container = this.$edit_menu.parent();
frappe.ui.create_menu(this.$edit_menu, this.menu_items);
}
get_menu_items() {
let me = this;
let menu_items = [
{
@ -90,14 +96,8 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem {
},
},
];
this.add_menu_items(menu_items);
this.menu = new frappe.ui.menu(menu_items);
this.$edit_menu = this.wrapper.find(".edit-menu");
this.$sidebar_container = this.$edit_menu.parent();
frappe.ui.create_menu(this.$edit_menu, menu_items);
return menu_items;
}
add_menu_items() {}
};
@ -116,10 +116,12 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends
this.$item_control = this.wrapper.find(".sidebar-item-control");
this.$nested_items = this.wrapper.find(".nested-container").first();
this.nested_items.forEach((f) => {
frappe.app.sidebar.make_sidebar_item({
container: this.$nested_items,
item: f,
});
this.items.push(
frappe.app.sidebar.make_sidebar_item({
container: this.$nested_items,
item: f,
})
);
});
this.full_template = $(this.wrapper);
}
@ -225,12 +227,20 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends
localStorage.setItem("section-breaks-state", JSON.stringify(this.section_breaks_state));
}
add_menu_items(menu_items) {
const me = this;
const index = menu_items.findIndex((f) => f.label === "Add Item Below");
if (index !== -1) {
menu_items[index] = {
get_menu_items() {
console.log(this.item.label);
let me = this;
let menu_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: () => {
@ -239,14 +249,31 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends
parent_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");
},
},
];
return menu_items;
}
};
frappe.ui.sidebar_item.TypeSpacer = class SpacerItem extends frappe.ui.sidebar_item.TypeLink {
constructor(item, items) {
super(item);
delete this.route;
}
};