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

Merge pull request #35890 from iamejaaz/mobile-nav-merge

Browse source 
feat(form): redesign sidebar
This commit is contained in:
Ejaaz Khan 2026-01-13 13:19:37 +05:30 • committed by GitHub
commit 67c1877e80
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 98 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frappe/public/js/frappe/form/sidebar/form_sidebar.js
View file

@ -40,11 +40,9 @@ frappe.ui.form.Sidebar = class {
this.indicator = $(this.sidebar).find(".sidebar-meta-details .indicator-pill");
this.setup_copy_event();
this.make_like();
this.setup_print();
this.setup_editable_title();
this.refresh();
// setup editable title
let form_sidebar_text = $(this.sidebar).find(".sidebar-meta-details .form-title-text");
this.toolbar.setup_editable_title(form_sidebar_text);
}
setup_keyboard_shortcuts() {
@ -81,6 +79,39 @@ frappe.ui.form.Sidebar = class {
});
}
setup_editable_title() {
// setup editable title
let form_sidebar_text = $(this.sidebar).find(".form-stats-likes .form-title-text");
this.toolbar.setup_editable_title(form_sidebar_text);
}
setup_print() {
const print_settings = frappe.model.get_doc(":Print Settings", "Print Settings");
const allow_print_for_draft = cint(print_settings.allow_print_for_draft);
const allow_print_for_cancelled = cint(print_settings.allow_print_for_cancelled);
if (
!frappe.model.is_submittable(this.frm.doc.doctype) ||
this.frm.doc.docstatus == 1 ||
(allow_print_for_cancelled && this.frm.doc.docstatus == 2) ||
(allow_print_for_draft && this.frm.doc.docstatus == 0)
) {
if (frappe.model.can_print(null, this.frm) && !this.frm.meta.issingle) {
let print_icon = this.page.add_action_icon(
"printer",
() => {
this.frm.print_doc();
},
"",
__("Print")
);
print_icon.css("background-color", "transparent");
print_icon.addClass("p-0");
this.sidebar.find(".form-print").append(print_icon);
}
}
}
make_like() {
this.like_wrapper = this.sidebar.find(".liked-by");
this.like_icon = this.sidebar.find(".liked-by .like-icon");

40
frappe/public/js/frappe/form/templates/form_sidebar.html
View file

@ -17,7 +17,10 @@
</div>
{% endif %}
</div>
<div class="form-stats-likes">
{% if image_field %}
<div class="align-items-baseline flex form-stats-likes">
<div class="form-title-text"></div>
<div class="form-print"></div>
<span class="liked-by like-action d-flex align-items-center">
<svg class="icon icon-sm like-icon pointer">
<use href="#icon-heart"></use>
@ -25,14 +28,29 @@
<span class="like-count ml-2"></span>
</span>
</div>
{% endif %}
</div>
<div class="sidebar-section sidebar-meta-details border-bottom">
<div class="form-details flex justify-between">
<span class="bold ellipsis form-title-text mr-3 pointer text-medium" title="{{__("Click to edit")}}">{%= frappe.utils.html2text(frm.get_title()) %}</span>
<div class="sidebar-section sidebar-meta-details border-bottom flex justify-between">
<div>
{% if frm.doc.name != frm.get_title() %}
<div class="form-details flex justify-between">
<span class="bold ellipsis form-title-text mr-3 pointer text-medium" title="{{__("Click to edit")}}">{%= frappe.utils.html2text(frm.get_title()) %}</span>
</div>
{% endif %}
<div class="form-name-container mt-2 flex justify-between form-name-copy" data-copy="{{frm.doc.name}}" >
<span class="ellipsis mr-3">{%= frm.doc.name %}</span>
</div>
</div>
{% if frm.doc.name != frm.get_title() %}
<div class="form-name-container mt-2 flex justify-between form-name-copy" data-copy="{{frm.doc.name}}" >
<span class="ellipsis mr-3">{%= frm.doc.name %}</span>
{% if not image_field %}
<div class="align-items-baseline flex form-stats-likes">
<div class="form-title-text"></div>
<div class="form-print"></div>
<span class="liked-by like-action d-flex align-items-center">
<svg class="icon icon-sm like-icon pointer">
<use href="#icon-heart"></use>
</svg>
<span class="like-count ml-2"></span>
</span>
</div>
{% endif %}
</div>
@ -60,7 +78,7 @@
</div>
{% } %}
</div>
<div class="sidebar-section form-assignments border-bottom">
<div class="sidebar-section form-assignments">
<div>
<span class="form-sidebar-items">
<span class="add-assignment-label form-sidebar-label">
@ -74,7 +92,7 @@
<div class="assignments"></div>
</div>
</div>
<div class="sidebar-section form-attachments border-bottom">
<div class="sidebar-section form-attachments">
<div class="attachments-actions">
<span class="form-sidebar-items">
<span>
@ -94,7 +112,7 @@
</span>
</a>
</div>
<div class="sidebar-section form-tags border-bottom">
<div class="sidebar-section form-tags">
<div>
<span class="form-sidebar-items">
<div class="form-sidebar-label">
@ -104,7 +122,7 @@
</span>
</div>
</div>
<div class="sidebar-section form-shared">
<div class="sidebar-section form-shared border-bottom">
<div>
<span class="form-sidebar-items">
<span class="share-label form-sidebar-label">

