fix: polish desktop screen

This commit is contained in:
sokumon 2025-11-11 10:22:52 +05:30
parent 0f79208f89
commit 9122444258
6 changed files with 88 additions and 45 deletions

View file

@ -151,7 +151,10 @@ def load_desktop_data(bootinfo):
bootinfo.desktop_icons = get_desktop_icons()
bootinfo.workspaces = get_workspace_sidebar_items()
bootinfo.app_name_style = (frappe.db.get_single_value("Desktop Settings", "show_app_name_in_header"),)
bootinfo.app_name_style = frappe.db.get_single_value("Desktop Settings", "show_app_name_in_header")
bootinfo.show_app_icons_as_folder = frappe.db.get_single_value(
"Desktop Settings", "show_app_icons_as_folder"
)
bootinfo.workspace_sidebar_item = get_sidebar_items()
allowed_pages = [d.name for d in bootinfo.workspaces.get("pages")]
bootinfo.module_wise_workspaces = get_controller("Workspace").get_module_wise_workspaces()

View file

@ -7,6 +7,7 @@
"field_order": [
"icon_style",
"navbar_style",
"show_app_icons_as_folder",
"sidebar_section",
"show_app_name_in_header"
],
@ -34,13 +35,19 @@
"fieldtype": "Select",
"label": "Show App Name in Header",
"options": "Default\nTitle\nSubtitle"
},
{
"default": "0",
"fieldname": "show_app_icons_as_folder",
"fieldtype": "Check",
"label": "Show App Icons As Folder"
}
],
"grid_page_length": 50,
"index_web_pages_for_search": 1,
"issingle": 1,
"links": [],
"modified": "2025-10-19 04:53:14.413040",
"modified": "2025-11-11 00:23:53.552669",
"modified_by": "Administrator",
"module": "Desk",
"name": "Desktop Settings",

View file

@ -23,6 +23,7 @@ class DesktopSettings(Document):
"Timeless Launchpad",
"Apps with Search",
]
show_app_icons_as_folder: DF.Check
show_app_name_in_header: DF.Literal["Default", "Title", "Subtitle"]
# end: auto-generated types

View file

