[pve-devel] applied-series: [PATCH manager 0/5] fix #2498: gui: improve columns logic in summaries

[Thomas Lamprecht]

On 12/4/19 1:41 PM, Dominik Csapak wrote:
> this series changes the summaries (lxc/qemu/node/dc) in such way that
> the number of columns do not depend on the viewport (the browser width),
> but on the actual size of the panel, meaning that if the tree width
> changes, the number of columns can change
> 
> to prevent some users now having a different number of columns than
> their preference, we add a browser setting to set the number of columns
> manually to either 'auto', 1,2 or 3
> 
> Dominik Csapak (5):
>   gui: refactor {lxc,qemu}/Summary to panel/GuestSummary
>   gui: GuestSummary: choose columns based on container width
>   gui: {dc,node}/Summary: choose columns by panel size
>   gui: let users choose the number of columns
>   gui: set minWidth for node/guest Summary
> 
>  www/manager6/Makefile                         |   3 +-
>  www/manager6/Utils.js                         |  32 +++-
>  www/manager6/dc/Summary.js                    |  23 +--
>  www/manager6/lxc/Config.js                    |   2 +-
>  www/manager6/lxc/Summary.js                   | 139 ------------------
>  www/manager6/node/Summary.js                  |  29 ++--
>  .../Summary.js => panel/GuestSummary.js}      |  66 +++++----
>  www/manager6/qemu/Config.js                   |   2 +-
>  www/manager6/window/Settings.js               |  26 ++++
>  9 files changed, 127 insertions(+), 195 deletions(-)
>  delete mode 100644 www/manager6/lxc/Summary.js
>  rename www/manager6/{qemu/Summary.js => panel/GuestSummary.js} (72%)
> 

applied series, thanks!

We could maybe also do 3 columns on very wide displays, e.g., with:

----8<----
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index e61e2693..08b1aa2b 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1291,7 +1291,14 @@ Ext.define('PVE.Utils', { utilities: {
                factor = 1;
            }
        } else {
-           factor = container.getSize().width < 1400 ? 1 : 2;
+           let width = container.getSize().width;
+           if (width < 1400) {
+               factor = 1;
+           } else if (width < 2100) {
+               factor = 2;
+           } else {
+               factor = 3;
+           }
        }

        if (container.oldFactor === factor) {
---

but that rather an edge case, and it looks OK as is there too.