From eddd5b00b62850531b76a2954ab5ac2026516141 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 15 Dec 2025 18:30:44 +0530 Subject: [PATCH 01/12] feat: init form sidebar redesign --- frappe/core/doctype/docfield/docfield.json | 9 ++- frappe/public/js/frappe/form/layout.js | 3 +- .../js/frappe/form/sidebar/form_sidebar.js | 17 ++++- frappe/public/js/frappe/form/tab.js | 6 ++ .../frappe/form/templates/form_sidebar.html | 46 +++++++++-- frappe/public/js/frappe/form/toolbar.js | 2 +- frappe/public/scss/desk/form.scss | 14 +++- frappe/public/scss/desk/form_sidebar.scss | 76 ++++++++++++++++--- frappe/public/scss/desk/page.scss | 7 ++ 9 files changed, 159 insertions(+), 21 deletions(-) diff --git a/frappe/core/doctype/docfield/docfield.json b/frappe/core/doctype/docfield/docfield.json index 7ef59cc20b..2b190095ee 100644 --- a/frappe/core/doctype/docfield/docfield.json +++ b/frappe/core/doctype/docfield/docfield.json @@ -76,6 +76,7 @@ "width", "max_height", "columns", + "icon", "column_break_22", "description", "documentation_url", @@ -626,6 +627,12 @@ "fieldtype": "Select", "label": "Button Color", "options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger" + }, + { + "depends_on": "eval: doc.type == \"Tab Break\"", + "fieldname": "icon", + "fieldtype": "Icon", + "label": "Icon" } ], "grid_page_length": 50, @@ -633,7 +640,7 @@ "index_web_pages_for_search": 1, "istable": 1, "links": [], - "modified": "2025-12-01 06:56:29.335491", + "modified": "2025-12-15 11:28:13.492477", "modified_by": "Administrator", "module": "Core", "name": "DocField", diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js index 9657e4bbc3..aad7c8c45a 100644 --- a/frappe/public/js/frappe/form/layout.js +++ b/frappe/public/js/frappe/form/layout.js @@ -150,6 +150,7 @@ frappe.ui.form.Layout = class Layout { if (this.is_tabbed_layout()) { // add a tab without `fieldname` to avoid conflicts + this.add_default_tabs(fields); let default_tab = { label: __("Details"), fieldtype: "Tab Break", @@ -201,7 +202,7 @@ frappe.ui.form.Layout = class Layout { (this.fields[0] && this.fields[0].fieldtype != "Section Break") || !this.fields.length ); } - + add_default_tabs() {} no_opening_tab() { return (this.fields[1] && this.fields[1].fieldtype != "Tab Break") || !this.fields.length; } diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js index 0f2c27ef3a..890aed1a47 100644 --- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js +++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js @@ -34,10 +34,25 @@ frappe.ui.form.Sidebar = class { this.setup_keyboard_shortcuts(); this.show_auto_repeat_status(); frappe.ui.form.setup_user_image_event(this.frm); - + this.indicator = $(this.sidebar).find(".indicator-pill"); + this.set_form_indicator(); this.refresh(); } + set_form_indicator() { + let indicator = frappe.get_indicator(this.frm.doc); + if (indicator) { + this.set_indicator(indicator[0], indicator[1]); + } + } + set_indicator(label, color) { + this.clear_indicator().removeClass("hide").html(`${label}`).addClass(color); + } + + clear_indicator() { + return this.indicator.addClass("indicator-pill no-indicator-dot whitespace-nowrap hide"); + } + setup_keyboard_shortcuts() { // add assignment shortcut let assignment_link = this.sidebar.find(".add-assignment"); diff --git a/frappe/public/js/frappe/form/tab.js b/frappe/public/js/frappe/form/tab.js index f8bc2368ed..9c7422ca05 100644 --- a/frappe/public/js/frappe/form/tab.js +++ b/frappe/public/js/frappe/form/tab.js @@ -1,3 +1,8 @@ +const ICON_MAP = { + "More Info": "info", + Dashboard: "layout-dashboard", + Details: "notepad-text", +}; export default class Tab { constructor(layout, df, frm, tab_link_container, tabs_content) { this.layout = layout; @@ -29,6 +34,7 @@ export default class Tab { type="button" role="tab" aria-controls="${id}"> + ${frappe.utils.icon(this.df.icon || ICON_MAP[this.label] || "list")} ${__(this.label, null, this.doctype)} diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html index c21a91a2fa..c2ab0fac1a 100644 --- a/frappe/public/js/frappe/form/templates/form_sidebar.html +++ b/frappe/public/js/frappe/form/templates/form_sidebar.html @@ -17,6 +17,36 @@ {% endif %} +
+
+
{%= frm.get_title() %}
+
+
+
{%= frm.doc.name %}
+ +
+
+ +
+
+
+ {%= frappe.utils.icon("user-pen")%} + {%= __("Created By") %} +
+
+ {%= frappe.avatar(frappe.session.user, "avatar-xs")%} + {%= frappe.session.user %} +
+
+
+
+ {%= frappe.utils.icon("file-pen-line")%} + {%= __("Last Modified") %} +
+
+ {%= frappe.datetime.prettyDate(cur_frm.doc.modified) %} +
+
{% if frm.meta.beta %}
@@ -45,7 +75,8 @@
- + + {%= frappe.utils.icon("user-plus") %} {%= __("Assigned To") %}
' + ) + ); + break; + } + + $assignment_html.append(this.get_assignment_row(assignment)); + count++; + } + + return $assignment_html; + } + + get_assignment_row(assignment, in_dialogue = false) { + const row = $(` +
+
+ ${frappe.avatar(assignment)} + ${frappe.user.full_name(assignment)} +
+
+
+
+ `); + + const btn_group = row.find(".btn-group"); + + if (assignment === frappe.session.user) { + btn_group.append(` + + `); + btn_group.find(".complete-btn").click(() => { + this.close_assignment(assignment).then((assignments) => { + row.remove(); + this.render(assignments); + }); + }); + + if (in_dialogue) { + const html = this.assignment_details + .filter((x) => x.owner === assignment && strip_html(x.description)) + .map((x) => x.description) + .join("
"); + if (html) { + let description = $( + "
" + ).html(html); + row.find(".assignee").append(description); + } + } + } + + if (assignment === frappe.session.user || this.frm.perm[0].write) { + btn_group.append(` + + `); + btn_group.find(".remove-btn").click(() => { + this.remove_assignment(assignment).then((assignments) => { + row.remove(); + this.render(assignments); + }); + }); + } + return row; + } + + remove_assignment(assignment) { + return frappe.xcall("frappe.desk.form.assign_to.remove", { + doctype: this.frm.doctype, + name: this.frm.docname, + assign_to: assignment, + }); + } + + close_assignment(assignment) { + return frappe.xcall("frappe.desk.form.assign_to.close", { + doctype: this.frm.doctype, + name: this.frm.docname, + assign_to: assignment, + }); + } + + render(assignments) { + this.frm && this.frm.assign_to.render(assignments); + } +}; + +frappe.ui.form.AssignmentDialog = class extends frappe.ui.form.AssignmentClass { + constructor(opts) { + super(opts); this.make(); } @@ -294,9 +401,6 @@ frappe.ui.form.AssignmentDialog = class { }); this.dialog.show(); } - render(assignments) { - this.frm && this.frm.assign_to.render(assignments); - } add_assignment(assignment) { return frappe .xcall("frappe.desk.form.assign_to.add", { @@ -309,79 +413,10 @@ frappe.ui.form.AssignmentDialog = class { this.render(assignments); }); } - remove_assignment(assignment) { - return frappe.xcall("frappe.desk.form.assign_to.remove", { - doctype: this.frm.doctype, - name: this.frm.docname, - assign_to: assignment, - }); - } - close_assignment(assignment) { - return frappe.xcall("frappe.desk.form.assign_to.close", { - doctype: this.frm.doctype, - name: this.frm.docname, - assign_to: assignment, - }); - } update_assignment(assignment) { const in_the_list = this.assignment_list.find(`[data-user="${assignment}"]`).length; if (!in_the_list) { - this.assignment_list.append(this.get_assignment_row(assignment)); + this.assignment_list.append(this.get_assignment_row(assignment, true)); } } - get_assignment_row(assignment) { - const row = $(` -
-
- ${frappe.avatar(assignment)} - ${frappe.user.full_name(assignment)} -
-
-
-
- `); - - const btn_group = row.find(".btn-group"); - - if (assignment === frappe.session.user) { - btn_group.append(` - - `); - btn_group.find(".complete-btn").click(() => { - this.close_assignment(assignment).then((assignments) => { - row.remove(); - this.render(assignments); - }); - }); - - const html = this.assignment_details - .filter((x) => x.owner === assignment && strip_html(x.description)) - .map((x) => x.description) - .join("
"); - if (html) { - $( - "
" - ) - .html(html) - .appendTo(row); - } - } - - if (assignment === frappe.session.user || this.frm.perm[0].write) { - btn_group.append(` - - `); - btn_group.find(".remove-btn").click(() => { - this.remove_assignment(assignment).then((assignments) => { - row.remove(); - this.render(assignments); - }); - }); - } - return row; - } }; diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js index 75d3907421..a7ddedfa6f 100644 --- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js +++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js @@ -109,7 +109,6 @@ frappe.ui.form.Sidebar = class { this.like_wrapper.attr("data-liked-by", this.frm.doc._liked_by); const liked = frappe.ui.is_liked(this.frm.doc); - console.log(liked, "wow", this.frm.doc); this.like_wrapper .toggleClass("not-liked", !liked) From 424222dc811dca6f1f5fa35d1a624fc5dfe3b65c Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Thu, 18 Dec 2025 14:01:52 +0530 Subject: [PATCH 11/12] fix: change url from app to desk --- frappe/public/js/frappe/form/sidebar/attachments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/form/sidebar/attachments.js b/frappe/public/js/frappe/form/sidebar/attachments.js index e9baddb7ab..8308ce46e8 100644 --- a/frappe/public/js/frappe/form/sidebar/attachments.js +++ b/frappe/public/js/frappe/form/sidebar/attachments.js @@ -147,7 +147,7 @@ frappe.ui.form.Attachments = class Attachments { }; } - const icon = ` + const icon = ` ${frappe.utils.icon(attachment.is_private ? "es-line-lock" : "es-line-unlock", "sm ml-0")} `; From fbe22accb153790242e9fc17c0fd082663906d15 Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Thu, 18 Dec 2025 17:44:27 +0530 Subject: [PATCH 12/12] feat: re-design attachment and image section --- frappe/desk/form/load.py | 2 +- frappe/public/js/frappe/dom.js | 2 +- .../js/frappe/form/sidebar/attachments.js | 87 ++++++++++++------- .../js/frappe/form/sidebar/form_sidebar.js | 1 + .../frappe/form/templates/form_sidebar.html | 4 +- frappe/public/scss/desk/form_sidebar.scss | 48 +++++++--- 6 files changed, 95 insertions(+), 49 deletions(-) diff --git a/frappe/desk/form/load.py b/frappe/desk/form/load.py index c3c85c6269..44c9ade9a8 100644 --- a/frappe/desk/form/load.py +++ b/frappe/desk/form/load.py @@ -182,7 +182,7 @@ def get_milestones(doctype, name): def get_attachments(dt, dn): return frappe.get_all( "File", - fields=["name", "file_name", "file_url", "is_private"], + fields=["name", "file_name", "file_url", "is_private", "file_type", "file_size"], filters={"attached_to_name": str(dn), "attached_to_doctype": dt}, ) diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js index f2c405e3d5..a49a6aca1e 100644 --- a/frappe/public/js/frappe/dom.js +++ b/frappe/public/js/frappe/dom.js @@ -312,8 +312,8 @@ frappe.get_data_pill = ( style = ""; if (colored) { color = frappe.get_palette(label); + style = `background-color: var(${color[0]}); color: var(${color[1]})`; } - style = `background-color: var(${color[0]}); color: var(${color[1]})`; let data_pill_wrapper = $(` + `); + + $delete_attachment.on("click", () => { + me.delete_attachment(fileid); + }); + + $attachment_action.append($delete_attachment); } - const icon = ` - ${frappe.utils.icon(attachment.is_private ? "es-line-lock" : "es-line-unlock", "sm ml-0")} - `; + const $attachment_meta = $(` +
+ + ${frappe.utils.icon(attachment.is_private ? "es-line-lock" : "es-line-unlock", "sm ml-0")} + + ${attachment.file_type} + + ${frappe.form.formatters.FileSize(attachment.file_size)} + +
+ `); - $(`
`) - .append(frappe.get_data_pill(file_label, fileid, remove_action, icon)) - .insertAfter(this.add_attachment_wrapper); + // Final row + let $row = $('
'); + $row.append($attachment_action); + $row.append($attachment_meta); + + $row.insertAfter(this.add_attachment_wrapper); + } + + delete_attachment(target_id) { + let me = this; + frappe.confirm(__("Are you sure you want to delete the attachment?"), function () { + let target_attachment = me + .get_attachments() + .find((attachment) => attachment.name === target_id); + let to_be_removed = me + .get_attachments() + .filter((attachment) => attachment.file_name === target_attachment.file_name); + to_be_removed.forEach((attachment) => me.remove_attachment(attachment.name)); + }); } can_delete_attachment() { diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js index a7ddedfa6f..18ea6e490b 100644 --- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js +++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js @@ -16,6 +16,7 @@ frappe.ui.form.Sidebar = class { doctype: this.frm.doctype, frm: this.frm, can_write: frappe.model.can_write(this.frm.doctype, this.frm.docname), + image_field: this.frm.meta.image_field ?? false, }); this.sidebar = $('') diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html index 27af579862..638fdf51d5 100644 --- a/frappe/public/js/frappe/form/templates/form_sidebar.html +++ b/frappe/public/js/frappe/form/templates/form_sidebar.html @@ -27,11 +27,11 @@
-
+
{%= frm.get_title() %} {%= frappe.utils.icon("copy")%}
-
+
{%= frm.doc.name %}
diff --git a/frappe/public/scss/desk/form_sidebar.scss b/frappe/public/scss/desk/form_sidebar.scss index b49dacb261..8b9422e316 100644 --- a/frappe/public/scss/desk/form_sidebar.scss +++ b/frappe/public/scss/desk/form_sidebar.scss @@ -81,6 +81,7 @@ position: relative; width: fit-content; height: fit-content; + margin: 0 auto; } .sidebar-image, @@ -293,19 +294,42 @@ body[data-route^="Form"] { } } .attachment-row { - .data-pill { - background-color: unset; - box-shadow: none; - padding-left: 0px !important; - - .attachment-file-label { - max-width: 150px; - display: block; - margin-left: var(--margin-xs); - text-align: left; + margin: var(--margin-sm) 0; + padding: var(--padding-sm); + .attachment-file-label { + max-width: 150px; + margin-left: var(--margin-xs); + text-align: left; + } + .attachment-icon { + line-height: 0; + } + .file-type, + .file-size { + color: var(--text-light); + } + .attachment-remove-btn { + display: none; + } + .file-type { + position: relative; + margin-right: 6px; + &::after { + content: "."; + width: 5px; + height: 2px; + display: inline-block; + position: absolute; + bottom: 32px; + font-size: 25px; + right: -7px; } - .attachment-icon { - line-height: 0; + } + &:hover { + background-color: var(--subtle-fg); + border-radius: var(--border-radius-sm); + .attachment-remove-btn { + display: block; } } }