fix: polish desktop screen
This commit is contained in:
parent
0f79208f89
commit
9122444258
6 changed files with 88 additions and 45 deletions
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -138,6 +138,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
#desktop-modal{
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.desktop-modal-body {
|
||||
width: var(--desktop-modal-width);
|
||||
height: var(--desktop-modal-height);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue