Merge pull request #35438 from sokumon/mobile-desktop

This commit is contained in:
Soham Kulkarni 2025-12-28 14:15:39 +05:30 committed by GitHub
commit 2996fb80ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 168 additions and 36 deletions

View file

@ -182,6 +182,7 @@
.desktop-modal{
backdrop-filter: var(--desktop-blur);
display: flex !important;
justify-content: center;
& .modal-dialog{
& .modal-content {
top: 120px;
@ -357,4 +358,82 @@
bottom: 5%;
right: 5%;
}
}
/* @media screen and (max-width: 320px) {
.icons{
grid-template-columns: repeat(2, 1fr) !important;
}
} */
@media screen and (max-width: 570px) {
:root {
--desktop-icon-dimension: 50px;
--desktop-icon-container: 117px;
--folder-thumbnail-icon-height:17px;
}
.desktop-container {
padding: 20px 13px;
> .icons-container {
width: 100%;
margin-top: 0;
padding: 0;
> .icons {
gap: 8px;
row-gap: 12px;
@media screen and (max-width: 380px) {
--desktop-icon-container: 100px;
.folder-icon > .icons{
grid-template-columns: repeat(2, 1fr) I !important;
}
}
> .desktop-icon {
width: var(--desktop-icon-container);
height: var(--desktop-icon-container);
}
}
}
}
.desktop-modal-body {
width: 90vw;
> .icons-container {
width: 100%;
overflow: hidden !important;
margin: 0px;
margin-top: 0;
padding: 0;
> .icons {
position: relative;
right: 6%;
column-gap: 4px;
row-gap: 8px;
@media screen and (max-width: 380px) {
--desktop-icon-container: 100px;
.folder-icon > .icons{
grid-template-columns: repeat(2, 1fr) I !important;
}
}
> .desktop-icon {
width: var(--desktop-icon-container);
height: var(--desktop-icon-container);
}
}
}
}
.folder-icon > .icons-container {
overflow: hidden;
> .icons {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(2, 1fr) !important;
}
}
}

View file

@ -19,7 +19,7 @@
{{ _("Search") }}
</span>
<span>
{{ "⌘ K" if is_mac else "Ctrl K" }}
{{ "⌘K" if is_mac else "Ctrl+K" }}
</span>
</button>
</div>

View file

@ -1285,10 +1285,15 @@ Object.assign(frappe.utils, {
</svg>
</div>
`);
let color_value = this.desktop_pallete[color || "blue"];
let bg_color = color_value + opacity_hex;
let pallete_color = this.desktop_pallete[color || "blue"];
let bg_color = pallete_color + opacity_hex;
let stroke_color = pallete_color;
if (frappe.boot.desktop_icon_style == "Solid") {
bg_color = stroke_color;
stroke_color = "var(--white)";
}
icon_html.css("backgroundColor", bg_color);
icon_html.find("svg").css("color", color_value);
icon_html.find("svg").css("color", stroke_color);
return icon_html.get(0).outerHTML;
},
desktop_pallete: {

View file

@ -179,40 +179,88 @@ frappe.views.Workspace = class Workspace {
let current_page = this.workspaces.find((p) => p.name == page.name);
this._page = current_page;
const me = this;
let header_dropdown = `${__(this._page.name)} ${frappe.utils.icon("chevron-down")}`;
frappe.breadcrumbs.add({
type: "Custom",
label: header_dropdown,
route: "#",
menu_items: [
{
label: "Edit",
icon: "edit",
onClick: async () => {
if (!this.editor || !this.editor.readOnly) return;
this.is_read_only = false;
await this.editor.readOnly.toggle();
this.editor.isReady.then(() => {
this.setup_customization_buttons(this._page);
this.make_blocks_sortable();
});
},
condition: () => {
return current_page.is_editable;
},
let header_dropdown = `${__(this._page.name)}`;
let menu_items = [
{
label: "Edit",
icon: "edit",
onClick: async () => {
if (!this.editor || !this.editor.readOnly) return;
this.is_read_only = false;
await this.editor.readOnly.toggle();
this.editor.isReady.then(() => {
this.setup_customization_buttons(this._page);
this.make_blocks_sortable();
});
},
{
label: "New",
icon: "plus",
onClick: function () {
me.initialize_new_page(true);
},
condition: () => {
return me.has_create_access;
},
condition: () => {
return current_page.is_editable;
},
],
});
},
{
label: "New",
icon: "plus",
onClick: function () {
me.initialize_new_page(true);
},
condition: () => {
return me.has_create_access;
},
},
];
if (frappe.is_mobile()) {
frappe.breadcrumbs.add({
type: "Custom",
label: header_dropdown + `${frappe.utils.icon("chevron-down")}`,
route: "#",
menu_items: menu_items,
});
} else {
frappe.breadcrumbs.add({
type: "Custom",
label: header_dropdown,
route: "#",
});
if (!this.add_workspace_controls) {
let workspace_actions_button = this.page.add_action_icon("ellipsis");
$(workspace_actions_button).removeClass("btn-default");
frappe.ui.create_menu({
parent: $(workspace_actions_button),
open_on_left: true,
size: "fit-content",
menu_items: [
{
label: "Edit",
icon: "edit",
onClick: async () => {
if (!this.editor || !this.editor.readOnly) return;
this.is_read_only = false;
await this.editor.readOnly.toggle();
this.editor.isReady.then(() => {
this.setup_customization_buttons(this._page);
this.make_blocks_sortable();
});
},
condition: () => {
return current_page.is_editable;
},
},
{
label: "New",
icon: "plus",
onClick: function () {
me.initialize_new_page(true);
},
condition: () => {
return me.has_create_access;
},
},
],
});
this.add_workspace_controls = true;
}
}
this.wrapper.find(".workspace-header").hide();
this.wrapper
.find(".editor-js-container")