[pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer

* [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer
@ 2024-04-22  7:43 Dominik Csapak
  2024-04-22  7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak
  2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht
  0 siblings, 2 replies; 3+ messages in thread
From: Dominik Csapak @ 2024-04-22  7:43 UTC (permalink / raw)
  To: pve-devel

this is a field container, showing a field on the left column and a
description on the right one, with a (default) flex ratio of 1:2

this is helpful when wanting a longer description on the right column
but still have the fields aligned.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
alternatively, we could make a more generic '2column' container, where
we give a 'leftFieldConfig' and a 'rightFieldConfig', and just
let the user put in a displayfield on the right?

would be the more generic solution that could also work when we don't
want to have a description in the right column

 www/manager6/Makefile                         |  1 +
 .../form/DescriptionFieldContainer.js         | 69 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 www/manager6/form/DescriptionFieldContainer.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..8a2d203b 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC= 							\
 	form/MultiFileButton.js				\
 	form/TagFieldSet.js				\
 	form/IsoSelector.js				\
+	form/DescriptionFieldContainer.js		\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/DescriptionFieldContainer.js b/www/manager6/form/DescriptionFieldContainer.js
new file mode 100644
index 00000000..87e89262
--- /dev/null
+++ b/www/manager6/form/DescriptionFieldContainer.js
@@ -0,0 +1,69 @@
+// This is a field container intended to show a field on the first column and
+// it's description on the second column. One can set a ratio for description
+// size to field size.
+//
+// Works around a limitation of our input panel column1/2 handling that entries
+// are not vertically aligned when one of them has wrapping text (like it
+// happens sometimes with such longer descriptions)
+Ext.define('PVE.form.DescriptionFieldContainer', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.pveDescriptionFieldContainer',
+
+    layout: {
+	type: 'hbox',
+	align: 'stretch',
+    },
+
+    // the default ratio of description to field
+    // does not have to be an integer value
+    descriptionRatio: 2,
+
+    // the xtype of the field
+    fieldType: undefined,
+
+    // the description to show
+    description: undefined,
+
+    initComponent: function() {
+	let me = this;
+
+	if (!me.fieldType) {
+	    throw "no field type set";
+	}
+
+	if (!me.description) {
+	    throw "no description set";
+	}
+
+	let fieldConfig = {
+	    xtype: me.fieldType,
+	    bind: {},
+	    name: me.name,
+	    flex: 1,
+	    padding: '0 10 0 0',
+	};
+	Ext.applyIf(fieldConfig, me.initialConfig);
+
+	// so we won't accidentally queried by name
+	delete me.name;
+	delete me.reference;
+
+	// so we won't show it twice
+	delete me.fieldLabel;
+	delete me.autoEl;
+
+	Ext.apply(me, {
+	    items: [
+		fieldConfig,
+		{
+		    xtype: 'displayfield',
+		    value: Ext.htmlEncode(me.description),
+		    flex: me.descriptionRatio,
+		    padding: '0 0 0 10',
+		},
+	    ],
+	});
+
+	me.callParent();
+    },
+});
-- 
2.39.2



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


^ permalink raw reply	[flat|nested] 3+ messages in thread