Merge pull request #29100 from sokumon/treeview-ux

fix: Treeview ux cleanup

frappe/public/js/frappe/ui/page.html

@@ -1,6 +1,6 @@
 <div class="page-head flex">
 	<div class="container">
-		<div class="row flex align-center page-head-content justify-between">
+		<div class="row flex-nowrap align-center page-head-content justify-between">
 			<div class="col-md-4 col-sm-6 col-xs-7 page-title">
 				<!-- <div class="title-image hide hidden-md hidden-lg"></div> -->
 				<!-- title -->
@@ -33,6 +33,7 @@
 			</div>
 			<div class="flex col page-actions justify-content-end">
 				<!-- buttons -->
+				<div class="filters flex"></div>
 				<div class="custom-actions hide hidden-xs hidden-md"></div>
 				<div class="standard-actions flex">
 					<span class="page-icon-group hide hidden-xs hidden-sm"></span>

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");
@@ -592,7 +593,7 @@ frappe.ui.Page = class Page {
 		return $('<li class="dropdown-divider"></li>').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)}"]`
 		);
@@ -603,7 +604,7 @@ frappe.ui.Page = class Page {
 						${label}
 						${frappe.utils.icon("select", "xs")}
 					</button>
-					<div role="menu" class="dropdown-menu"></div>
+					<div role="menu" class="dropdown-menu ${align_right ? "dropdown-menu-right" : ""}"></div>
 				</div>`
 			).appendTo(this.inner_toolbar);
 		}
@@ -636,7 +637,10 @@ frappe.ui.Page = class Page {
 			});
 		}
 	}
-
+	add_divider_to_button_group(group) {
+		var $group = this.get_or_add_inner_group_button(group);
+		$('<li class="dropdown-divider"></li>').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
@@ -646,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);
@@ -663,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)) {
@@ -887,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") {
@@ -911,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();
 	}

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;
@@ -61,7 +60,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();
 		}
@@ -108,24 +106,38 @@ frappe.views.TreeView = class TreeView {
 		}
 
 		if (frappe.meta.has_field(me.doctype, "disabled")) {
-			$(
-				"<div class='checkbox'><label><input type='checkbox'> Include Disabled </label></div>"
-			).appendTo(this.page.inner_toolbar);
-			this.page.inner_toolbar
-				.addClass("flex align-center")
-				.on("click", "input[type='checkbox']", function () {
-					me.rebuild_tree();
-				});
+			this.page.add_inner_button(
+				__("Include Disabled"),
+				function () {
+					me.toggle_disable(event.target);
+					me.make_tree();
+				},
+				__("Expand"),
+				"default",
+				true
+			);
 		}
 
 		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"),
+				"default",
+				true
+			);
 
-			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"),
+				"default",
+				true
+			);
 		}
 
 		if (this.opts.view_template) {
@@ -166,7 +178,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");
@@ -175,7 +191,6 @@ frappe.views.TreeView = class TreeView {
 	}
 	get_root() {
 		var me = this;
-
 		frappe.call({
 			method: me.get_tree_nodes,
 			args: me.args,
@@ -188,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();
 
@@ -197,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,
@@ -227,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: {

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