From fc3c67c5c9c1e5f2a6e8a2db66d8ad7807993b24 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 3 Feb 2025 16:34:51 +0530 Subject: [PATCH 01/18] fix: remove mouseover behaviour for sidebar --- frappe/public/js/frappe/ui/apps_switcher.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frappe/public/js/frappe/ui/apps_switcher.js b/frappe/public/js/frappe/ui/apps_switcher.js index adb22a6982..7a84a2aec4 100644 --- a/frappe/public/js/frappe/ui/apps_switcher.js +++ b/frappe/public/js/frappe/ui/apps_switcher.js @@ -11,14 +11,6 @@ frappe.ui.AppsSwitcher = class AppsSwitcher { $(".app-switcher-dropdown").on("click", () => { this.app_switcher_menu.toggleClass("hidden"); }); - - // hover out of the sidebar move this to sidebar.js - this.sidebar_wrapper.find(".body-sidebar").on("mouseleave", () => { - this.app_switcher_menu.addClass("hidden"); - - // hide any expanded menus as they leave a blank space in the sidebar - this.sidebar_wrapper.find(".drop-icon[data-state='opened'").click(); - }); } create_app_data_map() { frappe.boot.app_data_map = {}; From cf1c126ba0263231f357a640caf4b7cca889470f Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 5 Feb 2025 18:05:30 +0530 Subject: [PATCH 02/18] fix(UI): sidebar is expanded by default --- frappe/public/js/frappe/ui/sidebar.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index 6d2303e2a7..d10d805358 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -129,6 +129,9 @@ frappe.ui.Sidebar = class Sidebar { if (localStorage.getItem("sidebar-expanded") !== null) { this.sidebar_expanded = JSON.parse(localStorage.getItem("sidebar-expanded")); this.expand_sidebar(); + } else { + this.sidebar_expanded = true; + this.expand_sidebar(); } } From 068f364d8272fef1a5d6d0674df1e70cf04125ab Mon Sep 17 00:00:00 2001 From: sokumon Date: Sun, 9 Feb 2025 15:46:53 +0530 Subject: [PATCH 03/18] fix(icon): change stroke-width --- frappe/public/icons/timeless/icons.svg | 7 ++----- frappe/public/scss/common/icons.scss | 4 +++- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frappe/public/icons/timeless/icons.svg b/frappe/public/icons/timeless/icons.svg index 3cf8477143..d6c409aada 100644 --- a/frappe/public/icons/timeless/icons.svg +++ b/frappe/public/icons/timeless/icons.svg @@ -417,8 +417,7 @@ Tip: use lucide.svg in /icons for all downloaded icons - + @@ -545,8 +544,7 @@ Tip: use lucide.svg in /icons for all downloaded icons - + @@ -876,7 +874,6 @@ Tip: use lucide.svg in /icons for all downloaded icons - diff --git a/frappe/public/scss/common/icons.scss b/frappe/public/scss/common/icons.scss index bef46bd625..878c9590c1 100644 --- a/frappe/public/scss/common/icons.scss +++ b/frappe/public/scss/common/icons.scss @@ -9,7 +9,9 @@ background-position: 50% 50%; fill: var(--icon-fill); stroke: var(--icon-stroke); - stroke-width: 1.25px; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; } .es-icon { From 58adfefb07562f1632e104accd2a510feb20b083 Mon Sep 17 00:00:00 2001 From: sokumon Date: Sun, 9 Feb 2025 18:13:20 +0530 Subject: [PATCH 04/18] fix: stop app logo movement on expand collapse --- frappe/public/scss/desk/sidebar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index e7d671bfd4..3c3ccd9a41 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -251,7 +251,7 @@ body { .app-switcher-dropdown { width: 204px; left: 0px; - padding: 2px 0px 2px 3px; + padding: 3px; } .body-sidebar-top { width: 204px; @@ -346,8 +346,8 @@ body { text-decoration: none; width: 38px; height: 38px; - left: -2px; padding: 3px; + margin-left: -2px; .standard-sidebar-item { padding-top: 1px; padding-bottom: 1px; From c117b208297b679071ec3ce9438e7ac104b24090 Mon Sep 17 00:00:00 2001 From: sokumon Date: Sun, 9 Feb 2025 23:57:22 +0530 Subject: [PATCH 05/18] fix: highight sidebar item in inner page, and open when children item is visited --- frappe/public/js/frappe/ui/sidebar.js | 53 +++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index d10d805358..e9e783d035 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -79,16 +79,61 @@ frappe.ui.Sidebar = class Sidebar { } set_active_workspace_item() { - if (this.is_route_in_sidebar(decodeURIComponent(window.location.pathname))) { - this.active_item.addClass("active-sidebar"); + if (!frappe.get_route()) return; + let current_route = frappe.get_route(); + let doctype = frappe.get_route()[1]; + if (current_route[0] == "Workspaces") { + if (this.is_route_in_sidebar(doctype)) { + this.active_item.addClass("active-sidebar"); + } + } else { + let active_workspace = frappe.get_meta(doctype).module; + if (frappe.get_meta(doctype).__workspaces) { + active_workspace = frappe.get_meta(doctype).__workspaces[0]; + } + if (this.is_route_in_sidebar(active_workspace)) { + this.active_item.addClass("active-sidebar"); + } + } + if (this.is_nested_item(this.active_item.parent())) { + let current_item = this.active_item.parent(); + this.expand_parent_item(current_item); + } + } + expand_parent_item(item) { + let parent_title = item.attr("item-parent"); + if (!parent_title) return; + + let parent = this.get_sidebar_item(parent_title); + $($(parent).children()[1]).removeClass("hidden"); + if (parent) { + 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; } } - is_route_in_sidebar(route_name) { + get_sidebar_item(name) { + let sidebar_item = ""; + $(".sidebar-item-container").each(function () { + if ($(this).attr("item-name") == name) { + sidebar_item = this; + } + }); + return sidebar_item; + } + is_route_in_sidebar(active_module) { let match = false; const that = this; $(".item-anchor").each(function () { - if ($(this).attr("href") == route_name) { + if ($(this).attr("title") == active_module) { match = true; if (that.active_item) that.active_item.removeClass("active-sidebar"); that.active_item = $(this).parent(); From 76a521876402cfa7ebda14a43401ea2722f1c42b Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 10 Feb 2025 20:06:17 +0530 Subject: [PATCH 06/18] fix: show highlight even after expanded and collapse --- frappe/public/js/frappe/ui/sidebar.js | 32 ++++++++++++++++++--------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index e9e783d035..189284ada8 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -1,6 +1,7 @@ frappe.ui.Sidebar = class Sidebar { constructor() { this.items = {}; + this.child_items = []; this.sidebar_expanded = false; if (!frappe.boot.setup_complete) { @@ -82,22 +83,22 @@ frappe.ui.Sidebar = class Sidebar { if (!frappe.get_route()) return; let current_route = frappe.get_route(); let doctype = frappe.get_route()[1]; - if (current_route[0] == "Workspaces") { - if (this.is_route_in_sidebar(doctype)) { - this.active_item.addClass("active-sidebar"); - } - } else { + let current_item = doctype; + if (current_route[0] != "Workspaces") { let active_workspace = frappe.get_meta(doctype).module; if (frappe.get_meta(doctype).__workspaces) { active_workspace = frappe.get_meta(doctype).__workspaces[0]; } - if (this.is_route_in_sidebar(active_workspace)) { - this.active_item.addClass("active-sidebar"); - } + current_item = active_workspace; } - if (this.is_nested_item(this.active_item.parent())) { - let current_item = this.active_item.parent(); - this.expand_parent_item(current_item); + if (this.is_route_in_sidebar(current_item)) { + 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); + } } } expand_parent_item(item) { @@ -290,6 +291,7 @@ 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.child_items.push(child_container); } $item_container.appendTo(container); @@ -442,10 +444,18 @@ frappe.ui.Sidebar = class Sidebar { close_sidebar() { this.sidebar_expanded = false; this.expand_sidebar(); + this.close_children_item(); } open_sidebar() { this.sidebar_expanded = true; this.expand_sidebar(); + this.set_active_workspace_item(); + } + + close_children_item() { + this.child_items.forEach((i) => { + i.addClass("hidden"); + }); } reload() { From c2f4e56ded8b8ca9a82112735a19daa1552a3650 Mon Sep 17 00:00:00 2001 From: sokumon Date: Tue, 11 Feb 2025 00:18:52 +0530 Subject: [PATCH 07/18] fix: close child item when collapsed --- frappe/public/js/frappe/ui/sidebar.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index 189284ada8..09e6a73b96 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -81,15 +81,18 @@ frappe.ui.Sidebar = class Sidebar { set_active_workspace_item() { if (!frappe.get_route()) return; + if (frappe.get_route()[0] == "") return; let current_route = frappe.get_route(); let doctype = frappe.get_route()[1]; let current_item = doctype; if (current_route[0] != "Workspaces") { - let active_workspace = frappe.get_meta(doctype).module; - if (frappe.get_meta(doctype).__workspaces) { - active_workspace = frappe.get_meta(doctype).__workspaces[0]; + if (frappe.get_meta("Doctype")) { + let active_workspace = frappe.get_meta(doctype).module; + if (frappe.get_meta(doctype).__workspaces) { + active_workspace = frappe.get_meta(doctype).__workspaces[0]; + } + current_item = active_workspace; } - current_item = active_workspace; } if (this.is_route_in_sidebar(current_item)) { this.active_item.addClass("active-sidebar"); @@ -179,6 +182,8 @@ frappe.ui.Sidebar = class Sidebar { this.sidebar_expanded = true; this.expand_sidebar(); } + this.set_active_workspace_item(); + if (!this.sidebar_expanded) this.close_children_item(); } make_sidebar() { @@ -203,7 +208,6 @@ frappe.ui.Sidebar = class Sidebar { this.wrapper.find(".selected")[0].scrollIntoView(); this.setup_sorting(); - this.set_active_workspace_item(); this.set_hover(); } From b6eb7160d5358dbdbb694ea471f33fce39e77f32 Mon Sep 17 00:00:00 2001 From: sokumon Date: Sun, 16 Feb 2025 14:32:13 +0530 Subject: [PATCH 08/18] fix: typo --- frappe/public/js/frappe/ui/sidebar.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index 09e6a73b96..ccb9a4b1a8 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -86,10 +86,11 @@ frappe.ui.Sidebar = class Sidebar { let doctype = frappe.get_route()[1]; let current_item = doctype; if (current_route[0] != "Workspaces") { - if (frappe.get_meta("Doctype")) { - let active_workspace = frappe.get_meta(doctype).module; - if (frappe.get_meta(doctype).__workspaces) { - active_workspace = frappe.get_meta(doctype).__workspaces[0]; + let meta_info = frappe.get_meta(doctype); + if (meta_info) { + let active_workspace = meta_info.module; + if (meta_info.__workspaces) { + active_workspace = meta_info.__workspaces[0]; } current_item = active_workspace; } From 9accc3fcd2a2a3b1a97d85b9997ececafd14aa91 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 03:14:15 +0530 Subject: [PATCH 09/18] fix: change width to 240px --- frappe/public/scss/desk/sidebar.scss | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 3c3ccd9a41..056afd2106 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -121,7 +121,7 @@ body { } .sidebar-items { - width: 204px; + width: 224px; padding-left: 1px; padding-right: 1px; width: 100%; @@ -171,7 +171,7 @@ body { } svg { - margin: -1px; + margin: -2px; } } @@ -247,17 +247,17 @@ body { .body-sidebar { // make it an overlay on hover position: absolute; - width: 220px; + width: 240px; .app-switcher-dropdown { - width: 204px; + width: 224px; left: 0px; padding: 3px; } .body-sidebar-top { - width: 204px; + width: 224px; overflow-y: hidden; .app-switcher-dropdown { - width: 204px; + width: 224px; } } .sidebar-item-container { @@ -278,7 +278,7 @@ body { visibility: visible; } .body-sidebar-bottom { - width: 220px; + width: 224px; position: static; } } @@ -286,7 +286,7 @@ body { // show placeholder so that main section remains static .body-sidebar-placeholder { display: flex; - width: 220px; + width: 240px; } } @@ -309,7 +309,7 @@ body { position: relative; .body-sidebar { padding: 8px 8px 10px 8px; - width: 220px; + width: 240px; height: 100%; position: absolute; bottom: 0; @@ -354,7 +354,7 @@ body { .d-flex { width: 161px; } - gap: 8px; + gap: 30px; } .sidebar-item-control { margin: 2px; @@ -543,7 +543,7 @@ body { .layout-side-section { @include get_textstyle("sm", "regular"); // padding-right: 30px; - width: 220px; + width: 240px; border-left: 1px solid var(--border-color); .sidebar-section { padding: var(--padding-md); @@ -703,7 +703,7 @@ body { max-height: 300px; overflow-y: auto; min-width: 180px; - max-width: 220px; + max-width: 240px; z-index: 100; font-size: var(--text-sm); From b2ad8b0470fa5ae0d8efd1ab056a64fffeebfe32 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 03:31:48 +0530 Subject: [PATCH 10/18] fix(mobile): overlay width fixed --- frappe/public/scss/desk/sidebar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 056afd2106..85f962c1c1 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -318,10 +318,10 @@ body { .overlay { display: block; position: absolute; - width: 100vw; + width: calc(100vw - 240px); height: 100%; z-index: 1021; - left: 220px; + left: 240px; overflow: auto; background-color: rgba(128, 128, 128, 0.5); } From 9cd48242b64aeb95e0113dfa03969bced69ed6bd Mon Sep 17 00:00:00 2001 From: Soham Kulkarni <77533095+sokumon@users.noreply.github.com> Date: Mon, 17 Feb 2025 12:04:39 +0530 Subject: [PATCH 11/18] fix: linter --- frappe/public/scss/desk/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 4789339948..9f5c482497 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -6,7 +6,7 @@ --surface-modal: rgba(255, 255, 255, 1); --divider-color: rgba(237, 237, 237, 1); --sidebar-width: 220px; - --left-sidebar-width: 240px; + --left-sidebar-width: 240px; } [data-theme="dark"] { --sidebar-hover-color: rgba(43, 43, 43, 1); From 9e719b5a1cff03725d9301ddd05059688ab64253 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 03:14:15 +0530 Subject: [PATCH 12/18] fix: change width to 240px --- frappe/public/scss/desk/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 9f5c482497..4ae90fc738 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -6,7 +6,7 @@ --surface-modal: rgba(255, 255, 255, 1); --divider-color: rgba(237, 237, 237, 1); --sidebar-width: 220px; - --left-sidebar-width: 240px; + --left-sidebar-width: 240px; } [data-theme="dark"] { --sidebar-hover-color: rgba(43, 43, 43, 1); From 4d029fa4fde0c421282d740bdd8d662dfce73bb3 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 14:33:20 +0530 Subject: [PATCH 13/18] fix(test): close the sidebar --- cypress/integration/custom_buttons.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress/integration/custom_buttons.js b/cypress/integration/custom_buttons.js index ddbd19731a..fd93613900 100644 --- a/cypress/integration/custom_buttons.js +++ b/cypress/integration/custom_buttons.js @@ -41,6 +41,8 @@ describe( before(() => { cy.login(); cy.visit(`/app/note/new`); + // close the sidebar cause default is expanded + cy.get(".body-sidebar .collapse-sidebar-link").click(); }); test_button_names.forEach((button_name) => { From 259e95e1261a12bad6acf724230903137b7868b9 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 15:05:59 +0530 Subject: [PATCH 14/18] fix: make apps-swticher wider --- frappe/public/scss/desk/sidebar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 4ae90fc738..a5877eef6a 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -366,9 +366,9 @@ body { .app-switcher-menu { position: absolute; - top: 44px; - left: 7px; - width: 205px; + top: 50px; + left: 9px; + width: 220px; padding: 6px; border-radius: var(--border-radius-lg); background: var(--surface-modal); From 10eda3e9329483d5aaa94ec10338f5f2d571f8c1 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 19:58:29 +0530 Subject: [PATCH 15/18] fix: keep sidebar closed when in mobile --- frappe/public/js/frappe/ui/sidebar.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index ccb9a4b1a8..20c99e3dcc 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -176,17 +176,20 @@ frappe.ui.Sidebar = class Sidebar { this.make_sidebar(); } this.set_hover(); - if (localStorage.getItem("sidebar-expanded") !== null) { - this.sidebar_expanded = JSON.parse(localStorage.getItem("sidebar-expanded")); - this.expand_sidebar(); - } else { - this.sidebar_expanded = true; - this.expand_sidebar(); - } + this.set_sidebar_state(); this.set_active_workspace_item(); if (!this.sidebar_expanded) this.close_children_item(); } - + set_sidebar_state() { + this.sidebar_expanded = true; + if (localStorage.getItem("sidebar-expanded") !== null) { + this.sidebar_expanded = JSON.parse(localStorage.getItem("sidebar-expanded")); + } + if (frappe.is_mobile()) { + this.sidebar_expanded = false; + } + this.expand_sidebar(); + } make_sidebar() { if (this.wrapper.find(".standard-sidebar-section")[0]) { this.wrapper.find(".standard-sidebar-section").remove(); From 3fb5a7e2a66448b16c473b936f64fc1a4c9fd00f Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 20:13:56 +0530 Subject: [PATCH 16/18] fix: set hover and active states on app switcher --- frappe/public/js/frappe/ui/apps_switcher.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/frappe/public/js/frappe/ui/apps_switcher.js b/frappe/public/js/frappe/ui/apps_switcher.js index 7a84a2aec4..229523df21 100644 --- a/frappe/public/js/frappe/ui/apps_switcher.js +++ b/frappe/public/js/frappe/ui/apps_switcher.js @@ -3,12 +3,15 @@ frappe.ui.AppsSwitcher = class AppsSwitcher { this.drop_down_state = false; this.sidebar_wrapper = sidebar.wrapper; this.sidebar = sidebar; + this.app_switcher = sidebar.app_switcher_dropdown; this.setup_app_switcher(); + this.set_hover(); } setup_app_switcher() { this.app_switcher_menu = $(".app-switcher-menu"); $(".app-switcher-dropdown").on("click", () => { + this.set_active(); this.app_switcher_menu.toggleClass("hidden"); }); } @@ -144,4 +147,20 @@ frappe.ui.AppsSwitcher = class AppsSwitcher { // re-render the sidebar frappe.app.sidebar.make_sidebar(); } + set_hover() { + this.app_switcher.on("mouseover", function (event) { + if ($(this).hasClass("active-sidebar")) return; + $(this).addClass("hover"); + }); + + $(".standard-sidebar-item > .item-anchor").on("mouseleave", function () { + $(this).parent().removeClass("hover"); + }); + } + set_active() { + this.app_switcher.toggleClass("active-sidebar"); + if (!this.sidebar.sidebar_expanded) { + this.app_switcher.removeClass("active-sidebar"); + } + } }; From 1c825e80c61b7228d213b18577e64d103f842408 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 17 Feb 2025 22:48:29 +0530 Subject: [PATCH 17/18] fix(minor): cleanup --- frappe/public/js/frappe/ui/apps_switcher.js | 9 ++++++--- frappe/public/js/frappe/ui/sidebar.js | 2 +- frappe/public/scss/desk/sidebar.scss | 6 ++---- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/frappe/public/js/frappe/ui/apps_switcher.js b/frappe/public/js/frappe/ui/apps_switcher.js index 229523df21..0f346cc3db 100644 --- a/frappe/public/js/frappe/ui/apps_switcher.js +++ b/frappe/public/js/frappe/ui/apps_switcher.js @@ -3,7 +3,7 @@ frappe.ui.AppsSwitcher = class AppsSwitcher { this.drop_down_state = false; this.sidebar_wrapper = sidebar.wrapper; this.sidebar = sidebar; - this.app_switcher = sidebar.app_switcher_dropdown; + this.app_switcher = $(sidebar.app_switcher_dropdown[0]); this.setup_app_switcher(); this.set_hover(); } @@ -151,10 +151,13 @@ frappe.ui.AppsSwitcher = class AppsSwitcher { this.app_switcher.on("mouseover", function (event) { if ($(this).hasClass("active-sidebar")) return; $(this).addClass("hover"); + if (!this.sidebar.sidebar_expanded) { + $(this).removeClass("hover"); + } }); - $(".standard-sidebar-item > .item-anchor").on("mouseleave", function () { - $(this).parent().removeClass("hover"); + this.app_switcher.on("mouseleave", function () { + $(this).removeClass("hover"); }); } set_active() { diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index 20c99e3dcc..979e30121f 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -177,7 +177,6 @@ frappe.ui.Sidebar = class Sidebar { } this.set_hover(); this.set_sidebar_state(); - this.set_active_workspace_item(); if (!this.sidebar_expanded) this.close_children_item(); } set_sidebar_state() { @@ -212,6 +211,7 @@ frappe.ui.Sidebar = class Sidebar { this.wrapper.find(".selected")[0].scrollIntoView(); this.setup_sorting(); + this.set_active_workspace_item(); this.set_hover(); } diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index a5877eef6a..a667979871 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -372,9 +372,7 @@ body { padding: 6px; border-radius: var(--border-radius-lg); background: var(--surface-modal); - box-shadow: 0px 10px 24px -3px rgba(0, 0, 0, 0.1); - // box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05); - // box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); + box-shadow: var(--shadow-xl); z-index: 1; } @@ -422,7 +420,7 @@ body { .active-sidebar { background: var(--sidebar-active-color); - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); border-radius: 8px; } .overlay { From 6974958a7539c5f1d35b7f9f0b999fde4f8e454f Mon Sep 17 00:00:00 2001 From: sokumon Date: Tue, 18 Feb 2025 15:35:08 +0530 Subject: [PATCH 18/18] fix: collapse button on mobile visible on scroll --- frappe/public/js/frappe/ui/sidebar.js | 5 +++++ frappe/public/js/frappe/ui/toolbar/toolbar.js | 1 + 2 files changed, 6 insertions(+) diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js index 979e30121f..b2c0e3a332 100644 --- a/frappe/public/js/frappe/ui/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar.js @@ -472,4 +472,9 @@ frappe.ui.Sidebar = class Sidebar { this.setup_pages(); }); } + set_height() { + $(".body-sidebar").css("height", window.innerHeight + "px"); + $(".overlay").css("height", window.innerHeight + "px"); + document.body.style.overflow = "hidden"; + } }; diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js index 9a96f1ed21..ba1c163fc7 100644 --- a/frappe/public/js/frappe/ui/toolbar/toolbar.js +++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js @@ -29,6 +29,7 @@ frappe.ui.toolbar.Toolbar = class { this.bind_events(); $(document).trigger("toolbar_setup"); $(".navbar-brand .app-logo").on("click", () => { + frappe.app.sidebar.set_height(); frappe.app.sidebar.toggle_sidebar(); }); }