Merge pull request #35438 from sokumon/mobile-desktop
This commit is contained in:
commit
2996fb80ad
4 changed files with 168 additions and 36 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
{{ _("Search") }}
|
||||
</span>
|
||||
<span>
|
||||
{{ "⌘ K" if is_mac else "Ctrl K" }}
|
||||
{{ "⌘K" if is_mac else "Ctrl+K" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue