proxmox-mirrors/proxmox-widget-toolkit
1
0
Fork 1
mirror of https://git.proxmox.com/git/proxmox-widget-toolkit synced 2025-07-17 14:54:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

webhook edit: improve layout and component hierarchy

Browse Source 
* 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
1 changed files with 15 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/panel/WebhookEditPanel.js
View File

@ -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',