From 4a751dcdd0b8c4f031a1d107681be9b66abf46b9 Mon Sep 17 00:00:00 2001 From: sokumon Date: Wed, 17 Sep 2025 02:32:22 +0530 Subject: [PATCH] fix: more cleanups and polish --- .../desk/doctype/desktop_icon/desktop_icon.js | 4 +- .../doctype/desktop_icon/desktop_icon.json | 4 +- .../desk/doctype/desktop_icon/desktop_icon.py | 19 ++++- frappe/desk/page/desktop/desktop.css | 6 +- frappe/desk/page/desktop/desktop.html | 11 +++ frappe/desk/page/desktop/desktop.js | 8 +- frappe/public/icons/timeless/icons.svg | 74 ++++++++++++++++++- frappe/public/js/frappe/ui/sidebar/sidebar.js | 32 +++++--- .../js/frappe/ui/sidebar/sidebar_header.html | 6 +- .../js/frappe/ui/sidebar/sidebar_header.js | 22 +++++- frappe/public/js/frappe/ui/toolbar/toolbar.js | 13 ++++ frappe/public/js/frappe/utils/common.js | 9 +++ frappe/public/js/frappe/utils/utils.js | 15 +++- frappe/public/scss/desk/sidebar.scss | 1 + frappe/public/scss/desk/sidebar_header.scss | 9 +-- 15 files changed, 198 insertions(+), 35 deletions(-) diff --git a/frappe/desk/doctype/desktop_icon/desktop_icon.js b/frappe/desk/doctype/desktop_icon/desktop_icon.js index 64f25a7d53..1b57bfe6dc 100644 --- a/frappe/desk/doctype/desktop_icon/desktop_icon.js +++ b/frappe/desk/doctype/desktop_icon/desktop_icon.js @@ -2,7 +2,9 @@ // For license information, please see license.txt frappe.ui.form.on("Desktop Icon", { - refresh: function (frm) {}, + refresh: function (frm) { + frm.fields_dict.color.set_data(Object.keys(frappe.palette_map)); + }, before_save: function (frm) { if (frm.doc.type == "workspace") { frappe.call({ diff --git a/frappe/desk/doctype/desktop_icon/desktop_icon.json b/frappe/desk/doctype/desktop_icon/desktop_icon.json index 1af69bc9e6..aa76da3526 100644 --- a/frappe/desk/doctype/desktop_icon/desktop_icon.json +++ b/frappe/desk/doctype/desktop_icon/desktop_icon.json @@ -128,7 +128,7 @@ }, { "fieldname": "color", - "fieldtype": "Color", + "fieldtype": "Autocomplete", "label": "Color" }, { @@ -166,7 +166,7 @@ } ], "links": [], - "modified": "2025-09-04 00:30:45.311189", + "modified": "2025-09-08 02:43:09.997790", "modified_by": "Administrator", "module": "Desk", "name": "Desktop Icon", diff --git a/frappe/desk/doctype/desktop_icon/desktop_icon.py b/frappe/desk/doctype/desktop_icon/desktop_icon.py index b8569b3252..0288da4257 100644 --- a/frappe/desk/doctype/desktop_icon/desktop_icon.py +++ b/frappe/desk/doctype/desktop_icon/desktop_icon.py @@ -23,7 +23,7 @@ class DesktopIcon(Document): app: DF.Data | None blocked: DF.Check category: DF.Data | None - color: DF.Color | None + color: DF.Autocomplete | None custom: DF.Check description: DF.SmallText | None force_show: DF.Check @@ -601,3 +601,20 @@ def generate_color(): return random.randint(0, 255) return "#%02X%02X%02X" % (hex(), hex(), hex()) + + +def create_desktop_icons_from_installed_apps(): + from frappe.apps import is_desk_apps + + apps = frappe.get_installed_apps() + for a in apps: + app_details = frappe.get_hooks("add_to_apps_screen", app_name=a) + if len(app_details) != 0: + if not is_desk_apps(app_details): + icon = frappe.new_doc("Desktop Icon") + icon.route = app_details[0]["route"] + icon.label = app_details[0]["title"] + icon.type = "link" + icon.link = app_details[0]["route"] + icon.logo_url = app_details[0]["logo"] + icon.save() diff --git a/frappe/desk/page/desktop/desktop.css b/frappe/desk/page/desktop/desktop.css index 38a596aedf..b25eba00ef 100644 --- a/frappe/desk/page/desktop/desktop.css +++ b/frappe/desk/page/desktop/desktop.css @@ -2,9 +2,11 @@ display: flex; align-items: center; justify-content: center; + flex-direction: column; + margin-top: 20px; } .icon-stroke{ - stroke-width: 1px; + stroke-width: 1.5px; } .icons{ gap: 30px; @@ -44,4 +46,4 @@ text-align: center; text-wrap: nowrap; margin-top: 5px; -} +} \ No newline at end of file diff --git a/frappe/desk/page/desktop/desktop.html b/frappe/desk/page/desktop/desktop.html index cdce7a62e2..f7dc833ba2 100644 --- a/frappe/desk/page/desktop/desktop.html +++ b/frappe/desk/page/desktop/desktop.html @@ -1,6 +1,17 @@
+
{% for icon in icons %} diff --git a/frappe/desk/page/desktop/desktop.js b/frappe/desk/page/desktop/desktop.js index 13a61d16ac..95170082b7 100644 --- a/frappe/desk/page/desktop/desktop.js +++ b/frappe/desk/page/desktop/desktop.js @@ -9,12 +9,12 @@ frappe.pages["desktop"].on_page_load = function (wrapper) { $(frappe.render_template("desktop")).appendTo(page.body); setup(); }; +frappe.pages["desktop"].on_page_show = function (wrapper) {}; function setup() { let desktop_icon_style = frappe.boot.desktop_icon_style; $(".desktop-icon").each((i, el) => { let icon_name = $(el).attr("data-icon"); let icon_container = $(el.children[0]); - let color_scheme = frappe.palette[i % frappe.palette.length]; if ($(el).attr("data-logo") != "None") { // create a img tag @@ -31,6 +31,8 @@ function setup() { // Apply stroke via CSS if (desktop_icon_style !== "Monochrome") { let bg_color, text_color; + let color_scheme = + frappe.palette[frappe.palette_map[icon_container.attr("data-color")]]; if (desktop_icon_style === "Subtle") { bg_color = `var(${color_scheme[0]})`; text_color = color_scheme[1]; @@ -41,13 +43,13 @@ function setup() { // #0289f7bd var style = window.getComputedStyle(document.body); console.log(style.getPropertyValue(color_scheme[1])); - bg_color = style.getPropertyValue(color_scheme[1]) + "bd"; + bg_color = style.getPropertyValue(color_scheme[1]) + "e6"; text_color = color_scheme[0]; } icon_container.css("background-color", `${bg_color}`); $svg.find("*").css("stroke", `var(${text_color})`); - // Also apply to the root just in case + // Apply to svg root $svg.css("stroke", `var(${bg_color})`); icon_container.css("border", "none"); } diff --git a/frappe/public/icons/timeless/icons.svg b/frappe/public/icons/timeless/icons.svg index 7db2c8491d..69c95293f4 100644 --- a/frappe/public/icons/timeless/icons.svg +++ b/frappe/public/icons/timeless/icons.svg @@ -75,11 +75,21 @@ Tip: use lucide.svg in /icons for all downloaded icons - + + + + + + + + + + + @@ -372,10 +382,19 @@ Tip: use lucide.svg in /icons for all downloaded icons + + + + + + + + + @@ -433,6 +452,17 @@ Tip: use lucide.svg in /icons for all downloaded icons + + + + + + + + + + + @@ -482,10 +512,50 @@ Tip: use lucide.svg in /icons for all downloaded icons - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar.js b/frappe/public/js/frappe/ui/sidebar/sidebar.js index a219987fdb..a3492d6d6b 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar.js @@ -152,8 +152,7 @@ frappe.ui.Sidebar = class Sidebar { let match = false; const that = this; $(".item-anchor").each(function () { - console.log($(this).attr("href")); - if ($(this).attr("href") == window.location.pathname) { + if ($(this).attr("href") == decodeURIComponent(window.location.pathname)) { match = true; if (that.active_item) that.active_item.removeClass("active-sidebar"); that.active_item = $(this).parent(); @@ -375,7 +374,6 @@ frappe.ui.Sidebar = class Sidebar { } else if (item.type === "URL") { path = item.external_link; } - console.log(path); return $( frappe.render_template("sidebar_item", { item: item, @@ -528,7 +526,6 @@ frappe.ui.Sidebar = class Sidebar { let route = frappe.get_route(); if (frappe.get_route()[0] == "setup-wizard") return; let module_name; - if (route[0] == "Workspaces") { let workspace = route[1] || "Build"; frappe.app.sidebar.setup(workspace); @@ -541,11 +538,15 @@ frappe.ui.Sidebar = class Sidebar { frappe.app.sidebar.setup(sidebars[0] || "Build"); } } else if (route[0] == "query-report") { - frappe.model.with_doc("Report", route[1], () => { - let test = frappe.get_doc("Report", route[1]); - module_name = frappe.boot.module_wise_workspaces[test.module][0] || "Build"; - frappe.app.sidebar.setup(module_name); - }); + let doctype = route[1]; + let sidebars = this.get_correct_workspace_sidebars(doctype); + if (this.workspace_title && sidebars.includes(this.workspace_title.toLowerCase())) { + frappe.app.sidebar.setup(this.workspace_title.toLowerCase()); + } else { + frappe.app.sidebar.setup(sidebars[0] || "Build"); + } + } else { + this.set_sidebar_for_page(); } this.set_active_workspace_item(); @@ -553,10 +554,17 @@ frappe.ui.Sidebar = class Sidebar { set_sidebar_for_page() { let route = frappe.get_route(); - if (route.length >= 2) return; - let workspace_title = frappe.boot.module_wise_workspaces[locals["Page"][route[0]].module]; + let views = ["List", "Form", "Workspaces", "query-report"]; + let matches = views.some((view) => route.includes(view)); + if (matches) return; + let workspace_title; + if (route.length == 2) { + workspace_title = this.get_correct_workspace_sidebars(route[1]); + } else { + workspace_title = this.get_correct_workspace_sidebars(route); + } let module_name = workspace_title ? workspace_title[0] : "Build"; - frappe.app.sidebar.setup(module_name); + frappe.app.sidebar.setup(module_name || this.workspace_title || "Build"); } get_correct_workspace_sidebars(link_to) { let sidebars = []; diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_header.html b/frappe/public/js/frappe/ui/sidebar/sidebar_header.html index dd14158fd2..709d2d170e 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_header.html +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_header.html @@ -1,7 +1,9 @@ -
- {%= frappe.avatar(workspace_title, "avatar-medium header-logo" , workspace_title, "", true) %} +
+
diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_header.js b/frappe/public/js/frappe/ui/sidebar/sidebar_header.js index 156903e351..26d120a6c6 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_header.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_header.js @@ -46,9 +46,20 @@ frappe.ui.SidebarHeader = class SidebarHeader { make() { $(".sidebar-header").remove(); $(".sidebar-header-menu").remove(); + this.set_header_icon_and_color(); $( frappe.render_template("sidebar_header", { workspace_title: this.workspace_title, + header_icon: frappe.utils.icon( + this.header_icon, + "lg", + "", + "", + "", + false, + `var(${this.header_bg_color})` + ), + header_bg_color: this.header_stroke_color, }) ).prependTo(this.sidebar_wrapper); @@ -57,7 +68,16 @@ frappe.ui.SidebarHeader = class SidebarHeader { this.$header_title = this.wrapper.find(".header-title"); this.$drop_icon = this.wrapper.find(".drop-icon"); } - + set_header_icon_and_color() { + let icon = frappe.boot.desktop_icons.filter((f) => f.label == this.workspace_title); + if (icon.length > 0) { + this.header_icon = icon[0].icon; + this.header_logo_color = icon[0].color; + this.header_bg_color = frappe.palette[frappe.palette_map[this.header_logo_color]][0]; + this.header_stroke_color = + frappe.palette[frappe.palette_map[this.header_logo_color]][1]; + } + } setup_app_switcher() { this.dropdown_menu = $(".sidebar-header-menu"); $(".sidebar-header").on("click", (e) => { diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js index af3d7f4307..857a60fa0c 100644 --- a/frappe/public/js/frappe/ui/toolbar/toolbar.js +++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js @@ -32,6 +32,19 @@ frappe.ui.toolbar.Toolbar = class { this.app_logo = this.navbar.find(".app-logo"); this.bind_click(); } + change_toolbar() { + $(".navbar .container").css("max-width", "43%"); + $(".navbar-brand").css("display", "block"); + $(".navbar-brand .app-logo").attr("src", frappe.boot.navbar_settings.app_logo); + let nav_elements = $(".navbar-nav").children(); + $("form").css("display", "none"); + $(""); + for (let i = 0; i < nav_elements.length - 1; i++) { + $(nav_elements[i]).attr("style", "display: none !important"); + $(nav_elements[i]).find("*").attr("style", "display: none !important"); + } + } + bind_click() { $(".navbar-brand .app-logo").on("click", (event) => { frappe.app.sidebar.set_height(); diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js index a2b8c2ac6d..a13696c05e 100644 --- a/frappe/public/js/frappe/utils/common.js +++ b/frappe/public/js/frappe/utils/common.js @@ -155,6 +155,15 @@ frappe.palette = [ ["--gray-avatar-bg", "--gray-avatar-color"], ]; +function process_palette() { + frappe.palette.forEach((color, index) => { + let color_name = color[0].split("-")[2]; + frappe.palette_map[color_name] = index; + }); +} +frappe.palette_map = {}; +process_palette(); + frappe.get_palette = function (txt) { if (!txt) return frappe.palette[8]; // breaks when undefined var idx = cint((parseInt(md5(txt).substr(4, 2), 16) + 1) / 5.33); diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js index 429e4219fb..d10def77df 100644 --- a/frappe/public/js/frappe/utils/utils.js +++ b/frappe/public/js/frappe/utils/utils.js @@ -1239,7 +1239,8 @@ Object.assign(frappe.utils, { icon_class = "", icon_style = "", svg_class = "", - currentColor = false + current_color = false, + stroke_color = null ) { let size_class = ""; let is_espresso = icon_name.startsWith("es-"); @@ -1250,17 +1251,23 @@ Object.assign(frappe.utils, { } else { size_class = `icon-${size}`; } - return ``; + + return $svg; }, flag(country_code) { diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index cc5ef91a23..aea09dceee 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -126,6 +126,7 @@ flex: 1; height: 30px; color: var(--ink-gray-7); + text-decoration: none; @include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1)); .sidebar-item-icon { padding: 7px; diff --git a/frappe/public/scss/desk/sidebar_header.scss b/frappe/public/scss/desk/sidebar_header.scss index 4517898e5e..0aba1c8392 100644 --- a/frappe/public/scss/desk/sidebar_header.scss +++ b/frappe/public/scss/desk/sidebar_header.scss @@ -13,14 +13,13 @@ @include truncate(); } } +.header-logo-container { + border-radius: 8px; +} .header-logo { width: 32px; height: 32px; -} -.header-logo > * { - background-color: var(--gray-200); - color: var(--gray-500); - border-radius: 20% !important; + padding: 4px; } .title-container {