webhook edit: improve layout and component hierarchy

* 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 <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak 2024-11-12 15:41:52 +01:00 committed by Thomas Lamprecht
parent 0f8d38b5de
commit 20002254e6

View File

@ -36,15 +36,12 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
columnB: [ columnB: [
{ {
xtype: 'fieldcontainer',
fieldLabel: gettext('Method/URL'),
layout: 'hbox', layout: 'hbox',
border: false, border: false,
margin: '0 0 5 0', margin: '0 0 5 0',
items: [ items: [
{
xtype: 'displayfield',
value: gettext('Method/URL:'),
width: 125,
},
{ {
xtype: 'proxmoxKVComboBox', xtype: 'proxmoxKVComboBox',
name: 'method', name: 'method',
@ -77,6 +74,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
cbind: { cbind: {
isCreate: '{isCreate}', isCreate: '{isCreate}',
}, },
margin: '0 0 10 0',
}, },
{ {
xtype: 'textarea', xtype: 'textarea',
@ -87,7 +85,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
fieldStyle: { fieldStyle: {
'font-family': 'monospace', 'font-family': 'monospace',
}, },
margin: '15 0 0 0', margin: '0 0 5 0',
}, },
{ {
xtype: 'pmxWebhookKeyValueList', xtype: 'pmxWebhookKeyValueList',
@ -97,6 +95,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
cbind: { cbind: {
isCreate: '{isCreate}', isCreate: '{isCreate}',
}, },
margin: '0 0 10 0',
}, },
{ {
xtype: 'proxmoxtextfield', xtype: 'proxmoxtextfield',
@ -159,7 +158,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
}); });
Ext.define('Proxmox.form.WebhookKeyValueList', { Ext.define('Proxmox.form.WebhookKeyValueList', {
extend: 'Ext.container.Container', extend: 'Ext.form.FieldContainer',
alias: 'widget.pmxWebhookKeyValueList', alias: 'widget.pmxWebhookKeyValueList',
mixins: [ mixins: [
@ -319,33 +318,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
}, },
}, },
margin: '10 0 5 0',
items: [ 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', xtype: 'grid',
reference: 'grid', reference: 'grid',
minHeight: 100, minHeight: 100,
maxHeight: 100, maxHeight: 100,
scrollable: 'vertical', scrollable: 'vertical',
margin: '0 0 0 125',
viewConfig: { viewConfig: {
deferEmptyText: false, 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; let me = this;
for (const [key, value] of Object.entries(me.gridConfig ?? {})) { 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[0].columns = [
me.items[1].columns = [
{ {
header: me.fieldTtitle, header: me.fieldTtitle,
dataIndex: 'headerName', dataIndex: 'headerName',