From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 0C9931FF56B for ; Mon, 22 Apr 2024 09:43:14 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id EDB019493; Mon, 22 Apr 2024 09:43:09 +0200 (CEST) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Mon, 22 Apr 2024 09:43:05 +0200 Message-Id: <20240422074306.595774-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.39.2 MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.015 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox VE development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pve-devel-bounces@lists.proxmox.com Sender: "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 --- 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