* [pve-devel] [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior
@ 2020-11-17 13:50 Aaron Lauterer
2020-11-17 13:50 ` [pve-devel] [PATCH widget-toolkit 2/2 v3] InputPanel: remove old code for useFieldContainer Aaron Lauterer
2020-11-19 11:51 ` [pve-devel] applied: [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior Dominik Csapak
0 siblings, 2 replies; 3+ messages in thread
From: Aaron Lauterer @ 2020-11-17 13:50 UTC (permalink / raw)
To: pve-devel
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
^ permalink raw reply [flat|nested] 3+ messages in thread
* [pve-devel] [PATCH widget-toolkit 2/2 v3] InputPanel: remove old code for useFieldContainer
2020-11-17 13:50 [pve-devel] [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior Aaron Lauterer
@ 2020-11-17 13:50 ` Aaron Lauterer
2020-11-19 11:51 ` [pve-devel] applied: [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior Dominik Csapak
1 sibling, 0 replies; 3+ messages in thread
From: Aaron Lauterer @ 2020-11-17 13:50 UTC (permalink / raw)
To: pve-devel
`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
^ permalink raw reply [flat|nested] 3+ messages in thread
* [pve-devel] applied: [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior
2020-11-17 13:50 [pve-devel] [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior Aaron Lauterer
2020-11-17 13:50 ` [pve-devel] [PATCH widget-toolkit 2/2 v3] InputPanel: remove old code for useFieldContainer Aaron Lauterer
@ 2020-11-19 11:51 ` Dominik Csapak
1 sibling, 0 replies; 3+ messages in thread
From: Dominik Csapak @ 2020-11-19 11:51 UTC (permalink / raw)
To: pve-devel
applied both patches, thanks :)
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2020-11-19 11:52 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2020-11-17 13:50 [pve-devel] [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior Aaron Lauterer
2020-11-17 13:50 ` [pve-devel] [PATCH widget-toolkit 2/2 v3] InputPanel: remove old code for useFieldContainer Aaron Lauterer
2020-11-19 11:51 ` [pve-devel] applied: [PATCH widget-toolkit 1/2 v3] InputPanel: fix column scaling behavior Dominik Csapak
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox