feat: add open sidebar option in toolbar
This commit is contained in:
parent
af6f61e140
commit
01e804a641
2 changed files with 44 additions and 61 deletions
|
|
@ -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");
|
||||
$('<div class="close-sidebar">').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
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
$('<div class="close-sidebar">').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(`<span>${label}</span>`).addClass(color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue