[pve-devel] [PATCH manager 2/5] gui: GuestSummary: choose columns based on container width

[Dominik Csapak]

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 at proxmox.com>
---
 www/manager6/Utils.js              | 23 ++++++++++++-
 www/manager6/panel/GuestSummary.js | 53 ++++++++++++++----------------
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index ad75c871..27826606 100644
--- 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 e8633869..9706734a 100644
--- 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);
+			}
+		    }
 		}
 	    ]
 	});
-- 
2.20.1