* [pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer
@ 2024-04-22 8:16 Dominik Csapak
2024-04-22 8:16 ` [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options Dominik Csapak
2024-04-22 9:30 ` [pve-devel] applied: [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Thomas Lamprecht
0 siblings, 2 replies; 5+ messages in thread
From: Dominik Csapak @ 2024-04-22 8:16 UTC (permalink / raw)
To: pve-devel
this is a container, showing a widget on the left column and another one
on the right one, with a (default) flex ratio of 1:2
this is helpful when wanting fields to align vertically in an input
panel that have different height (e.g. because of text wrapping)
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* make the container more generic as a simple container that holds two
widgets, so it can be useful in more situations
www/manager6/Makefile | 1 +
www/manager6/form/TwoColumnContainer.js | 53 +++++++++++++++++++++++++
2 files changed, 54 insertions(+)
create mode 100644 www/manager6/form/TwoColumnContainer.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..36f85b30 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC= \
form/MultiFileButton.js \
form/TagFieldSet.js \
form/IsoSelector.js \
+ form/TwoColumnContainer.js \
grid/BackupView.js \
grid/FirewallAliases.js \
grid/FirewallOptions.js \
diff --git a/www/manager6/form/TwoColumnContainer.js b/www/manager6/form/TwoColumnContainer.js
new file mode 100644
index 00000000..7b5f67e7
--- /dev/null
+++ b/www/manager6/form/TwoColumnContainer.js
@@ -0,0 +1,53 @@
+// This is a container intended to show a field on the first column and one on
+// the second column. One can set a ratio for the field sizes.
+//
+// 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.TwoColumnContainer', {
+ extend: 'Ext.container.Container',
+ alias: 'widget.pveTwoColumnContainer',
+
+ layout: {
+ type: 'hbox',
+ align: 'stretch',
+ },
+
+ // the default ratio of end to start widget
+ // does not have to be an integer value
+ widgetRatio: 2,
+
+ // the config of the first widget
+ startWidget: undefined,
+
+ // the config of the second widget
+ endWidget: undefined,
+
+ // same as fields in a panel
+ padding: '0 0 5 0',
+
+ initComponent: function() {
+ let me = this;
+
+ if (!me.startWidget) {
+ throw "no start widget configured";
+ }
+
+ if (!me.endWidget) {
+ throw "no end widget configured";
+ }
+
+ Ext.apply(me, {
+ items: [
+ Ext.applyIf({ flex: 1 }, me.startWidget),
+ {
+ xtype: 'box',
+ width: 20,
+ },
+ Ext.applyIf({ flex: me.widgetRatio }, me.endWidget),
+ ],
+ });
+
+ 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] 5+ messages in thread
* [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options
2024-04-22 8:16 [pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Dominik Csapak
@ 2024-04-22 8:16 ` Dominik Csapak
2024-04-22 8:22 ` Fiona Ebner
2024-04-22 9:30 ` [pve-devel] applied: [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Thomas Lamprecht
1 sibling, 1 reply; 5+ messages in thread
From: Dominik Csapak @ 2024-04-22 8:16 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>
---
changes from v1:
* adapt to changes in 1/2
better viewed with -w, since most of the patch is just adding a level of
indent
www/manager6/panel/BackupAdvancedOptions.js | 133 ++++++++++----------
1 file changed, 67 insertions(+), 66 deletions(-)
diff --git a/www/manager6/panel/BackupAdvancedOptions.js b/www/manager6/panel/BackupAdvancedOptions.js
index 0ea585a8..38db0168 100644
--- a/www/manager6/panel/BackupAdvancedOptions.js
+++ b/www/manager6/panel/BackupAdvancedOptions.js
@@ -66,46 +66,67 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
}
},
- column1: [
+ items: [
{
- xtype: 'pveBandwidthField',
- name: 'bwlimit',
- fieldLabel: gettext('Bandwidth Limit'),
- emptyText: Ext.String.format(gettext('Fallback (default {0})'), 0),
- backendUnit: 'KiB',
- allowZero: true,
- emptyValue: '',
- autoEl: {
- tag: 'div',
- 'data-qtip': Ext.String.format(gettext('Use {0} for unlimited'), 0),
+ xtype: 'pveTwoColumnContainer',
+ startWidget: {
+ xtype: 'pveBandwidthField',
+ name: 'bwlimit',
+ fieldLabel: gettext('Bandwidth Limit'),
+ emptyText: Ext.String.format(gettext('Fallback (default {0})'), 0),
+ backendUnit: 'KiB',
+ allowZero: true,
+ emptyValue: '',
+ autoEl: {
+ tag: 'div',
+ 'data-qtip': Ext.String.format(gettext('Use {0} for unlimited'), 0),
+ },
+ },
+ endWidget: {
+ xtype: 'displayfield',
+ value: gettext('Limit I/O bandwidth.'),
},
},
{
- xtype: 'proxmoxintegerfield',
- name: 'zstd',
- reference: 'zstdThreadCount',
- fieldLabel: Ext.String.format(gettext('{0} Threads'), 'Zstd'),
- fieldStyle: 'text-align: right',
- emptyText: Ext.String.format(gettext('Fallback (default {0})'), 1),
- minValue: 0,
- cbind: {
- deleteEmpty: '{!isCreate}',
+ xtype: 'pveTwoColumnContainer',
+ startWidget: {
+ xtype: 'proxmoxintegerfield',
+ name: 'zstd',
+ reference: 'zstdThreadCount',
+ fieldLabel: Ext.String.format(gettext('{0} Threads'), 'Zstd'),
+ fieldStyle: 'text-align: right',
+ emptyText: Ext.String.format(gettext('Fallback (default {0})'), 1),
+ minValue: 0,
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ autoEl: {
+ tag: 'div',
+ 'data-qtip': gettext('With 0, half of the available cores are used'),
+ },
},
- autoEl: {
- tag: 'div',
- 'data-qtip': gettext('With 0, half of the available cores are used'),
+ endWidget: {
+ xtype: 'displayfield',
+ value: gettext('Threads used for zstd compression (non-PBS).'),
},
},
{
- xtype: 'proxmoxintegerfield',
- name: 'max-workers',
- minValue: 1,
- maxValue: 256,
- fieldLabel: gettext('IO-Workers'),
- fieldStyle: 'text-align: right',
- emptyText: Ext.String.format(gettext('Fallback (default {0})'), 16),
- cbind: {
- deleteEmpty: '{!isCreate}',
+ xtype: 'pveTwoColumnContainer',
+ startWidget: {
+ xtype: 'proxmoxintegerfield',
+ name: 'max-workers',
+ minValue: 1,
+ maxValue: 256,
+ fieldLabel: gettext('IO-Workers'),
+ fieldStyle: 'text-align: right',
+ emptyText: Ext.String.format(gettext('Fallback (default {0})'), 16),
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ },
+ endWidget: {
+ xtype: 'displayfield',
+ value: gettext('I/O workers in the QEMU process (VMs only).'),
},
},
{
@@ -123,42 +144,22 @@ Ext.define('PVE.panel.BackupAdvancedOptions', {
},
},
{
- xtype: 'proxmoxcheckbox',
- fieldLabel: gettext('Repeat missed'),
- name: 'repeat-missed',
- uncheckedValue: 0,
- defaultValue: 0,
- cbind: {
- deleteDefaultValue: '{!isCreate}',
+ xtype: 'pveTwoColumnContainer',
+ startWidget: {
+ xtype: 'proxmoxcheckbox',
+ fieldLabel: gettext('Repeat missed'),
+ name: 'repeat-missed',
+ uncheckedValue: 0,
+ defaultValue: 0,
+ cbind: {
+ deleteDefaultValue: '{!isCreate}',
+ },
},
+ endWidget:{
+ 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."),
+ }
},
- ],
-
- 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] 5+ messages in thread
* Re: [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options
2024-04-22 8:16 ` [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options Dominik Csapak
@ 2024-04-22 8:22 ` Fiona Ebner
2024-04-22 8:28 ` Fiona Ebner
0 siblings, 1 reply; 5+ messages in thread
From: Fiona Ebner @ 2024-04-22 8:22 UTC (permalink / raw)
To: Proxmox VE development discussion, Dominik Csapak
Am 22.04.24 um 10:16 schrieb Dominik Csapak:
> 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>
Getting eslint errors:
> [./panel/BackupAdvancedOptions.js]:
> WARN: line 158 col 16: key-spacing - Missing space before value for key 'endWidget'. (*)
> WARN: line 161 col 7: comma-dangle - Missing trailing comma. (*)
I noticed that the "Fallback (default)" emptytext does not fit in the
value fields. Could you improve the spacing there?
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options
2024-04-22 8:22 ` Fiona Ebner
@ 2024-04-22 8:28 ` Fiona Ebner
0 siblings, 0 replies; 5+ messages in thread
From: Fiona Ebner @ 2024-04-22 8:28 UTC (permalink / raw)
To: Proxmox VE development discussion, Dominik Csapak
Am 22.04.24 um 10:22 schrieb Fiona Ebner:
> Am 22.04.24 um 10:16 schrieb Dominik Csapak:
>> 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>
>
> Getting eslint errors:
>
>> [./panel/BackupAdvancedOptions.js]:
>> WARN: line 158 col 16: key-spacing - Missing space before value for key 'endWidget'. (*)
>> WARN: line 161 col 7: comma-dangle - Missing trailing comma. (*)
>
> I noticed that the "Fallback (default)" emptytext does not fit in the
> value fields. Could you improve the spacing there?
>
Other than that, both patches:
Tested-by: Fiona Ebner <f.ebner@proxmox.com>
Reviewed-by: Fiona Ebner <f.ebner@proxmox.com>
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] applied: [PATCH manager v2 1/2] ui: form: add TwoColumnContainer
2024-04-22 8:16 [pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Dominik Csapak
2024-04-22 8:16 ` [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options Dominik Csapak
@ 2024-04-22 9:30 ` Thomas Lamprecht
1 sibling, 0 replies; 5+ messages in thread
From: Thomas Lamprecht @ 2024-04-22 9:30 UTC (permalink / raw)
To: Proxmox VE development discussion, Dominik Csapak
Am 22/04/2024 um 10:16 schrieb Dominik Csapak:
> this is a container, showing a widget on the left column and another one
> on the right one, with a (default) flex ratio of 1:2
>
> this is helpful when wanting fields to align vertically in an input
> panel that have different height (e.g. because of text wrapping)
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> changes from v1:
> * make the container more generic as a simple container that holds two
> widgets, so it can be useful in more situations
>
> www/manager6/Makefile | 1 +
> www/manager6/form/TwoColumnContainer.js | 53 +++++++++++++++++++++++++
> 2 files changed, 54 insertions(+)
> create mode 100644 www/manager6/form/TwoColumnContainer.js
>
>
applied both patches with some rework, thanks!
Reworked was:
- startWidget -> startColumn and same for the end one
- expose both start and end flex, and name it flex again as it's then not
guaranteed to be a 1/x ratio anymore, and flex is more widely used.
- exposed the columnPadding, can be nice to make it narrower for some UIs
- fixed the eslint warnings of the second patch and integrated changes from
the first one also in there.
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2024-04-22 9:30 UTC | newest]
Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2024-04-22 8:16 [pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Dominik Csapak
2024-04-22 8:16 ` [pve-devel] [PATCH manager v2 2/2] ui: use pveTwoColumnContainer for the advanced backup options Dominik Csapak
2024-04-22 8:22 ` Fiona Ebner
2024-04-22 8:28 ` Fiona Ebner
2024-04-22 9:30 ` [pve-devel] applied: [PATCH manager v2 1/2] ui: form: add TwoColumnContainer Thomas Lamprecht
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox