diff --git a/frappe/public/js/frappe/form/toolbar.js b/frappe/public/js/frappe/form/toolbar.js index 1f65c44f30..d36fd811c1 100644 --- a/frappe/public/js/frappe/form/toolbar.js +++ b/frappe/public/js/frappe/form/toolbar.js @@ -352,6 +352,7 @@ frappe.ui.form.Toolbar = class Toolbar { // Print this.add_discard(); this.add_print(); + this.add_open_sidebar(); this.add_email(); this.add_rename(); this.add_reload(); @@ -484,6 +485,19 @@ frappe.ui.form.Toolbar = class Toolbar { } } + add_open_sidebar() { + if (this.page.hide_sidebar) { + return; + } + this.page.add_menu_item( + __("Open Sidebar"), + () => { + this.setup_sidebar_toggle(this.frm.sidebar.sidebar.parent()); + }, + true + ); + } + add_reload() { // reload this.page.add_menu_item( @@ -894,6 +908,36 @@ frappe.ui.form.Toolbar = class Toolbar { dialog.show(); } + setup_sidebar_toggle(sidebar_wrapper) { + console.log(sidebar_wrapper); + if (frappe.utils.is_xs() || frappe.utils.is_sm()) { + this.setup_overlay_sidebar(sidebar_wrapper); + } else { + sidebar_wrapper.toggle(); + } + $(document.body).trigger("toggleSidebar"); + } + + setup_overlay_sidebar(sidebar_wrapper) { + sidebar_wrapper.find(".close-sidebar").remove(); + let overlay_sidebar = sidebar_wrapper.find(".overlay-sidebar").addClass("opened"); + $('
').hide().appendTo(sidebar_wrapper).fadeIn(); + let scroll_container = $("html").css("overflow-y", "hidden"); + + sidebar_wrapper.find(".close-sidebar").on("click", (e) => this.close_sidebar(e)); + sidebar_wrapper.on("click", "button:not(.dropdown-toggle)", (e) => this.close_sidebar(e)); + + this.close_sidebar = () => { + scroll_container.css("overflow-y", ""); + sidebar_wrapper.find("div.close-sidebar").fadeOut(() => { + overlay_sidebar + .removeClass("opened") + .find(".dropdown-toggle") + .removeClass("text-muted"); + }); + }; + } + follow() { let is_followed = this.frm.get_docinfo().is_document_followed; frappe diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index b2ab3dc581..2a7c1be5fb 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -44,7 +44,6 @@ frappe.ui.Page = class Page { this.wrapper = $(this.parent); this.add_main_section(); this.setup_scroll_handler(); - this.setup_sidebar_toggle(); } setup_scroll_handler() { @@ -195,66 +194,6 @@ frappe.ui.Page = class Page { .appendTo(this.sidebar); } - setup_sidebar_toggle() { - let sidebar_toggle = $(".page-head").find(".sidebar-toggle-btn"); - let sidebar_wrapper = this.wrapper.find(".layout-side-section"); - if (this.disable_sidebar_toggle || !sidebar_wrapper.length) { - sidebar_toggle.last().remove(); - this.wrapper.addClass("no-list-sidebar"); - } else { - if (!frappe.is_mobile()) { - sidebar_toggle.attr("title", __("Toggle Sidebar")); - } - sidebar_toggle.attr("aria-label", __("Toggle Sidebar")); - sidebar_toggle.tooltip({ - delay: { show: 600, hide: 100 }, - trigger: "hover", - }); - sidebar_toggle.click(() => { - if (frappe.utils.is_xs() || frappe.utils.is_sm()) { - this.setup_overlay_sidebar(); - } else { - sidebar_wrapper.toggle(); - } - $(document.body).trigger("toggleSidebar"); - this.update_sidebar_icon(); - }); - } - } - - setup_overlay_sidebar() { - this.sidebar.find(".close-sidebar").remove(); - let overlay_sidebar = this.sidebar.find(".overlay-sidebar").addClass("opened"); - $('
').hide().appendTo(this.sidebar).fadeIn(); - let scroll_container = $("html").css("overflow-y", "hidden"); - - this.sidebar.find(".close-sidebar").on("click", (e) => this.close_sidebar(e)); - this.sidebar.on("click", "button:not(.dropdown-toggle)", (e) => this.close_sidebar(e)); - - this.close_sidebar = () => { - scroll_container.css("overflow-y", ""); - this.sidebar.find("div.close-sidebar").fadeOut(() => { - overlay_sidebar - .removeClass("opened") - .find(".dropdown-toggle") - .removeClass("text-muted"); - }); - }; - } - - update_sidebar_icon() { - let sidebar_toggle = $(".page-head").find(".sidebar-toggle-btn"); - let sidebar_toggle_icon = sidebar_toggle.find(".sidebar-toggle-icon"); - let sidebar_wrapper = this.wrapper.find(".layout-side-section"); - let is_sidebar_visible = $(sidebar_wrapper).is(":visible"); - sidebar_toggle_icon.html( - frappe.utils.icon( - is_sidebar_visible ? "es-line-sidebar-collapse" : "es-line-sidebar-expand", - "md" - ) - ); - } - set_indicator(label, color) { this.clear_indicator().removeClass("hide").html(`${label}`).addClass(color); }