feat: bring workspace creation controls to the breadcrumb

This commit is contained in:
sokumon 2025-12-20 23:37:20 +05:30
parent 768d6e164b
commit 59a8fdc5a7
4 changed files with 58 additions and 53 deletions

View file

@ -53,9 +53,21 @@ 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,
});
});
}
} else {
// workspace
this.set_workspace_breadcrumb(breadcrumbs);

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");
}
}

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);

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 {