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 B599C1FF168 for ; Tue, 12 Nov 2024 15:42:16 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 5617E2C998; Tue, 12 Nov 2024 15:42:01 +0100 (CET) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Tue, 12 Nov 2024 15:41:52 +0100 Message-Id: <20241112144156.3192720-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.39.5 In-Reply-To: <20241112144156.3192720-1-d.csapak@proxmox.com> References: <20241112144156.3192720-1-d.csapak@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.014 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 RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. 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 widget-toolkit 1/5] webhook edit: improve layout and component hierarchy 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" * instead of manually setting margin/paddings and the fieldLabel, just use a FieldContainer instead of Container. That implements the Ext.form.Labelable mixin, which correctly positions the label. This also has the effect that the labels are now styled correctly. * modify the margins to get a consistent spacing between fields * reverse the order of grid/button, to be consistent with our other grids with this input pattern * make the label of the textarea a proper fieldLabel with a FieldContainer, which gets rid of the ':' in the gettext and styles the label correctly. Signed-off-by: Dominik Csapak --- src/panel/WebhookEditPanel.js | 46 ++++++++++++----------------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js index 0a39f3c..b440d7f 100644 --- a/src/panel/WebhookEditPanel.js +++ b/src/panel/WebhookEditPanel.js @@ -36,15 +36,12 @@ Ext.define('Proxmox.panel.WebhookEditPanel', { columnB: [ { + xtype: 'fieldcontainer', + fieldLabel: gettext('Method/URL'), layout: 'hbox', border: false, margin: '0 0 5 0', items: [ - { - xtype: 'displayfield', - value: gettext('Method/URL:'), - width: 125, - }, { xtype: 'proxmoxKVComboBox', name: 'method', @@ -77,6 +74,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', { cbind: { isCreate: '{isCreate}', }, + margin: '0 0 10 0', }, { xtype: 'textarea', @@ -87,7 +85,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', { fieldStyle: { 'font-family': 'monospace', }, - margin: '15 0 0 0', + margin: '0 0 5 0', }, { xtype: 'pmxWebhookKeyValueList', @@ -97,6 +95,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', { cbind: { isCreate: '{isCreate}', }, + margin: '0 0 10 0', }, { xtype: 'proxmoxtextfield', @@ -159,7 +158,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', { }); Ext.define('Proxmox.form.WebhookKeyValueList', { - extend: 'Ext.container.Container', + extend: 'Ext.form.FieldContainer', alias: 'widget.pmxWebhookKeyValueList', mixins: [ @@ -319,33 +318,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', { }, }, - margin: '10 0 5 0', - items: [ - { - layout: 'hbox', - border: false, - items: [ - { - xtype: 'displayfield', - width: 125, - }, - { - xtype: 'button', - text: gettext('Add'), - iconCls: 'fa fa-plus-circle', - handler: 'addLine', - margin: '0 5 5 0', - }, - ], - }, { xtype: 'grid', reference: 'grid', minHeight: 100, maxHeight: 100, scrollable: 'vertical', - margin: '0 0 0 125', viewConfig: { deferEmptyText: false, @@ -358,6 +337,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', { }, }, }, + margin: '5 0 5 0', + }, + { + xtype: 'button', + text: gettext('Add'), + iconCls: 'fa fa-plus-circle', + handler: 'addLine', }, ], @@ -365,12 +351,10 @@ Ext.define('Proxmox.form.WebhookKeyValueList', { let me = this; for (const [key, value] of Object.entries(me.gridConfig ?? {})) { - me.items[1][key] = value; + me.items[0][key] = value; } - me.items[0].items[0].value = me.fieldLabel + ':'; - - me.items[1].columns = [ + me.items[0].columns = [ { header: me.fieldTtitle, dataIndex: 'headerName', -- 2.39.5 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel