fix(menu): use data-menu to configure menu items for every element
This commit is contained in:
parent
bfea06a108
commit
9aedc74d67
4 changed files with 62 additions and 162 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue