diff --git a/frappe/desk/page/desktop/desktop.css b/frappe/desk/page/desktop/desktop.css index 0a6406735c..14624299b0 100644 --- a/frappe/desk/page/desktop/desktop.css +++ b/frappe/desk/page/desktop/desktop.css @@ -117,7 +117,7 @@ } .icon-container{ padding: 10px; - border-radius: 10px; + border-radius: 16px; display: flex; align-items: center; justify-content: center; @@ -249,6 +249,7 @@ } .folder-icon{ + border-radius: 10px; background-color: var(--folder-icon-background-color) !important; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.14); padding: 7px; diff --git a/frappe/hooks.py b/frappe/hooks.py index ab1beae09b..8f5efbf23a 100644 --- a/frappe/hooks.py +++ b/frappe/hooks.py @@ -41,6 +41,7 @@ app_include_icons = [ "/assets/frappe/icons/icons.svg", "/assets/frappe/icons/timeless/icons.svg", "/assets/frappe/icons/espresso/icons.svg", + "/assets/frappe/icons/desktop_icons/alphabets.svg", ] doctype_js = { diff --git a/frappe/public/icons/desktop_icons/alphabets.svg b/frappe/public/icons/desktop_icons/alphabets.svg new file mode 100644 index 0000000000..8b771bad11 --- /dev/null +++ b/frappe/public/icons/desktop_icons/alphabets.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frappe/public/js/frappe/ui/desktop_icon.html b/frappe/public/js/frappe/ui/desktop_icon.html index 79d39bec93..991744f877 100644 --- a/frappe/public/js/frappe/ui/desktop_icon.html +++ b/frappe/public/js/frappe/ui/desktop_icon.html @@ -12,9 +12,7 @@ {% } else { %} -
- {%= frappe.utils.icon(icon.icon || "list-alt" , "lg", "", "", "text-ink-gray-7 current-color", true)%} -
+ {%= frappe.utils.desktop_icon(icon.label.charAt(0).toUpperCase(),"gray")%} {% } %} {% if (!in_folder) { %}
diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js index 4b2fdb9c2b..7c07546f5a 100644 --- a/frappe/public/js/frappe/utils/utils.js +++ b/frappe/public/js/frappe/utils/utils.js @@ -1276,7 +1276,29 @@ Object.assign(frappe.utils, { }, image_path: "/assets/frappe/images/leaflet/", }, - + desktop_icon(letter, color) { + let opacity_hex = "1A"; + let icon_html = $(` +
+ +
+ `); + let color_value = this.desktop_pallete[color || "blue"]; + let bg_color = color_value + opacity_hex; + icon_html.css("backgroundColor", bg_color); + icon_html.find("svg").css("color", color_value); + return icon_html.get(0).outerHTML; + }, + desktop_pallete: { + blue: "#0981E3", + gray: "#7B808A", + }, + desktop_bg_color(color_name) { + let color_value = this.desktop_pallete[color_name]; + color_value + ""; + }, icon( icon_name, size = "sm", diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss index a2f54e0e64..61d469dd2f 100644 --- a/frappe/public/scss/desk/global.scss +++ b/frappe/public/scss/desk/global.scss @@ -725,3 +725,6 @@ details > summary:focus { direction: ltr; } */ +.desktop-alphabet { + stroke: none; +}