* [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer @ 2024-04-22 7:43 Dominik Csapak 2024-04-22 7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak 2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht 0 siblings, 2 replies; 3+ messages in thread From: Dominik Csapak @ 2024-04-22 7:43 UTC (permalink / raw) To: 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 <d.csapak@proxmox.com> --- 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 ^ permalink raw reply [flat|nested] 3+ messages in thread
* [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options 2024-04-22 7:43 [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Dominik Csapak @ 2024-04-22 7:43 ` Dominik Csapak 2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht 1 sibling, 0 replies; 3+ messages in thread From: Dominik Csapak @ 2024-04-22 7:43 UTC (permalink / raw) To: pve-devel where we generally want to show a field on the left, but a description on the right. merges the column1/2/B into just items. Signed-off-by: Dominik Csapak <d.csapak@proxmox.com> --- www/manager6/panel/BackupAdvancedOptions.js | 45 ++++++--------------- 1 file changed, 13 insertions(+), 32 deletions(-) diff --git a/www/manager6/panel/BackupAdvancedOptions.js b/www/manager6/panel/BackupAdvancedOptions.js index 0ea585a8..59c785d2 100644 --- a/www/manager6/panel/BackupAdvancedOptions.js +++ b/www/manager6/panel/BackupAdvancedOptions.js @@ -66,9 +66,11 @@ Ext.define('PVE.panel.BackupAdvancedOptions', { } }, - column1: [ + items: [ { - xtype: 'pveBandwidthField', + xtype: 'pveDescriptionFieldContainer', + description: gettext('Limit I/O bandwidth.'), + fieldType: 'pveBandwidthField', name: 'bwlimit', fieldLabel: gettext('Bandwidth Limit'), emptyText: Ext.String.format(gettext('Fallback (default {0})'), 0), @@ -81,7 +83,9 @@ Ext.define('PVE.panel.BackupAdvancedOptions', { }, }, { - xtype: 'proxmoxintegerfield', + xtype: 'pveDescriptionFieldContainer', + fieldType: 'proxmoxintegerfield', + description: gettext('Threads used for zstd compression (non-PBS).'), name: 'zstd', reference: 'zstdThreadCount', fieldLabel: Ext.String.format(gettext('{0} Threads'), 'Zstd'), @@ -97,7 +101,9 @@ Ext.define('PVE.panel.BackupAdvancedOptions', { }, }, { - xtype: 'proxmoxintegerfield', + xtype: 'pveDescriptionFieldContainer', + fieldType: 'proxmoxintegerfield', + description: gettext('I/O workers in the QEMU process (VMs only).'), name: 'max-workers', minValue: 1, maxValue: 256, @@ -123,7 +129,9 @@ Ext.define('PVE.panel.BackupAdvancedOptions', { }, }, { - xtype: 'proxmoxcheckbox', + xtype: 'pveDescriptionFieldContainer', + fieldType: 'proxmoxcheckbox', + description: gettext("Run jobs as soon as possible if they couldn't start on schedule, for example, due to the node being offline."), fieldLabel: gettext('Repeat missed'), name: 'repeat-missed', uncheckedValue: 0, @@ -132,33 +140,6 @@ Ext.define('PVE.panel.BackupAdvancedOptions', { deleteDefaultValue: '{!isCreate}', }, }, - ], - - column2: [ - { - xtype: 'displayfield', - value: gettext('Limit I/O bandwidth.'), - }, - { - xtype: 'displayfield', - value: gettext('Threads used for zstd compression (non-PBS).'), - }, - { - xtype: 'displayfield', - value: gettext('I/O workers in the QEMU process (VMs only).'), - }, - { - xtype: 'displayfield', - value: 'TODO', - hidden: true, // see definition of pbs-entries-max field - }, - { - xtype: 'displayfield', - value: gettext("Run jobs as soon as possible if they couldn't start on schedule, for example, due to the node being offline."), - }, - ], - - columnB: [ { xtype: 'component', padding: '5 1', -- 2.39.2 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel ^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer 2024-04-22 7:43 [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Dominik Csapak 2024-04-22 7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak @ 2024-04-22 10:17 ` Thomas Lamprecht 1 sibling, 0 replies; 3+ messages in thread From: Thomas Lamprecht @ 2024-04-22 10:17 UTC (permalink / raw) To: Proxmox VE development discussion, Dominik Csapak Am 22/04/2024 um 09:43 schrieb Dominik Csapak: > 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 <d.csapak@proxmox.com> > --- > 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 > just for the record, the more generic solution is the one that got in, making this series obsolete: https://git.proxmox.com/?p=pve-manager.git;a=commit;h=9540e48c0fae5356c3eebabf30f2a708d8d7c939 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel ^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2024-04-22 10:17 UTC | newest] Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 2024-04-22 7:43 [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Dominik Csapak 2024-04-22 7:43 ` [pve-devel] [PATCH manager 2/2] ui: use pveDescriptionFieldContainer for the advanced backup options Dominik Csapak 2024-04-22 10:17 ` [pve-devel] [PATCH manager 1/2] ui: form: add DescriptionFieldContainer Thomas Lamprecht
This is a public inbox, see mirroring instructions for how to clone and mirror all data and code used for this inbox