gui: GuestSummary: choose columns based on container width

instead of the viewport width. This means that the number of columns can
change when the tree width changes, not only on browser window resize

for this to work reliably, we have to change the structure of the first
two panels, so that they are in one container for non-templates. if
we do not do this, there are some weird glitches on resizing with the
scrollbar

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index ad75c871d9b1b15fe8f4dc33e9ef7270e08c47a4..2782660627c494ef720301c41b0433326818b423 100644 (file)
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1280,7 +1280,28 @@ Ext.define('PVE.Utils', { utilities: {
        } else {
            delete target[name];
        }
-    }
+    },
+
+    updateColumns: function(container) {
+       let factor = container.getSize().width < 1400 ? 1 : 2;
+
+       if (container.oldFactor === factor) {
+           return;
+       }
+
+       let items = container.query('>'); // direct childs
+       factor = Math.min(factor, items.length);
+       container.oldFactor = factor;
+
+       items.forEach((item) => {
+           item.columnWidth = 1 / factor;
+       });
+
+       // we have to update the layout twice, since the first layout change
+       // can trigger the scrollbar which reduces the amount of space left
+       container.updateLayout();
+       container.updateLayout();
+    },
 },
 
     singleton: true,

diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index e86338690873a6260e8023b43d42baf6790c8986..9706734a9f32981318cc868890124b98c903e25d 100644 (file)
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -30,41 +30,39 @@ Ext.define('PVE.qemu.Summary', {
        var template = !!me.pveSelNode.data.template;
        var rstore = me.statusStore;
 
-       var width = template ? 1 : 0.5;
        var items = [
            {
                xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
-               responsiveConfig: {
-                   'width < 1900': {
-                       columnWidth: width
-                   },
-                   'width >= 1900': {
-                       columnWidth: width / 2
-                   }
-               },
+               flex: 1,
+               padding: template ? '5' : '0 5 0 0',
                itemId: 'gueststatus',
                pveSelNode: me.pveSelNode,
                rstore: rstore
            },
            {
                xtype: 'pveNotesView',
-               maxHeight: 330,
+               flex: 1,
+               padding: template ? '5' : '0 0 0 5',
                itemId: 'notesview',
                pveSelNode: me.pveSelNode,
-               responsiveConfig: {
-                   'width < 1900': {
-                       columnWidth: width
-                   },
-                   'width >= 1900': {
-                       columnWidth: width / 2
-                   }
-               }
-           }
+           },
        ];
 
        var rrdstore;
        if (!template) {
 
+           // in non-template mode put the two panels always together
+           items = [
+               {
+                   xtype: 'container',
+                   layout: {
+                       type: 'hbox',
+                       align: 'stretch',
+                   },
+                   items: items
+               }
+           ];
+
            rrdstore = Ext.create('Proxmox.data.RRDStore', {
                rrdurl: `/api2/json/nodes/${nodename}/${type}/${vmid}/rrddata`,
                model: 'pve-rrd-guest'
@@ -110,23 +108,20 @@ Ext.define('PVE.qemu.Summary', {
            items: [
                {
                    xtype: 'container',
+                   itemId: 'itemcontainer',
                    layout: {
                        type: 'column'
                    },
                    defaults: {
                        minHeight: 330,
                        padding: 5,
-                       plugins: 'responsive',
-                       responsiveConfig: {
-                           'width < 1900': {
-                               columnWidth: 1
-                           },
-                           'width >= 1900': {
-                               columnWidth: 0.5
-                           }
-                       }
                    },
-                   items: items
+                   items: items,
+                   listeners: {
+                       resize: function(container) {
+                           PVE.Utils.updateColumns(container);
+                       }
+                   }
                }
            ]
        });