From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer
Date: Mon, 22 Apr 2024 10:16:45 +0200 [thread overview]
Message-ID: <20240422081646.838784-1-d.csapak@proxmox.com> (raw)
this is a container, showing a widget on the left column and another one
on the right one, with a (default) flex ratio of 1:2
this is helpful when wanting fields to align vertically in an input
panel that have different height (e.g. because of text wrapping)
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* make the container more generic as a simple container that holds two
widgets, so it can be useful in more situations
www/manager6/Makefile | 1 +
www/manager6/form/TwoColumnContainer.js | 53 +++++++++++++++++++++++++
2 files changed, 54 insertions(+)
create mode 100644 www/manager6/form/TwoColumnContainer.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..36f85b30 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC= \
form/MultiFileButton.js \
form/TagFieldSet.js \
form/IsoSelector.js \
+ form/TwoColumnContainer.js \
grid/BackupView.js \
grid/FirewallAliases.js \
grid/FirewallOptions.js \
diff --git a/www/manager6/form/TwoColumnContainer.js b/www/manager6/form/TwoColumnContainer.js
new file mode 100644
index 00000000..7b5f67e7
--- /dev/null
+++ b/www/manager6/form/TwoColumnContainer.js
@@ -0,0 +1,53 @@
+// This is a container intended to show a field on the first column and one on
+// the second column. One can set a ratio for the field sizes.
+//
+// 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.TwoColumnContainer', {
+ extend: 'Ext.container.Container',
+ alias: 'widget.pveTwoColumnContainer',
+
+ layout: {
+ type: 'hbox',
+ align: 'stretch',
+ },
+
+ // the default ratio of end to start widget
+ // does not have to be an integer value
+ widgetRatio: 2,
+
+ // the config of the first widget
+ startWidget: undefined,
+
+ // the config of the second widget
+ endWidget: undefined,
+
+ // same as fields in a panel
+ padding: '0 0 5 0',
+
+ initComponent: function() {
+ let me = this;
+
+ if (!me.startWidget) {
+ throw "no start widget configured";
+ }
+
+ if (!me.endWidget) {
+ throw "no end widget configured";
+ }
+
+ Ext.apply(me, {
+ items: [
+ Ext.applyIf({ flex: 1 }, me.startWidget),
+ {
+ xtype: 'box',
+ width: 20,
+ },
+ Ext.applyIf({ flex: me.widgetRatio }, me.endWidget),
+ ],
+ });
+
+ me.callParent();
+ },
+});
--
2.39.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
next reply other threads:[~2024-04-22 8:16 UTC|newest]
Thread overview: 5+ messages / expand[flat|nested] mbox.gz Atom feed top
2024-04-22 8:16 Dominik Csapak [this message]
2024-04-22 8:16 ` [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options Dominik Csapak
2024-04-22 8:22 ` Fiona Ebner
2024-04-22 8:28 ` Fiona Ebner
2024-04-22 9:30 ` [pve-devel] applied: [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20240422081646.838784-1-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox