From 210ae482f35d6ae19a9b3288b9dfafe044ffaf50 Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 2 Jan 2025 21:06:16 +0530 Subject: [PATCH 1/8] fix(style): align page head content --- frappe/public/js/frappe/ui/page.html | 2 +- frappe/public/scss/common/flex.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html index 55083e1b9a..ca87764b3c 100644 --- a/frappe/public/js/frappe/ui/page.html +++ b/frappe/public/js/frappe/ui/page.html @@ -1,6 +1,6 @@
-
+
diff --git a/frappe/public/scss/common/flex.scss b/frappe/public/scss/common/flex.scss index 1d1917d17c..37331342b8 100644 --- a/frappe/public/scss/common/flex.scss +++ b/frappe/public/scss/common/flex.scss @@ -7,6 +7,11 @@ flex-direction: column; } +.flex-nowrap { + @extend .flex; + flex-wrap: nowrap; +} + .justify-center { justify-content: center; } From cba8be102c6c2d8c983ed6217064966c3e73c5a3 Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 2 Jan 2025 21:11:24 +0530 Subject: [PATCH 2/8] fix(style): group expand/collapse in tree view --- frappe/public/js/frappe/views/treeview.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/frappe/public/js/frappe/views/treeview.js b/frappe/public/js/frappe/views/treeview.js index 2be0ab49f3..6a963da938 100644 --- a/frappe/public/js/frappe/views/treeview.js +++ b/frappe/public/js/frappe/views/treeview.js @@ -119,13 +119,21 @@ frappe.views.TreeView = class TreeView { } if (this.opts.show_expand_all) { - this.page.add_inner_button(__("Collapse All"), function () { - me.tree.load_children(me.tree.root_node, false); - }); + this.page.add_inner_button( + __("Collapse All"), + function () { + me.tree.load_children(me.tree.root_node, false); + }, + __("Expand") + ); - this.page.add_inner_button(__("Expand All"), function () { - me.tree.load_children(me.tree.root_node, true); - }); + this.page.add_inner_button( + __("Expand All"), + function () { + me.tree.load_children(me.tree.root_node, true); + }, + __("Expand") + ); } if (this.opts.view_template) { From 20bde77953679b16e31aa5f030ca7a39dbf4b155 Mon Sep 17 00:00:00 2001 From: sokumon Date: Fri, 3 Jan 2025 19:07:51 +0530 Subject: [PATCH 3/8] fix: include disabled checkbox in expand button group --- frappe/public/js/frappe/views/treeview.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/frappe/public/js/frappe/views/treeview.js b/frappe/public/js/frappe/views/treeview.js index 6a963da938..aa5e0e587e 100644 --- a/frappe/public/js/frappe/views/treeview.js +++ b/frappe/public/js/frappe/views/treeview.js @@ -108,14 +108,13 @@ frappe.views.TreeView = class TreeView { } if (frappe.meta.has_field(me.doctype, "disabled")) { - $( - "
" - ).appendTo(this.page.inner_toolbar); - this.page.inner_toolbar - .addClass("flex align-center") - .on("click", "input[type='checkbox']", function () { + this.page.add_inner_button( + __("Include Disabled"), + function () { me.rebuild_tree(); - }); + }, + __("Expand") + ); } if (this.opts.show_expand_all) { From 1ea299b8dfa044cd02dc41975816f72e75eb6ee6 Mon Sep 17 00:00:00 2001 From: sokumon Date: Fri, 3 Jan 2025 19:10:14 +0530 Subject: [PATCH 4/8] feat: add divider to button group --- frappe/public/js/frappe/ui/page.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 8c53111bbd..0b9795f521 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -636,7 +636,10 @@ frappe.ui.Page = class Page { }); } } - + add_divider_to_button_group(group) { + var $group = this.get_or_add_inner_group_button(group); + $('
  • ').appendTo($group.find(".dropdown-menu")); + } /* * Add button to button group. If there exists another button with the same label, * `add_inner_button` will not add the new button to the button group even if the callback From 3d479538471aa2eba839a2b202c8e8ac98e3e429 Mon Sep 17 00:00:00 2001 From: sokumon Date: Tue, 7 Jan 2025 19:43:41 +0530 Subject: [PATCH 5/8] feat: add treeview filter on the toolbar/page head --- frappe/public/js/frappe/ui/page.html | 1 + frappe/public/js/frappe/ui/page.js | 10 ++++++++++ frappe/public/js/frappe/views/treeview.js | 6 +++++- 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html index ca87764b3c..2b3b8e13ee 100644 --- a/frappe/public/js/frappe/ui/page.html +++ b/frappe/public/js/frappe/ui/page.html @@ -33,6 +33,7 @@
    +
    diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 0b9795f521..3657807f48 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -135,6 +135,7 @@ frappe.ui.Page = class Page { this.indicator = this.wrapper.find(".indicator-pill"); this.page_actions = this.wrapper.find(".page-actions"); + this.filters = this.wrapper.find(".filters"); this.btn_primary = this.page_actions.find(".primary-action"); this.btn_secondary = this.page_actions.find(".btn-secondary"); @@ -890,6 +891,9 @@ frappe.ui.Page = class Page { delay: { show: 600, hide: 100 }, trigger: "hover", }); + if (parent == this.filters) { + this.restyle_field(f); + } // html fields in toolbar are only for display if (df.fieldtype == "HTML") { @@ -914,6 +918,12 @@ frappe.ui.Page = class Page { this.fields_dict[df.fieldname || df.label] = f; return f; } + restyle_field(f) { + $(f.wrapper).removeClass("col-md-2").css("margin", "0px"); + + $(f.wrapper).find("select").css("width", "140px"); + $(f.wrapper).find(".select-icon").css("top", "2px"); + } clear_fields() { this.page_form.empty(); } diff --git a/frappe/public/js/frappe/views/treeview.js b/frappe/public/js/frappe/views/treeview.js index aa5e0e587e..47d25a8c26 100644 --- a/frappe/public/js/frappe/views/treeview.js +++ b/frappe/public/js/frappe/views/treeview.js @@ -173,7 +173,11 @@ frappe.views.TreeView = class TreeView { }; } - me.page.add_field(filter); + if (filter.render_on_toolbar) { + me.page.add_field(filter, me.page.filters); + } else { + me.page.add_field(filter); + } if (filter.default) { $("[data-fieldname='" + filter.fieldname + "']").trigger("change"); From 6749aef6ba598230cdecbd1d91a3da18e23e656b Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 9 Jan 2025 16:14:07 +0530 Subject: [PATCH 6/8] fix: dropdowns open to right --- frappe/public/js/frappe/ui/page.js | 8 ++++---- frappe/public/js/frappe/views/treeview.js | 14 +++++++++----- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 3657807f48..e2ac9f7963 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -593,7 +593,7 @@ frappe.ui.Page = class Page { return $('
  • ').appendTo(this.menu); } - get_or_add_inner_group_button(label) { + get_or_add_inner_group_button(label, align_right) { var $group = this.inner_toolbar.find( `.inner-group-button[data-label="${encodeURIComponent(label)}"]` ); @@ -604,7 +604,7 @@ frappe.ui.Page = class Page { ${label} ${frappe.utils.icon("select", "xs")} - +
    ` ).appendTo(this.inner_toolbar); } @@ -650,7 +650,7 @@ frappe.ui.Page = class Page { * @param {object} action - function to be called when button is clicked * @param {string} group - Label of the group button */ - add_inner_button(label, action, group, type = "default") { + add_inner_button(label, action, group, type = "default", align_right = false) { var me = this; let _action = function () { let btn = $(this); @@ -667,7 +667,7 @@ frappe.ui.Page = class Page { } if (group) { - var $group = this.get_or_add_inner_group_button(group); + var $group = this.get_or_add_inner_group_button(group, align_right); $(this.inner_toolbar).removeClass("hide"); if (!this.is_in_group_button_dropdown($group.find(".dropdown-menu"), "a", label)) { diff --git a/frappe/public/js/frappe/views/treeview.js b/frappe/public/js/frappe/views/treeview.js index 47d25a8c26..84286caccb 100644 --- a/frappe/public/js/frappe/views/treeview.js +++ b/frappe/public/js/frappe/views/treeview.js @@ -61,7 +61,6 @@ frappe.views.TreeView = class TreeView { this.make_page(); this.make_filters(); this.root_value = null; - if (me.opts.get_tree_root) { this.get_root(); } @@ -113,7 +112,9 @@ frappe.views.TreeView = class TreeView { function () { me.rebuild_tree(); }, - __("Expand") + __("Expand"), + "default", + true ); } @@ -123,7 +124,9 @@ frappe.views.TreeView = class TreeView { function () { me.tree.load_children(me.tree.root_node, false); }, - __("Expand") + __("Expand"), + "default", + true ); this.page.add_inner_button( @@ -131,7 +134,9 @@ frappe.views.TreeView = class TreeView { function () { me.tree.load_children(me.tree.root_node, true); }, - __("Expand") + __("Expand"), + "default", + true ); } @@ -186,7 +191,6 @@ frappe.views.TreeView = class TreeView { } get_root() { var me = this; - frappe.call({ method: me.get_tree_nodes, args: me.args, From 446a8ad1009028deebf0cb92c957faf6cc87387d Mon Sep 17 00:00:00 2001 From: sokumon Date: Thu, 9 Jan 2025 16:14:45 +0530 Subject: [PATCH 7/8] fix: flex added to filters --- frappe/public/js/frappe/ui/page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html index 2b3b8e13ee..fc98f8d33e 100644 --- a/frappe/public/js/frappe/ui/page.html +++ b/frappe/public/js/frappe/ui/page.html @@ -33,7 +33,7 @@
    -
    +
    From 5a80b79be9cea021f146f1f62522dc1e96b097c5 Mon Sep 17 00:00:00 2001 From: sokumon Date: Fri, 10 Jan 2025 15:16:18 +0530 Subject: [PATCH 8/8] fix: include/exclude labels added for better ux --- frappe/public/js/frappe/views/treeview.js | 25 ++++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/frappe/public/js/frappe/views/treeview.js b/frappe/public/js/frappe/views/treeview.js index 84286caccb..b98f6557bd 100644 --- a/frappe/public/js/frappe/views/treeview.js +++ b/frappe/public/js/frappe/views/treeview.js @@ -1,6 +1,5 @@ // Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors // MIT License. See license.txt - frappe.provide("frappe.treeview_settings"); frappe.provide("frappe.views.trees"); window.cur_tree = null; @@ -110,7 +109,8 @@ frappe.views.TreeView = class TreeView { this.page.add_inner_button( __("Include Disabled"), function () { - me.rebuild_tree(); + me.toggle_disable(event.target); + me.make_tree(); }, __("Expand"), "default", @@ -203,6 +203,16 @@ frappe.views.TreeView = class TreeView { }, }); } + toggle_disable(el) { + if (this.args["include_disabled"]) { + this.args["include_disabled"] = false; + el.innerText = el.innerText.replace("Exclude", "Include"); + } else { + this.args["include_disabled"] = true; + console.log(el); + el.innerText = el.innerText.replace("Include", "Exclude"); + } + } make_tree() { $(this.parent).find(".tree").remove(); @@ -212,12 +222,6 @@ frappe.views.TreeView = class TreeView { use_value = use_label; } - if (this.page?.inner_toolbar) { - this.args["include_disabled"] = this.page.inner_toolbar - .find("input[type='checkbox']") - .prop("checked"); - } - this.tree = new frappe.ui.Tree({ parent: this.body, label: use_label, @@ -242,10 +246,11 @@ frappe.views.TreeView = class TreeView { cur_tree.view_name = "Tree"; this.post_render(); } - + toggle_label() { + console.log("hello"); + } rebuild_tree() { let me = this; - frappe.call({ method: "frappe.utils.nestedset.rebuild_tree", args: {