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

Merge pull request #35370 from sokumon/workspace-ui

Browse source
This commit is contained in:
Soham Kulkarni 2025-12-21 14:21:11 +05:30 • committed by GitHub
commit 4f47c5a211
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 70 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/view_routing.js
View file

@ -226,6 +226,6 @@ context("View", () => {
it("Route to Website Workspace", () => {
cy.visit("/desk/website");
cy.get(".workspace-title").should("contain", "Website");
cy.get(".navbar-breadcrumbs:visible").get("li > a").should("contain", "Website");
});
});

11
frappe/public/js/frappe/ui/menu.js
View file

@ -7,6 +7,7 @@ frappe.ui.menu = class ContextMenu {
this.menu_items = opts.menu_items;
this.name = frappe.utils.get_random(5);
this.open_on_left = opts.open_on_left;
this.size = opts.size;
this.opts = opts;
}
@ -28,6 +29,14 @@ frappe.ui.menu = class ContextMenu {
// $(document.body).append(this.template);
// }
$(document.body).append(this.template);
this.set_styles();
}
set_styles() {
if (this.size) {
this.template.css({
width: this.size,
});
}
}
add_menu_item(item) {
const me = this;
@ -51,7 +60,7 @@ frappe.ui.menu = class ContextMenu {
>`
}
</div>
<span class="menu-item-title">${item.label}</span>
<span class="menu-item-title">${__(item.label)}</span>
<div class="menu-item-icon" style="margin-left:auto">
${item.items && item.items.length ? frappe.utils.icon("chevron-right") : ""}
</div>

15
frappe/public/js/frappe/views/breadcrumbs.js
View file

@ -53,9 +53,22 @@ frappe.breadcrumbs = {
this.clear();
if (!breadcrumbs) return this.toggle(false);
if (breadcrumbs.type === "Custom") {
this.set_custom_breadcrumbs(breadcrumbs);
if (breadcrumbs.menu_items && breadcrumbs.menu_items.length) {
let breadcrumbs_container = $(".navbar-breadcrumbs");
breadcrumbs_container.each((index, container) => {
let last_element = $(container)
.find("li")
.get($(container).find("li").length - 1);
$(last_element).find("a").attr("href", "");
frappe.ui.create_menu({
parent: $(last_element),
menu_items: breadcrumbs.menu_items,
size: "fit-content",
});
});
}
} else {
// workspace
this.set_workspace_breadcrumb(breadcrumbs);

92
frappe/public/js/frappe/views/workspace/workspace.js
View file

@ -73,45 +73,7 @@ frappe.views.Workspace = class Workspace {
}
prepare_container() {
this.body = this.wrapper.find(".layout-main-section");
this.prepare_new_and_edit();
}
prepare_new_and_edit() {
this.$page = $(`
<div class="workspace-header" style="display: flex; gap: 7px; margin-top: var(--margin-sm);">
<div class="workspace-icon"></div>
<h4 class="workspace-title"></h4>
</div>
<div class="editor-js-container"></div>
<div class="workspace-footer">
<button data-label="New" class="btn btn-default ellipsis btn-new-workspace">
<svg class="es-icon es-line icon-xs" style="" aria-hidden="true">
<use class="" href="#es-line-add"></use>
</svg>
<span class="hidden-xs" data-label="New">${__("New")}</span>
</button>
<button class="btn btn-default btn-sm mr-2 btn-edit-workspace" data-label="Edit">
<svg class="es-icon es-line icon-xs" style="" aria-hidden="true">
<use class="" href="#es-line-edit"></use>
</svg>
<span class="hidden-xs" data-label="Edit">${__("Edit")}</span>
</button>
</div>
`).appendTo(this.body);
this.body.find(".btn-new-workspace").on("click", () => {
this.initialize_new_page(true);
});
this.body.find(".btn-edit-workspace").on("click", 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();
});
});
this.$page = $(`<div class="editor-js-container"></div>`).appendTo(this.body);
}
get_pages() {
@ -216,17 +178,46 @@ frappe.views.Workspace = class Workspace {
let current_page = this.workspaces.find((p) => p.name == page.name);
this._page = current_page;
if (frappe.boot.app_name_style == "Title") {
frappe.breadcrumbs.add({
type: "Custom",
label: __(this._page.name),
});
this.wrapper.find(".workspace-header").hide();
this.wrapper
.find(".editor-js-container")
.get(0)
.style.setProperty("margin-top", "var(--margin-sm)");
}
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;
},
},
{
label: "New",
icon: "plus",
onClick: function () {
me.initialize_new_page(true);
},
condition: () => {
return me.has_create_access;
},
},
],
});
this.wrapper.find(".workspace-header").hide();
this.wrapper
.find(".editor-js-container")
.get(0)
.style.setProperty("margin-top", "var(--margin-sm)");
// set app
let app;
@ -341,7 +332,6 @@ frappe.views.Workspace = class Workspace {
// switch headers
if (!this.body.hasClass("edit-mode")) {
this.wrapper.find(".page-head").addClass("hidden");
this.wrapper.find(".workspace-header").removeClass("hidden");
}
}

3
frappe/public/scss/desk/breadcrumb.scss
View file

@ -6,10 +6,13 @@
/*! This comment will be included even in compressed mode. */
.navbar-breadcrumbs {
flex-wrap: nowrap;
align-items: center;
line-height: 1;
a {
text-decoration: none;
color: var(--ink-gray-5);
font-weight: var(--weight-medium);
font-size: var(--text-lg);
letter-spacing: get_letterspacing("sm", "regular");
&:hover {
color: var(--ink-gray-7);

2
frappe/public/scss/desk/desktop.scss
View file

@ -948,8 +948,8 @@ body {
}
.page-head .container {
max-width: var(--page-max-width);
margin: auto;
margin-left: 0px;
}
.layout-main-section-wrapper {