vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: handle modal in modal on desktop page

Browse source
This commit is contained in:
sokumon 2025-10-28 10:01:01 +05:30
parent 7c4f646d0b
commit 723122fed7
3 changed files with 88 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frappe/desk/page/desktop/desktop.css
View file

@ -167,6 +167,9 @@
& .modal-title{
color: var(--neutral-white);
font-size: var(--text-2xl);
display: flex;
align-items: center;
gap: 5px;
}
}
& .modal-actions {

103
frappe/desk/page/desktop/desktop.js
View file

@ -1,10 +1,12 @@
frappe.desktop_utils = {};
$.extend(frappe.desktop_utils, {
modal: null,
modal_stack: [],
create_desktop_modal: function (icon, icon_title, icons_data, grid) {
if (!this.modal) {
this.modal = new DesktopModal(icon);
}
this.modal_stack.push(icon);
return this.modal;
},
close_desktop_modal: function () {
@ -155,30 +157,56 @@ class DesktopPage {
update() {
this.prepare();
this.make();
this.setup_avatar();
this.setup();
}
// prepare() {
// this.apps_icons = [];
// let all_icons =
// JSON.parse(localStorage.getItem(`${frappe.session.user}:desktop`)) ||
// frappe.boot.desktop_icons;
// let child_icons = all_icons.filter((d) => {
// return d.parent_icon != "" && d.parent_icon != null && d.hidden != 1;
// });
// let parent_icons = all_icons.filter((e, index) => {
// e.child_icons = [];
// return (e.parent_icon == null || e.parent_icon == "") && e.hidden != 1;
// });
// this.apps_icons = parent_icons;
// child_icons.forEach((f) => {
// let parent_icon = parent_icons.find((g) => g.label == f.parent_icon);
// if (parent_icon) {
// parent_icon.child_icons.push(f);
// }
// });
// }
prepare() {
this.apps_icons = [];
let all_icons =
const icon_map = {};
const all_icons = (
JSON.parse(localStorage.getItem(`${frappe.session.user}:desktop`)) ||
frappe.boot.desktop_icons;
let child_icons = all_icons.filter((d) => {
return d.parent_icon != "" && d.parent_icon != null && d.hidden != 1;
});
let parent_icons = all_icons.filter((e, index) => {
e.child_icons = [];
return (e.parent_icon == null || e.parent_icon == "") && e.hidden != 1;
frappe.boot.desktop_icons
).filter((icon) => {
if (icon.hidden != 1) {
icon.child_icons = [];
icon_map[icon.label] = icon;
return true;
}
return false;
});
this.apps_icons = parent_icons;
child_icons.forEach((f) => {
let parent_icon = parent_icons.find((g) => g.label == f.parent_icon);
if (parent_icon) {
parent_icon.child_icons.push(f);
all_icons.forEach((icon) => {
if (icon.parent_icon && icon_map[icon.parent_icon]) {
icon_map[icon.parent_icon].child_icons.push(icon);
}
if (!icon.parent_icon || !icon_map[icon.parent_icon]) {
this.apps_icons.push(icon);
}
});
}
make() {
this.page.page_head.hide();
$(this.page.body).empty();
@ -568,13 +596,7 @@ class DesktopModal {
}
setup(icon_title, child_icons_data, grid_row_size) {
const me = this;
this.modal = new frappe.get_modal(icon_title, "");
this.modal.find(".modal-header").addClass("desktop-modal-heading");
this.modal.addClass("desktop-modal");
this.modal.attr("draggable", true);
this.modal.find(".modal-body").addClass("desktop-modal-body");
this.$child_icons_wrapper = this.modal.find(".desktop-modal-body");
this.make_modal(icon_title);
this.child_icon_grid = new DesktopIconGrid({
wrapper: this.$child_icons_wrapper,
icons_data: child_icons_data,
@ -586,8 +608,45 @@ class DesktopModal {
this.modal.on("hidden.bs.modal", function () {
me.modal.remove();
frappe.desktop_utils.modal = null;
frappe.desktop_utils.modal_stack = [];
});
}
make_modal(icon_title) {
if ($(".desktop-modal").length == 0) {
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-body").addClass("desktop-modal-body");
this.$child_icons_wrapper = this.modal.find(".desktop-modal-body");
} else {
this.modal.find(".modal-title").text(icon_title);
$(this.modal.find(".modal-body")).empty();
if (frappe.desktop_utils.modal_stack.length == 1) {
this.title_section.find(".icon").remove();
} else {
this.add_back_button();
}
}
}
add_back_button() {
const me = this;
this.title_section = this.modal.find(".title-section").find(".modal-title");
$(this.title_section).prepend(
frappe.utils.icon("chevron-left", "md", "", "", "", "", "white")
);
$(this.title_section)
.find(".icon")
.on("click", function () {
const [prev] = frappe.desktop_utils.modal_stack.splice(-1, 1);
let icon =
frappe.desktop_utils.modal_stack[frappe.desktop_utils.modal_stack.length - 1];
if (icon) {
me.setup(icon.icon_title, icon.child_icons, 4);
me.show();
}
});
}
show() {
this.modal.modal("show");
}

4
frappe/public/icons/timeless/icons.svg
View file

@ -228,6 +228,10 @@ Tip: use lucide.svg in /icons for all downloaded icons
<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /> <path d="M22 10v6" /> <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-chevron-left">
<path d="m15 18-6-6 6-6" />
</symbol>
<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-close-alt">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.78033 2.71967C3.48744 2.42678 3.01257 2.42678 2.71967 2.71967C2.42678 3.01256 2.42678 3.48744 2.71967 3.78033L6.94054 8.00119L2.71967 12.2221C2.42678 12.515 2.42678 12.9898 2.71967 13.2827C3.01257 13.5756 3.48744 13.5756 3.78033 13.2827L8.0012 9.06185L12.222 13.2826C12.5149 13.5755 12.9897 13.5755 13.2826 13.2826C13.5755 12.9897 13.5755 12.5148 13.2826 12.222L9.06186 8.00119L13.2826 3.78044C13.5755 3.48755 13.5755 3.01267 13.2826 2.71978C12.9897 2.42688 12.5149 2.42689 12.222 2.71978L8.0012 6.94054L3.78033 2.71967Z" fill="var(--icon-stroke)"/>
</symbol>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB