mirror of
https://git.proxmox.com/git/proxmox-widget-toolkit
synced 2025-07-17 22:04:19 +00:00
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:
parent
0f8d38b5de
commit
20002254e6
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user