@ -138,6 +138,11 @@
}
}
#desktop-modal{
transform: none;
transition: none;
}
.desktop-modal-body {
width: var(--desktop-modal-width);
height: var(--desktop-modal-height);

View file

@ -1,20 +1,20 @@
<!-- jinja -->
<div class="desktop-wrapper">
<header class="navbar navbar-expand navbar-container" role="navigation">
<a class="navbar-home" href="/app">
<div class="navbar-home">
<img
class="brand-logo"
src="{{ brand_logo }}"
alt="{{ _("App Logo") }}"
>
</a>
</div>
<div class="desktop-search-wrapper text-muted ">
<input
id="navbar-search"
type="text"
class="form-control"
aria-haspopup="true"
placeholder="Search apps, workspaces"
placeholder="Search for type a command"
>
<span class="desktop-search-icon">
<svg class="icon icon-sm"><use href="#icon-search"></use></svg>
@ -25,17 +25,5 @@
</span>
</header>
<div class="desktop-container">
<!-- <div class="icons">
{% for icon in icons %}
<a class="desktop-icon" data-logo="{{ icon.logo_url }}" data-icon="{{ icon.icon }}" data-type="{{ icon.type }}" style="text-decoration:none">
<div class="icon-container"> </div>
<div class="icon-caption">
<div class="icon-title">{{ icon.label }}</div>
<div class="icon-subtitle"></div>
</div>
</a>
{% endfor %}
</div> -->
</div>
</div>

View file

@ -157,7 +157,7 @@ class DesktopPage {
setup() {
this.setup_avatar();
this.setup_navbar();
this.setup_icon_search();
this.setup_awesomebar();
this.handke_route_change();
}
setup_avatar() {
@ -182,6 +182,13 @@ class DesktopPage {
window.location.reload();
},
},
{
icon: "log-out",
label: "Logout",
onClick: function () {
frappe.app.logout();
},
},
];
frappe.ui.create_menu($(".desktop-avatar"), menu_items, null, true);
}
@ -189,6 +196,30 @@ class DesktopPage {
$(".sticky-top > .navbar").hide();
}
setup_awesomebar() {
if (frappe.boot.desk_settings.search_bar) {
let awesome_bar = new frappe.search.AwesomeBar();
awesome_bar.setup(".desktop-search-wrapper #navbar-search");
}
frappe.ui.keys.add_shortcut({
shortcut: "ctrl+g",
action: function (e) {
$(".desktop-search-wrapper #navbar-search").focus();
e.preventDefault();
return false;
},
description: __("Open Awesomebar"),
});
frappe.ui.keys.add_shortcut({
shortcut: "ctrl+k",
action: function (e) {
$(".desktop-search-wrapper #navbar-search").focus();
e.preventDefault();
return false;
},
description: __("Open Awesomebar"),
});
}
handke_route_change() {
const me = this;
frappe.router.on("change", function () {
@ -200,32 +231,32 @@ class DesktopPage {
});
}
setup_icon_search() {
let all_icons = $(".icon-title");
let icons_to_show = [];
$(".desktop-container .icons").append(
"<div class='no-apps-message hidden'> No apps found </div>"
);
$(".desktop-search-wrapper > #navbar-search").on("input", function (e) {
let search_query = $(e.target).val().toLowerCase();
console.log(search_query);
icons_to_show = [];
all_icons.each(function (index, element) {
$(element).parent().parent().hide();
let label = $(element).text().toLowerCase();
if (label.includes(search_query)) {
icons_to_show.push(element);
}
});
// setup_icon_search() {
// let all_icons = $(".icon-title");
// let icons_to_show = [];
// $(".desktop-container .icons").append(
// "<div class='no-apps-message hidden'> No apps found </div>"
// );
// $(".desktop-search-wrapper > #navbar-search").on("input", function (e) {
// let search_query = $(e.target).val().toLowerCase();
// console.log(search_query);
// icons_to_show = [];
// all_icons.each(function (index, element) {
// $(element).parent().parent().hide();
// let label = $(element).text().toLowerCase();
// if (label.includes(search_query)) {
// icons_to_show.push(element);
// }
// });
if (icons_to_show.length == 0) {
$(".desktop-container .icons").find(".no-apps-message").removeClass("hidden");
} else {
$(".desktop-container .icons").find(".no-apps-message").addClass("hidden");
}
toggle_icons(icons_to_show);
});
}
// if (icons_to_show.length == 0) {
// $(".desktop-container .icons").find(".no-apps-message").removeClass("hidden");
// } else {
// $(".desktop-container .icons").find(".no-apps-message").addClass("hidden");
// }
// toggle_icons(icons_to_show);
// });
// }
}
class DesktopIconGrid {
@ -424,7 +455,7 @@ class DesktopIcon {
}
get_child_icons_data() {
return this.icon_data.child_icons;
return this.icon_data.child_icons.sort((a, b) => a.idx - b.idx);
}
get_desktop_icon_html() {
return this.icon;
@ -448,7 +479,11 @@ class DesktopIcon {
}
render_folder_thumbnail() {
if (this.icon_type == "Folder") {
let condition =
frappe.boot.show_app_icons_as_folder &&
this.icon_type == "App" &&
this.child_icons.length > 0;
if (this.icon_type == "Folder" || condition) {
if (!this.folder_wrapper) this.folder_wrapper = this.icon.find(".icon-container");
this.folder_wrapper.html("");
this.folder_grid = new DesktopIconGrid({
@ -459,6 +494,9 @@ class DesktopIcon {
in_modal: true,
no_dragging: true,
});
if (this.icon_type == "App") {
this.folder_wrapper.addClass("folder-icon");
}
}
}
@ -511,6 +549,7 @@ class DesktopModal {
this.modal = new frappe.get_modal(icon_title, "");
this.modal.find(".modal-header").addClass("desktop-modal-heading");
this.modal.addClass("desktop-modal");
this.modal.find(".modal-dialog").attr("id", "desktop-modal");
this.modal.find(".modal-body").addClass("desktop-modal-body");
this.$child_icons_wrapper = this.modal.find(".desktop-modal-body");
} else {