refactor: Sidebar
This commit is contained in:
sokumon
parent
789804adb2
commit
6bf7d45e6e
16 changed files with 283 additions and 317 deletions
|
|
@ -33,7 +33,7 @@
|
|||
"fieldtype": "Select",
|
||||
"in_list_view": 1,
|
||||
"label": "Link Type",
|
||||
"options": "Page\nDocType\nReport"
|
||||
"options": "DocType\nPage\nReport\nWorkspace"
|
||||
},
|
||||
{
|
||||
"fieldname": "link_to",
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
"options": "link_type"
|
||||
},
|
||||
{
|
||||
"default": "list-alt",
|
||||
"fieldname": "icon",
|
||||
"fieldtype": "Icon",
|
||||
"in_list_view": 1,
|
||||
|
|
@ -60,7 +61,7 @@
|
|||
"index_web_pages_for_search": 1,
|
||||
"istable": 1,
|
||||
"links": [],
|
||||
"modified": "2025-08-18 03:41:56.405534",
|
||||
"modified": "2025-08-29 12:49:51.155661",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Desk",
|
||||
"name": "Workspace Sidebar Item",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class WorkspaceSidebarItem(Document):
|
|||
child: DF.Check
|
||||
label: DF.Data | None
|
||||
link_to: DF.DynamicLink | None
|
||||
link_type: DF.Literal["Page", "DocType", "Report"]
|
||||
link_type: DF.Literal["DocType", "Page", "Report", "Workspace"]
|
||||
parent: DF.Data
|
||||
parentfield: DF.Data
|
||||
parenttype: DF.Data
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ frappe.router = {
|
|||
this.set_history(sub_path);
|
||||
this.render();
|
||||
this.set_title(sub_path);
|
||||
this.trigger("change");
|
||||
this.trigger("change", this);
|
||||
},
|
||||
|
||||
async parse(route) {
|
||||
|
|
@ -202,7 +202,6 @@ frappe.router = {
|
|||
return frappe.model.with_doctype(doctype_route.doctype).then(() => {
|
||||
// doctype route
|
||||
let meta = frappe.get_meta(doctype_route.doctype);
|
||||
|
||||
if (route[1] && route[1] === "view" && route[2]) {
|
||||
route = this.get_standard_route_for_list(
|
||||
route,
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
</div>
|
||||
<div class="body-sidebar-bottom">
|
||||
<a class="collapse-sidebar-link">
|
||||
<svg class="icon" style="margin-top: -2px">
|
||||
<use href="#icon-arrow-right-to-line"></use></svg> {%= __("Collapse") %}</a>
|
||||
{%= frappe.utils.icon("arrow-left-to-line" , "sm", "", "", "text-ink-gray-7 current-color", true)%}
|
||||
<span> {%= __("Collapse") %} </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay" style="z-index: 1021;"></div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
frappe.ui.Sidebar = class Sidebar {
|
||||
constructor() {
|
||||
this.items = {};
|
||||
this.parent_items = [];
|
||||
this.section_breaks = [];
|
||||
this.section_breaks_content = [];
|
||||
this.sidebar_expanded = false;
|
||||
this.workspace_sidebar_items = [];
|
||||
this.setup_complete = false;
|
||||
if (!frappe.boot.setup_complete) {
|
||||
// no sidebar if setup is not complete
|
||||
return;
|
||||
|
|
@ -35,15 +35,16 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
}
|
||||
|
||||
setup(workspace_title) {
|
||||
if (!this.setup_complete) {
|
||||
this.workspace_title = workspace_title;
|
||||
this.apps_switcher = new frappe.ui.SidebarHeader(this, workspace_title);
|
||||
this.make_sidebar(workspace_title.toLowerCase());
|
||||
this.setup_complete = true;
|
||||
}
|
||||
this.workspace_title = workspace_title;
|
||||
this.sidebar_header = new frappe.ui.SidebarHeader(this, workspace_title);
|
||||
this.make_sidebar(workspace_title.toLowerCase());
|
||||
this.setup_complete = true;
|
||||
}
|
||||
setup_events() {
|
||||
const me = this;
|
||||
frappe.router.on("change", function (router) {
|
||||
frappe.app.sidebar.set_workspace_sidebar();
|
||||
});
|
||||
$(document).on("page-change", function () {
|
||||
frappe.app.sidebar.toggle();
|
||||
});
|
||||
|
|
@ -57,7 +58,6 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
if (frappe.container.page.page.hide_sidebar) {
|
||||
this.wrapper.hide();
|
||||
} else {
|
||||
frappe.app.sidebar.set_workspace_sidebar();
|
||||
this.wrapper.show();
|
||||
}
|
||||
}
|
||||
|
|
@ -76,14 +76,20 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
}
|
||||
|
||||
set_hover() {
|
||||
$(".standard-sidebar-item > .item-anchor").on("mouseover", function (event) {
|
||||
if ($(this).parent().hasClass("active-sidebar")) return;
|
||||
$(this).parent().addClass("hover");
|
||||
});
|
||||
$(".standard-sidebar-item > .item-anchor:not(.section-break)").on(
|
||||
"mouseover",
|
||||
function (event) {
|
||||
if ($(this).parent().hasClass("active-sidebar")) return;
|
||||
$(this).parent().addClass("hover");
|
||||
}
|
||||
);
|
||||
|
||||
$(".standard-sidebar-item > .item-anchor").on("mouseleave", function () {
|
||||
$(this).parent().removeClass("hover");
|
||||
});
|
||||
$(".standard-sidebar-item > .item-anchor:not(.section-break)").on(
|
||||
"mouseleave",
|
||||
function () {
|
||||
$(this).parent().removeClass("hover");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
set_all_pages() {
|
||||
|
|
@ -101,49 +107,29 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
if (this.is_route_in_sidebar()) {
|
||||
this.active_item.addClass("active-sidebar");
|
||||
}
|
||||
if (this.active_item) {
|
||||
if (this.is_nested_item(this.active_item.parent())) {
|
||||
let current_item = this.active_item.parent();
|
||||
this.expand_parent_item(current_item);
|
||||
}
|
||||
}
|
||||
if (!this.sidebar_expanded) this.close_children_item();
|
||||
}
|
||||
|
||||
expand_parent_item(item) {
|
||||
let parent_title = item.attr("item-parent");
|
||||
if (!parent_title) return;
|
||||
|
||||
let parent = this.get_sidebar_item(parent_title);
|
||||
if (parent) {
|
||||
let $drop_icon = $(parent).find(".drop-icon");
|
||||
if ($($(parent).children()[1]).hasClass("hidden")) {
|
||||
$drop_icon[0].click();
|
||||
if (this.is_nested_item($(parent))) {
|
||||
this.expand_parent_item($(parent));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
is_nested_item(item) {
|
||||
if (item.attr("item-parent")) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
get_sidebar_item(name) {
|
||||
let sidebar_item = "";
|
||||
$(".sidebar-item-container").each(function () {
|
||||
if ($(this).attr("item-name") == name) {
|
||||
sidebar_item = this;
|
||||
toggle_section_break() {
|
||||
this.section_breaks.forEach((f, i) => {
|
||||
$(f[0]).html("");
|
||||
if (this.sidebar_expanded) {
|
||||
$(f[0]).html(this.section_breaks_content[i]);
|
||||
this.setup_event_listner($($(f[0]).parent()));
|
||||
} else {
|
||||
$(f[0]).html("<div class='divider'></div>");
|
||||
}
|
||||
});
|
||||
return sidebar_item;
|
||||
}
|
||||
|
||||
is_route_in_sidebar(active_module) {
|
||||
open_all_section_breaks() {
|
||||
this.section_breaks.forEach((f) => {
|
||||
f.find(".drop-icon").click();
|
||||
if (f.find(".nested-container").hasClass("hidden")) {
|
||||
f.find(".drop-icon").click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
is_route_in_sidebar() {
|
||||
let match = false;
|
||||
const that = this;
|
||||
$(".item-anchor").each(function () {
|
||||
|
|
@ -189,29 +175,13 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
this.sidebar_expanded = false;
|
||||
}
|
||||
this.expand_sidebar();
|
||||
this.apps_switcher;
|
||||
this.sidebar_header;
|
||||
}
|
||||
make_sidebar(workspace_title) {
|
||||
if (this.wrapper.find(".standard-sidebar-section")[0]) {
|
||||
this.wrapper.find(".standard-sidebar-section").remove();
|
||||
if (this.wrapper.find(".sidebar-items")[0]) {
|
||||
this.wrapper.find(".sidebar-items").html("");
|
||||
}
|
||||
this.workspace_sidebar_items = frappe.boot.workspace_sidebar_item[workspace_title];
|
||||
if (this.workspace_sidebar_items && this.workspace_sidebar_items.length > 0) {
|
||||
this.workspace_sidebar_items.unshift({
|
||||
label: "Home",
|
||||
icon: "home",
|
||||
type: "Workspace",
|
||||
route: `/app/${workspace_title}`,
|
||||
});
|
||||
} else {
|
||||
this.workspace_sidebar_items = [];
|
||||
this.workspace_sidebar_items[0] = {
|
||||
label: "Home",
|
||||
icon: "home",
|
||||
type: "Workspace",
|
||||
route: `/app/${workspace_title}`,
|
||||
};
|
||||
}
|
||||
// this.build_sidebar_section("All", parent_pages);
|
||||
this.create_sidebar();
|
||||
|
||||
|
|
@ -306,7 +276,9 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
.find(".body-sidebar .collapse-sidebar-link")
|
||||
.find("use")
|
||||
.attr("href", `#icon-arrow-${direction}-to-line`);
|
||||
this.apps_switcher.toggle_width(this.sidebar_expanded);
|
||||
this.sidebar_header.toggle_width(this.sidebar_expanded);
|
||||
this.open_all_section_breaks();
|
||||
this.toggle_section_break();
|
||||
}
|
||||
|
||||
append_item(item, container) {
|
||||
|
|
@ -335,19 +307,18 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
let child_container = $item_container.find(".sidebar-child-item");
|
||||
child_container.addClass("hidden");
|
||||
this.prepare_sidebar(child_items, child_container, $item_container);
|
||||
this.parent_items.push($item_container);
|
||||
this.section_breaks.push($item_container.find(".standard-sidebar-item"));
|
||||
|
||||
$item_container.find(".drop-icon").first().addClass("show-in-edit-mode");
|
||||
this.add_toggle_children(item, sidebar_control, $item_container);
|
||||
this.section_breaks_content.push(
|
||||
$($item_container.find(".standard-sidebar-item")[0]).html()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$item_container.appendTo(container);
|
||||
// this.sidebar_items[item.public ? "public" : "private"][item.name] = $item_container;
|
||||
|
||||
if ($item_container.parent().hasClass("hidden")) {
|
||||
$item_container.parent().toggleClass("hidden");
|
||||
}
|
||||
|
||||
this.add_toggle_children(item, sidebar_control, $item_container);
|
||||
}
|
||||
|
||||
sidebar_item_container(item) {
|
||||
|
|
@ -359,19 +330,23 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
path = frappe.utils.generate_route({
|
||||
type: item.link_type,
|
||||
name: item.link_to,
|
||||
is_query_report: item.report.report_type === "Query Report",
|
||||
is_query_report:
|
||||
item.report.report_type === "Query Report" ||
|
||||
item.report.report_type == "Script Report",
|
||||
report_ref_doctype: item.report.ref_doctype,
|
||||
});
|
||||
} else if (item.link_type == "Workspace") {
|
||||
let label = item.label;
|
||||
if (label == "Home") label = this.workspace_title.toLowerCase();
|
||||
path = "/app/" + frappe.router.slug(label);
|
||||
if (item.route) {
|
||||
path = item.route;
|
||||
}
|
||||
} else {
|
||||
path = frappe.utils.generate_route({ type: item.link_type, name: item.link_to });
|
||||
}
|
||||
} else if (item.type === "URL") {
|
||||
path = item.external_link;
|
||||
} else if (item.type == "Workspace") {
|
||||
path = "/app/" + frappe.router.slug(item.label);
|
||||
if (item.route) {
|
||||
path = item.route;
|
||||
}
|
||||
}
|
||||
return $(
|
||||
frappe.render_template("sidebar_item", {
|
||||
|
|
@ -383,7 +358,7 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
|
||||
add_toggle_children(item, sidebar_control, item_container) {
|
||||
let $child_item_section = item_container.find(".sidebar-child-item");
|
||||
let drop_icon = "es-line-up";
|
||||
let drop_icon = "chevron-right";
|
||||
if ($child_item_section.children() > 0) {
|
||||
drop_icon = "small-up";
|
||||
}
|
||||
|
|
@ -394,13 +369,24 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
if (item.type == "Section Break") {
|
||||
$drop_icon.removeClass("hidden");
|
||||
}
|
||||
this.setup_event_listner(item_container);
|
||||
}
|
||||
setup_event_listner(item_container) {
|
||||
let $child_item_section = item_container.find(".sidebar-child-item");
|
||||
let $drop_icon = item_container.find(".drop-icon");
|
||||
$drop_icon.on("click", () => {
|
||||
let opened = $drop_icon.find("use").attr("href") === "#es-line-down";
|
||||
let opened = $drop_icon.find("use").attr("href") === "#icon-chevron-down";
|
||||
|
||||
if (!opened) {
|
||||
$drop_icon.attr("data-state", "closed").find("use").attr("href", "#es-line-down");
|
||||
$drop_icon
|
||||
.attr("data-state", "closed")
|
||||
.find("use")
|
||||
.attr("href", "#icon-chevron-down");
|
||||
} else {
|
||||
$drop_icon.attr("data-state", "opened").find("use").attr("href", "#es-line-up");
|
||||
$drop_icon
|
||||
.attr("data-state", "opened")
|
||||
.find("use")
|
||||
.attr("href", "#icon-chevron-right");
|
||||
}
|
||||
$child_item_section.toggleClass("hidden");
|
||||
});
|
||||
|
|
@ -450,7 +436,6 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
close_sidebar() {
|
||||
this.sidebar_expanded = false;
|
||||
this.expand_sidebar();
|
||||
this.close_children_item();
|
||||
if (frappe.is_mobile()) frappe.app.sidebar.prevent_scroll();
|
||||
}
|
||||
open_sidebar() {
|
||||
|
|
@ -459,12 +444,6 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
this.set_active_workspace_item();
|
||||
}
|
||||
|
||||
close_children_item() {
|
||||
this.parent_items.forEach((i) => {
|
||||
if (!$($(i).children()[1]).hasClass("hidden")) $(i).find(".drop-icon").click();
|
||||
});
|
||||
}
|
||||
|
||||
reload() {
|
||||
return frappe.workspace.get_pages().then((r) => {
|
||||
frappe.boot.sidebar_pages = r;
|
||||
|
|
@ -479,9 +458,9 @@ frappe.ui.Sidebar = class Sidebar {
|
|||
|
||||
handle_outside_click() {
|
||||
document.addEventListener("click", (e) => {
|
||||
if (this.apps_switcher.drop_down_expanded) {
|
||||
if (!e.composedPath().includes(this.apps_switcher.app_switcher_dropdown)) {
|
||||
this.apps_switcher.toggle_app_menu();
|
||||
if (this.sidebar_header.drop_down_expanded) {
|
||||
if (!e.composedPath().includes(this.sidebar_header.app_switcher_dropdown)) {
|
||||
this.sidebar_header.toggle_dropdown_menu();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
|
||||
<a class="sidebar-header" style="text-decoration: none; width: auto;">
|
||||
<div class="sidebar-item-icon header-logo-container">
|
||||
{%= frappe.avatar(workspace_title, "avatar-medium header-logo" , workspace_title, "", true) %}
|
||||
<div class="sidebar-item-icon header-logo-container">
|
||||
{%= frappe.avatar(workspace_title, "avatar-medium header-logo" , workspace_title, "", true) %}
|
||||
</div>
|
||||
<div class="title-container">
|
||||
<div class="sidebar-item-label header-title">
|
||||
{%= workspace_title %}
|
||||
</div>
|
||||
<div class="title-container">
|
||||
<div class="sidebar-item-label header-title">
|
||||
{%= workspace_title %}
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-reset drop-icon show-in-edit-mode">
|
||||
<svg class="es-icon es-line icon-sm" style="display: block;margin:auto;" aria-hidden="true">
|
||||
<use class="" href="#es-line-down"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-reset drop-icon show-in-edit-mode">
|
||||
<svg class="icon icon-sm" style="display: block;margin:auto;" aria-hidden="true">
|
||||
<use class="" href="#icon-chevron-down"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div class="sidebar-header-menu hidden" role="menu">
|
||||
|
|
|
|||
|
|
@ -39,16 +39,19 @@ frappe.ui.SidebarHeader = class SidebarHeader {
|
|||
];
|
||||
this.make();
|
||||
this.setup_app_switcher();
|
||||
this.populate_apps_menu();
|
||||
this.populate_dropdown_menu();
|
||||
this.setup_select_options();
|
||||
}
|
||||
|
||||
make() {
|
||||
$(".sidebar-header").remove();
|
||||
$(".sidebar-header-menu").remove();
|
||||
$(
|
||||
frappe.render_template("sidebar_header", {
|
||||
workspace_title: this.workspace_title,
|
||||
})
|
||||
).prependTo(this.sidebar_wrapper);
|
||||
|
||||
this.wrapper = $(".sidebar-header");
|
||||
this.dropdown_menu = this.wrapper.find(".sidebar-header-menu");
|
||||
this.$header_title = this.wrapper.find(".header-title");
|
||||
|
|
@ -58,17 +61,17 @@ frappe.ui.SidebarHeader = class SidebarHeader {
|
|||
setup_app_switcher() {
|
||||
this.dropdown_menu = $(".sidebar-header-menu");
|
||||
$(".sidebar-header").on("click", (e) => {
|
||||
this.toggle_app_menu();
|
||||
this.toggle_dropdown_menu();
|
||||
e.stopImmediatePropagation();
|
||||
});
|
||||
}
|
||||
|
||||
toggle_app_menu() {
|
||||
toggle_dropdown_menu() {
|
||||
this.toggle_active();
|
||||
this.dropdown_menu.toggleClass("hidden");
|
||||
}
|
||||
|
||||
populate_apps_menu() {
|
||||
populate_dropdown_menu() {
|
||||
const me = this;
|
||||
this.dropdown_items.forEach((d) => {
|
||||
me.add_app_item(d);
|
||||
|
|
@ -84,7 +87,7 @@ frappe.ui.SidebarHeader = class SidebarHeader {
|
|||
item.icon
|
||||
? frappe.utils.icon(item.icon)
|
||||
: `<img
|
||||
class="app-logo"
|
||||
class="logo"
|
||||
src="${item.icon_url}"
|
||||
>`
|
||||
}
|
||||
|
|
@ -134,18 +137,15 @@ frappe.ui.SidebarHeader = class SidebarHeader {
|
|||
}
|
||||
|
||||
toggle_width(expand) {
|
||||
let class_name = "collapse-header";
|
||||
if (!expand) {
|
||||
$(this.wrapper[0]).css("width", "auto");
|
||||
this.$drop_icon.addClass(class_name);
|
||||
this.$header_title.addClass(class_name);
|
||||
$(this.wrapper[0]).off("mouseleave");
|
||||
$(this.wrapper[0]).off("mouseover");
|
||||
this.wrapper.css("padding-left", "0px");
|
||||
this.wrapper.css("padding-right", "0px");
|
||||
} else {
|
||||
$(this.wrapper[0]).css("width", "100%");
|
||||
this.$drop_icon.removeClass(class_name);
|
||||
this.$header_title.removeClass(class_name);
|
||||
this.setup_hover();
|
||||
this.wrapper.css("padding-left", "8px");
|
||||
this.wrapper.css("padding-right", "8px");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="sidebar-item-container {%= item.is_editable ? 'is-draggable' : '' %}"
|
||||
class="sidebar-item-container {%= item.is_editable ? 'is-draggable' : '' %} {% if (item.type == 'Section Break') { %}section-item{% } %}"
|
||||
item-name="{{ item.label }}"
|
||||
item-title="{{ item.label }}"
|
||||
>
|
||||
|
|
@ -7,17 +7,16 @@
|
|||
<a
|
||||
href="{{ path }}"
|
||||
target="{%= item.type === "URL" ? "_blank" : "" %}"
|
||||
class="item-anchor {% item.is_editable ? "" : "block-click" %}"
|
||||
class="item-anchor
|
||||
{% if (!item.is_editable) { %}block-click {% } %}
|
||||
{% if (item.type == 'Section Break') { %}section-break{% } %}"
|
||||
title="{{ item.label }}"
|
||||
>
|
||||
{% if (item.icon) { %}
|
||||
<span class="sidebar-item-icon" item-icon="{{ item.icon }}">
|
||||
{%= frappe.utils.icon(item.icon, "md")%}
|
||||
{% if (item.type != "Section Break") { %}
|
||||
<span class="sidebar-item-icon text-ink-gray-7" item-icon="{{ item.icon }}">
|
||||
{%= frappe.utils.icon(item.icon || "list-alt" , "sm", "", "", "text-ink-gray-7 current-color", true)%}
|
||||
</span>
|
||||
{% } else { %}
|
||||
<span class="sidebar-item-icon" item-icon="{{ item.icon }}">
|
||||
</span>
|
||||
{% } %}
|
||||
{% } %}
|
||||
<span class="sidebar-item-label">{{ item.label }}<span>
|
||||
</a>
|
||||
<div class="sidebar-item-control"></div>
|
||||
|
|
|
|||
|
|
@ -1233,7 +1233,14 @@ Object.assign(frappe.utils, {
|
|||
image_path: "/assets/frappe/images/leaflet/",
|
||||
},
|
||||
|
||||
icon(icon_name, size = "sm", icon_class = "", icon_style = "", svg_class = "") {
|
||||
icon(
|
||||
icon_name,
|
||||
size = "sm",
|
||||
icon_class = "",
|
||||
icon_style = "",
|
||||
svg_class = "",
|
||||
currentColor = false
|
||||
) {
|
||||
let size_class = "";
|
||||
let is_espresso = icon_name.startsWith("es-");
|
||||
|
||||
|
|
@ -1249,7 +1256,9 @@ Object.assign(frappe.utils, {
|
|||
? "es-icon es-solid"
|
||||
: "es-icon es-line"
|
||||
: "icon"
|
||||
} ${svg_class} ${size_class}" style="${icon_style}" aria-hidden="true">
|
||||
} ${svg_class} ${size_class}"
|
||||
${currentColor ? 'stroke="currentColor"' : ""}
|
||||
style="${icon_style}" aria-hidden="true">
|
||||
<use class="${icon_class}" href="${icon_name}"></use>
|
||||
</svg>`;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -81,3 +81,7 @@ use.like-icon {
|
|||
.no-stroke {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.current-color {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
.underline-hover {
|
||||
display: initial;
|
||||
}
|
||||
// form sidebar
|
||||
.form-sidebar {
|
||||
padding-top: var(--padding-sm);
|
||||
|
|
@ -145,7 +148,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@extend .underline-hover;
|
||||
@extend .underline-hover !optional;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
@import "global_search";
|
||||
@import "desktop";
|
||||
@import "../common/awesomeplete";
|
||||
@import "main";
|
||||
@import "sidebar";
|
||||
@import "list_sidebar";
|
||||
@import "form_sidebar";
|
||||
|
|
|
|||
44
frappe/public/scss/desk/main.scss
Normal file
44
frappe/public/scss/desk/main.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.hide-form-sidebar {
|
||||
.form-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-route=""] .main-menu,
|
||||
body[data-route="desk"] .main-menu {
|
||||
@extend .hide-form-sidebar;
|
||||
}
|
||||
|
||||
body[data-route^="List"] .main-menu {
|
||||
.list-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@extend .hide-form-sidebar;
|
||||
}
|
||||
|
||||
body[data-route^="Module"] .main-menu {
|
||||
.module-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@extend .hide-form-sidebar;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
--surface-modal: rgba(255, 255, 255, 1);
|
||||
--divider-color: rgba(237, 237, 237, 1);
|
||||
--sidebar-width: 220px;
|
||||
--left-sidebar-width: 220px;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--sidebar-hover-color: rgba(43, 43, 43, 1);
|
||||
|
|
@ -15,58 +14,19 @@
|
|||
--surface-modal: rgb(0, 0, 0);
|
||||
--divider-color: rgba(52, 52, 52, 1);
|
||||
}
|
||||
.underline-hover {
|
||||
display: initial;
|
||||
}
|
||||
.hide-form-sidebar {
|
||||
.form-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// sidebar-item states
|
||||
@mixin hover-mixin {
|
||||
background-color: var(--sidebar-hover-color);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-padding {
|
||||
padding: 12px 14px;
|
||||
@mixin truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body[data-route=""] .main-menu,
|
||||
body[data-route="desk"] .main-menu {
|
||||
@extend .hide-form-sidebar;
|
||||
}
|
||||
|
||||
body[data-route^="List"] .main-menu {
|
||||
.list-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@extend .hide-form-sidebar;
|
||||
}
|
||||
|
||||
body[data-route^="Module"] .main-menu {
|
||||
.module-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@extend .hide-form-sidebar;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.body-sidebar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -84,6 +44,10 @@ body {
|
|||
width: 50px;
|
||||
background: var(--subtle-accent);
|
||||
border-right: 1px solid var(--sidebar-border-color);
|
||||
transition-property: all;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
// @include transition(all, 0.3s ,cubic-bezier(0.4, 0, 0.2, 1));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -94,7 +58,7 @@ body {
|
|||
.body-sidebar-top {
|
||||
flex: 1 1;
|
||||
padding: 1px;
|
||||
width: 34px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
|
@ -104,126 +68,93 @@ body {
|
|||
overflow: hidden;
|
||||
position: static;
|
||||
font-size: var(--text-base);
|
||||
@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
// transition: width 200ms;
|
||||
.sidebar-items {
|
||||
&:first-child {
|
||||
margin-top: 14px;
|
||||
}
|
||||
width: 100%;
|
||||
@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
}
|
||||
}
|
||||
|
||||
.body-sidebar-bottom {
|
||||
overflow: hidden;
|
||||
padding: 7px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
// position: relative;
|
||||
// top:10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: var(--margin-xs) 0;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.standard-sidebar-section {
|
||||
margin-bottom: var(--margin-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: var(--margin-sm);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.sidebar-item-container {
|
||||
width: 30px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
border-top: 1px solid var(--gray-300);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.standard-sidebar-item {
|
||||
display: flex;
|
||||
line-height: 0px;
|
||||
padding: 0px;
|
||||
@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
|
||||
margin-bottom: 1px;
|
||||
.sidebar-item-control {
|
||||
display: none;
|
||||
|
||||
> * {
|
||||
align-self: center;
|
||||
// margin-left: 3px;
|
||||
// box-shadow: none;
|
||||
}
|
||||
|
||||
.drop-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: -4px;
|
||||
}
|
||||
&:not(.active-sidebar) > a:not(.section-break):hover {
|
||||
@include hover-mixin();
|
||||
}
|
||||
|
||||
.sidebar-item-label {
|
||||
display: none;
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
|
||||
.item-anchor {
|
||||
line-height: 10px;
|
||||
@include truncate();
|
||||
font-size: var(--text-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
}
|
||||
.item-anchor {
|
||||
@include truncate();
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
// padding: 3px 0px 3px 11px;
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
color: var(--ink-gray-7);
|
||||
@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
.sidebar-item-icon {
|
||||
padding: 7px;
|
||||
|
||||
width: 30px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-sidebar-link {
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
visibility: collapse;
|
||||
text-decoration: none;
|
||||
font-size: var(--text-md);
|
||||
font-size: var(--text-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-sidebar-link svg {
|
||||
visibility: visible;
|
||||
span {
|
||||
margin-left: 8px;
|
||||
@include truncate();
|
||||
}
|
||||
@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
}
|
||||
|
||||
.sidebar-item-container {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
// &:hover{
|
||||
// background-color: #f3f3f3;
|
||||
// border-radius: 8px;
|
||||
// }
|
||||
// margin-left: -10px;
|
||||
// margin-bottom: 6px;
|
||||
/* nested container */
|
||||
.sidebar-item-container {
|
||||
padding-left: 12px;
|
||||
|
||||
.standard-sidebar-item {
|
||||
justify-content: start;
|
||||
}
|
||||
|
|
@ -235,39 +166,13 @@ body {
|
|||
.body-sidebar {
|
||||
// make it an overlay on hover
|
||||
position: absolute;
|
||||
width: var(--left-sidebar-width);
|
||||
.body-sidebar-top {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.sidebar-item-container {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-item-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-item-control {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-items {
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.collapse-sidebar-link {
|
||||
visibility: visible;
|
||||
}
|
||||
.body-sidebar-bottom {
|
||||
width: 100%;
|
||||
position: static;
|
||||
}
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
|
||||
// show placeholder so that main section remains static
|
||||
.body-sidebar-placeholder {
|
||||
display: flex;
|
||||
width: var(--left-sidebar-width);
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -290,7 +195,7 @@ body {
|
|||
position: relative;
|
||||
.body-sidebar {
|
||||
padding: 8px 8px 10px 8px;
|
||||
width: var(--left-sidebar-width);
|
||||
width: var(--sidebar-width);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -302,7 +207,7 @@ body {
|
|||
width: calc(100vw - var(--sidebar-width));
|
||||
height: 100%;
|
||||
z-index: 1021;
|
||||
left: var(--left-sidebar-width);
|
||||
left: var(--sidebar-width);
|
||||
overflow: auto;
|
||||
background-color: rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
|
|
@ -315,12 +220,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
// sidebar-item states
|
||||
@mixin hover-mixin {
|
||||
background-color: var(--sidebar-hover-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include hover-mixin();
|
||||
}
|
||||
|
|
@ -329,7 +228,26 @@ body {
|
|||
background: var(--sidebar-active-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: 8px;
|
||||
:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: none;
|
||||
}
|
||||
.section-break {
|
||||
flex: 0 0 auto !important;
|
||||
color: var(--ink-gray-5);
|
||||
margin-left: 7px;
|
||||
&:hover {
|
||||
color: var(--ink-gray-5);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.section-item {
|
||||
margin-top: 5px;
|
||||
.standard-sidebar-item {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
// Sidebar Header
|
||||
@mixin truncate {
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar-header {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 38px;
|
||||
padding: 3px 0px 3px 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
height: 48px;
|
||||
button {
|
||||
padding: 6px;
|
||||
margin-left: 12px;
|
||||
@include truncate();
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.header-logo > * {
|
||||
background-color: var(--gray-200);
|
||||
color: var(--gray-500);
|
||||
|
|
@ -21,19 +26,15 @@
|
|||
.title-container {
|
||||
flex: 1 1 0%;
|
||||
margin-left: 8px;
|
||||
@include truncate();
|
||||
}
|
||||
.header-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
.collapse-header {
|
||||
overflow: hidden;
|
||||
width: 0px;
|
||||
margin-left: 0px !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-header-menu {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
top: 60px;
|
||||
left: 9px;
|
||||
width: 208px;
|
||||
padding: 6px;
|
||||
|
|
|
|||
|
|
@ -50,8 +50,14 @@
|
|||
--text-muted: var(--gray-700);
|
||||
--text-light: var(--gray-600);
|
||||
--text-dark: var(--fg-color);
|
||||
|
||||
--ink-gray-5: #7c7c7c;
|
||||
--ink-gray-7: #525252;
|
||||
}
|
||||
|
||||
.text-ink-gray-7 {
|
||||
color: var(--ink-gray-7);
|
||||
}
|
||||
$weight-list: "regular", "medium", "semibold", "bold", "black";
|
||||
|
||||
$letter-space: (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue