[pve-devel] [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior

[pve-devel] [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior

[Aaron Lauterer]

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.lauterer@proxmox.com>
---
v2 -> v3: use defaults for layout and flex

v1 -> v2: changed approach, use HBOX layouts instead of columns with
columnwidths slightly lower than 0.5.

 src/panel/InputPanel.js | 117 +++++++++++++++++++++-------------------
 1 file changed, 63 insertions(+), 54 deletions(-)

diff --git a/src/panel/InputPanel.js b/src/panel/InputPanel.js
index 0ac5e48..f132005 100644
--- a/src/panel/InputPanel.js
+++ b/src/panel/InputPanel.js
@@ -82,70 +82,72 @@ 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,
+			layout: 'anchor',
+			flex: 1,
+		    },
+		    items: [
+			{
+			    padding: '0 10 0 0',
+			    items: me.column1,
+			},
+			{
+			    padding: '0 10 0 0',
+			    items: me.column2,
+			},
+			{
+			    padding: '0 10 0 0',
+			    items: me.column3,
+			},
+			{
+			    padding: '0 0 0 10',
+			    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,
+			layout: 'anchor',
+			flex: 1,
+		    },
+		    items: [
+			{
+			    padding: '0 10 0 0',
+			    items: me.column1,
+			},
+			{
+			    padding: '0 0 0 10',
+			    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 +161,6 @@ Ext.define('Proxmox.panel.InputPanel', {
 	if (me.advancedItems) {
 	    advItems = [
 		{
-		    columnWidth: 1,
 		    layout: 'anchor',
 		    items: me.advancedItems,
 		},
@@ -168,16 +169,25 @@ 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,
+			layout: 'anchor',
+			flex: 1,
+		    },
+		    items: [
+			{
+			    padding: '0 10 0 0',
+			    items: me.advancedColumn1,
+			},
+			{
+			    padding: '0 0 0 10',
+			    items: me.advancedColumn2 || [], // allow empty column
+			},
+		    ],
 		},
 	    ];
 
@@ -186,7 +196,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 +207,6 @@ Ext.define('Proxmox.panel.InputPanel', {
 	if (advItems) {
 	    me.hasAdvanced = true;
 	    advItems.unshift({
-		columnWidth: 1,
 		xtype: 'box',
 		hidden: false,
 		border: true,
@@ -207,11 +215,9 @@ Ext.define('Proxmox.panel.InputPanel', {
 		},
 	    });
 	    items.push({
-		columnWidth: 1,
 		xtype: 'container',
 		itemId: 'advancedContainer',
 		hidden: !me.showAdvanced,
-		layout: 'column',
 		defaults: {
 		    border: false,
 		},
@@ -230,7 +236,10 @@ Ext.define('Proxmox.panel.InputPanel', {
 	    });
 	} else {
 	    Ext.apply(me, {
-		layout: 'column',
+		layout: {
+		    type: 'vbox',
+		    align: 'stretch',
+		},
 		defaultType: 'container',
 		items: items,
 	    });
-- 
2.20.1

[pve-devel] [PATCH widget-toolkit 2/2 v3] InputPanel: remove old code for useFieldContainer

[Aaron Lauterer]

`useFieldContainer` doesn't seem to be used anymore in any of our
products:
* PVE
* PMG
* PBS

it therefore can be considered dead code.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
v3: added newly after discussing on the mailing list that this is
probably dead code [0]

[0] https://lists.proxmox.com/pipermail/pve-devel/2020-November/045968.html
 src/panel/InputPanel.js | 27 ++++++++-------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/panel/InputPanel.js b/src/panel/InputPanel.js
index f132005..ed3521a 100644
--- a/src/panel/InputPanel.js
+++ b/src/panel/InputPanel.js
@@ -225,25 +225,14 @@ Ext.define('Proxmox.panel.InputPanel', {
 	    });
 	}
 
-	if (me.useFieldContainer) {
-	    Ext.apply(me, {
-		layout: 'fit',
-		items: Ext.apply(me.useFieldContainer, {
-		    layout: 'column',
-		    defaultType: 'container',
-		    items: items,
-		}),
-	    });
-	} else {
-	    Ext.apply(me, {
-		layout: {
-		    type: 'vbox',
-		    align: 'stretch',
-		},
-		defaultType: 'container',
-		items: items,
-	    });
-	}
+	Ext.apply(me, {
+	    layout: {
+		type: 'vbox',
+		align: 'stretch',
+	    },
+	    defaultType: 'container',
+	    items: items,
+	});
 
 	me.callParent();
     },
-- 
2.20.1

[pve-devel] applied: [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior

[Dominik Csapak]

applied both patches, thanks :)