From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with UTF8SMTPS id 6F30060560 for ; Tue, 17 Nov 2020 10:29:06 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with UTF8SMTP id 68209DED2 for ; Tue, 17 Nov 2020 10:29:06 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [212.186.127.180]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with UTF8SMTPS id BCCF7DEC5 for ; Tue, 17 Nov 2020 10:29:05 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with UTF8SMTP id 81411435CF for ; Tue, 17 Nov 2020 10:29:05 +0100 (CET) To: pve-devel@lists.proxmox.com References: <20201102140102.26141-1-a.lauterer@proxmox.com> <20201102140102.26141-2-a.lauterer@proxmox.com> From: Dominik Csapak Message-ID: Date: Tue, 17 Nov 2020 10:29:04 +0100 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:83.0) Gecko/20100101 Thunderbird/83.0 MIME-Version: 1.0 In-Reply-To: <20201102140102.26141-2-a.lauterer@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Language: en-US Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.352 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -0.001 Looks like a legit reply (A) RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: Re: [pve-devel] [PATCH widget-toolkit v2] InputPanel: fix column scaling behavior X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 17 Nov 2020 09:29:06 -0000 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 > --- > 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? > + 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? > @@ -230,7 +246,10 @@ Ext.define('Proxmox.panel.InputPanel', { > }); > } else { > Ext.apply(me, { > - layout: 'column', > + layout: { > + type: 'vbox', > + align: 'stretch', > + }, > defaultType: 'container', > items: items, > }); >