53
frappe/public/js/frappe/form/toolbar.js
View file

@ -200,17 +200,27 @@ frappe.ui.form.Toolbar = class Toolbar {
}
});
}
setup_editable_title(element) {
let me = this;
if (me.is_title_editable()) {
$(element).tooltip({
delay: { show: 100, hide: 100 },
trigger: "hover",
});
$(element).addClass("pointer");
let edit_icon = this.page.add_action_icon(
"square-pen",
() => {
me.setup_editable_title_click_event(element);
},
"",
__("Edit")
);
edit_icon.css("background-color", "transparent");
edit_icon.addClass("p-0");
element.append(edit_icon);
}
}
setup_editable_title_click_event(element) {
let me = this;
element.on("click", () => {
let fields = [];
let docname = me.frm.doc.name;
@ -292,6 +302,7 @@ frappe.ui.form.Toolbar = class Toolbar {
}
});
}
get_dropdown_menu(label) {
return this.page.add_dropdown(label);
}
@ -351,7 +362,6 @@ frappe.ui.form.Toolbar = class Toolbar {
make_menu_items() {
// Print
this.add_discard();
this.add_print();
this.add_open_sidebar();
this.add_email();
this.add_rename();
@ -388,37 +398,6 @@ frappe.ui.form.Toolbar = class Toolbar {
}
}
add_print() {
const print_settings = frappe.model.get_doc(":Print Settings", "Print Settings");
const allow_print_for_draft = cint(print_settings.allow_print_for_draft);
const allow_print_for_cancelled = cint(print_settings.allow_print_for_cancelled);
if (
!frappe.model.is_submittable(this.frm.doc.doctype) ||
this.frm.doc.docstatus == 1 ||
(allow_print_for_cancelled && this.frm.doc.docstatus == 2) ||
(allow_print_for_draft && this.frm.doc.docstatus == 0)
) {
if (frappe.model.can_print(null, this.frm) && !this.frm.meta.issingle) {
this.page.add_menu_item(
__("Print"),
() => {
this.frm.print_doc();
},
true
);
this.print_icon = this.page.add_action_icon(
"printer",
() => {
this.frm.print_doc();
},
"",
__("Print")
);
}
}
}
add_email() {
// email
if (frappe.model.can_email(null, this.frm) && this.frm.doc.docstatus < 2) {

20
frappe/public/scss/desk/form_sidebar.scss
View file

@ -8,7 +8,10 @@
// form sidebar
.form-sidebar {
.sidebar-section {
padding: var(--padding-md);
padding: var(--padding-md) var(--padding-md) 0;
&.border-bottom {
padding-bottom: var(--padding-md);
}
.form-sidebar-items {
display: flex;
width: 100%;
@ -88,7 +91,7 @@
transition: opacity 0.3s;
width: var(--form-sidebar-image-width);
height: var(--form-sidebar-image-width);
border-radius: var(--border-radius-lg);
border-radius: var(--border-radius-full);
}
.sidebar-image-wrapper:hover {
@ -126,6 +129,19 @@
.sidebar-meta-details {
.form-name-copy {
cursor: copy;
font-size: 14px;
}
}
.form-stats-likes {
gap: 8px;
.form-print {
button:hover {
background: var(--btn-default-hover-bg);
}
svg {
margin: 0px;
}
}
}
}