On 11/17/20 10:29 AM, Dominik Csapak wrote:
some comments inline, looks good otherwise On 11/2/20 3:01 PM, Aaron Lauterer wrote:When scaling the browsers content either via the browser itself or because the OS has a different scaling / DPI setting, it can happen that not all columns have enough space next to each other and thus the last column is moved further below. This happens especially on chromium bases browsers (e.g. chrome, edge). Changing the layout to use extjs HBOXes with flex instead of columns solves works well. Signed-off-by: Aaron Lauterer <a.laute...@proxmox.com> --- v1 -> v2: changed approach, use HBOX layouts instead of columns with columnwidths slightly lower than 0.5. src/panel/InputPanel.js | 127 +++++++++++++++++++++++----------------- 1 file changed, 73 insertions(+), 54 deletions(-) diff --git a/src/panel/InputPanel.js b/src/panel/InputPanel.js index 0ac5e48..d5d6186 100644 --- a/src/panel/InputPanel.js +++ b/src/panel/InputPanel.js @@ -82,70 +82,80 @@ Ext.define('Proxmox.panel.InputPanel', { let items; if (me.items) { - me.columns = 1; items = [ { - columnWidth: 1, layout: 'anchor', items: me.items, }, ]; me.items = undefined; } else if (me.column4) { - me.columns = 4; items = [ { - columnWidth: 0.25, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column1, - }, - { - columnWidth: 0.25, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column2, - }, - { - columnWidth: 0.25, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column3, - }, - { - columnWidth: 0.25, - padding: '0 0 0 10', - layout: 'anchor', - items: me.column4, + layout: 'hbox', + defaults: { + border: false, + },i guess we could add layout: 'anchor' here too and save 3 lines?
instead of the hbox and disabling borders for the 4column layout? Doesn't work for me on Firefox when I do that and check against the PMG -> Configuration -> Spam Detector -> Options -> Languages panel
+ items: [ + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column1, + }, + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column2, + }, + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column3, + }, + { + flex: 1, + padding: '0 0 0 10', + layout: 'anchor', + items: me.column4, + }, + ], }, ]; if (me.columnB) { items.push({ - columnWidth: 1, padding: '10 0 0 0', layout: 'anchor', items: me.columnB, }); } } else if (me.column1) { - me.columns = 2; items = [ { - columnWidth: 0.5, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column1, - }, - { - columnWidth: 0.5, - padding: '0 0 0 10', - layout: 'anchor', - items: me.column2 || [], // allow empty column + layout: 'hbox', + defaults: { + border: false, + }, + items: [ + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column1, + }, + { + flex: 1, + padding: '0 0 0 10', + layout: 'anchor', + items: me.column2 || [], // allow empty column + }, + ], }, ]; if (me.columnB) { items.push({ - columnWidth: 1, padding: '10 0 0 0', layout: 'anchor', items: me.columnB, @@ -159,7 +169,6 @@ Ext.define('Proxmox.panel.InputPanel', { if (me.advancedItems) { advItems = [ { - columnWidth: 1, layout: 'anchor', items: me.advancedItems, }, @@ -168,16 +177,27 @@ Ext.define('Proxmox.panel.InputPanel', { } else if (me.advancedColumn1) { advItems = [ { - columnWidth: 0.5, - padding: '0 10 0 0', - layout: 'anchor', - items: me.advancedColumn1, - }, - { - columnWidth: 0.5, - padding: '0 0 0 10', - layout: 'anchor', - items: me.advancedColumn2 || [], // allow empty column + layout: { + type: 'hbox', + align: 'begin', + }, + defaults: { + border: false, + }, + items: [ + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.advancedColumn1, + }, + { + flex: 1, + padding: '0 0 0 10', + layout: 'anchor', + items: me.advancedColumn2 || [], // allow empty column + }, + ], }, ]; @@ -186,7 +206,6 @@ Ext.define('Proxmox.panel.InputPanel', { if (me.advancedColumnB) { advItems.push({ - columnWidth: 1, padding: '10 0 0 0', layout: 'anchor', items: me.advancedColumnB, @@ -198,7 +217,6 @@ Ext.define('Proxmox.panel.InputPanel', { if (advItems) { me.hasAdvanced = true; advItems.unshift({ - columnWidth: 1, xtype: 'box', hidden: false, border: true, @@ -207,11 +225,9 @@ Ext.define('Proxmox.panel.InputPanel', { }, }); items.push({ - columnWidth: 1, xtype: 'container', itemId: 'advancedContainer', hidden: !me.showAdvanced, - layout: 'column', defaults: { border: false, },i guess we would have to change this here to vbox as well? do we even use 'fieldContainer' anywhere anymore?
There are a few places where we have xtype: 'fieldcontainer', extend: 'Ext.form.FieldContainer', if you grep the widget toolkit, pmg-gui and pve-manager repos, but nothing where we set me.useFieldContainer manually. Unless that is some property that extjs is setting automagically.
@@ -230,7 +246,10 @@ Ext.define('Proxmox.panel.InputPanel', { }); } else { Ext.apply(me, { - layout: 'column', + layout: { + type: 'vbox', + align: 'stretch', + }, defaultType: 'container', items: items, });_______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
_______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
