From fbe22accb153790242e9fc17c0fd082663906d15 Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Thu, 18 Dec 2025 17:44:27 +0530 Subject: [PATCH] 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; } } }