[pve-devel] [PATCH manager v3] ui: resource tree: add collapse/expand all button

[Dominik Csapak <d.csapak@proxmox.com>]

adds two buttons to the tree: expand all and collapse all

stack them above each other. This makes it necesary to reduce the
font-size so the whole icon is visible.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v2:
* stack the buttons
* add css classes to make the icons so small that they're visible

@Thomas

well, it works, but IMHO the icons are too small, but i let you be the
judge of that.

if you'd like a combination of the 3 attempts so far (e.g. two buttons
with the different icons), just let me know so i can prepare a final v4

 www/css/ext6-pve.css              |  5 +++++
 www/manager6/Workspace.js         | 37 +++++++++++++++++++++++++++++++
 www/manager6/tree/ResourceTree.js | 12 ++++++++++
 3 files changed, 54 insertions(+)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 975291f6..317c6e40 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -764,3 +764,8 @@ table.osds td:first-of-type {
 .pmx-column-wrapped > div {
     white-space: pre-wrap;
 }
+
+.pmx-half-button-icon {
+    font-size:12px ! important;
+    height: 100%;
+}
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 922e01df..3135d82e 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -470,6 +470,43 @@ Ext.define('PVE.StdWorkspace', {
 			    padding: '0 0 5 0',
 			    items: [
 				selview,
+				{
+				    xtype: 'container',
+				    layout: 'vbox',
+				    height: '100%',
+				    items: [
+					{
+					    flex: 1,
+					    xtype: 'button',
+					    cls: 'x-btn-default-toolbar-small',
+					    tooltip: gettext('Expand Tree'),
+					    iconCls: 'fa fa-fw fa-plus-square-o x-btn-icon-el-default-toolbar-small pmx-half-button-icon',
+					    style: {
+						'padding-top': 0,
+						'padding-bottom': 0,
+					    },
+					    handler: () => {
+						let rt = me.down('pveResourceTree');
+						rt.expandAll();
+					    },
+					},
+					{
+					    flex: 1,
+					    xtype: 'button',
+					    cls: 'x-btn-default-toolbar-small',
+					    tooltip: gettext('Collapse Tree'),
+					    iconCls: 'fa fa-fw fa-minus-square-o x-btn-icon-el-default-toolbar-small pmx-half-button-icon',
+					    style: {
+						'padding-top': 0,
+						'padding-bottom': 0,
+					    },
+					    handler: () => {
+						let rt = me.down('pveResourceTree');
+						rt.collapseAll();
+					    },
+					},
+				    ],
+				},
 				{
 				    xtype: 'button',
 				    cls: 'x-btn-default-toolbar-small',
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 8b7c2521..65ed5340 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -255,6 +255,18 @@ Ext.define('PVE.tree.ResourceTree', {
 	return changed;
     },
 
+    collapseAll: function() {
+	let me = this;
+	let root = me.store.getRootNode();
+	root.collapseChildren(true);
+    },
+
+    expandAll: function() {
+	let me = this;
+	let root = me.store.getRootNode();
+	root.expandChildren(true);
+    },
+
     initComponent: function() {
 	let me = this;
 	me.saveSortingOptions();
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel