[pve-devel] [PATCH manager 1/4] fix width of panels in statusviews

Dominik Csapak d.csapak at proxmox.com
Tue Oct 4 16:29:20 CEST 2016


since we introduced the vertical menus,
each panel is about 30px too wide for having
two side by side with a 1920x1080 resolution

this patch changes, the paddings/sizes so that
this fits again, at the cost of about 30 pixels width
per panel

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/lxc/Summary.js     | 12 +++++-------
 www/manager6/node/StatusView.js | 26 +++++++++++++++-----------
 www/manager6/node/Summary.js    |  6 +++---
 www/manager6/panel/RRDChart.js  |  2 +-
 www/manager6/qemu/Summary.js    | 13 +++++++------
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/www/manager6/lxc/Summary.js b/www/manager6/lxc/Summary.js
index 8d14c94..e9292b2 100644
--- a/www/manager6/lxc/Summary.js
+++ b/www/manager6/lxc/Summary.js
@@ -3,7 +3,7 @@ Ext.define('PVE.lxc.Summary', {
     alias: 'widget.pveLxcSummary',
 
     scrollable: true,
-    bodyPadding: 10,
+    bodyPadding: '10 0 0 0',
 
     initComponent: function() {
         var me = this;
@@ -31,7 +31,7 @@ Ext.define('PVE.lxc.Summary', {
 
 	var notesview = Ext.create('PVE.panel.NotesView', {
 	    pveSelNode: me.pveSelNode,
-	    padding: template ? '10 0 0 0' : '0 0 0 10',
+	    padding: '0 0 0 10',
 	    flex: 1
 	});
 
@@ -44,9 +44,6 @@ Ext.define('PVE.lxc.Summary', {
 			layout: {
 			    type: 'column'
 			},
-			defaults: {
-			    padding: '0 10 10 0'
-			},
 			items: [{
 			    width: 800,
 			    layout: {
@@ -58,6 +55,7 @@ Ext.define('PVE.lxc.Summary', {
 				{
 				    xtype: 'pveTemplateStatusView',
 				    pveSelNode: me.pveSelNode,
+				    padding: '0 0 10 10',
 				    rstore: rstore
 				},
 				notesview
@@ -85,11 +83,11 @@ Ext.define('PVE.lxc.Summary', {
 				type: 'column'
 			    },
 			    defaults: {
-				padding: '0 10 10 0'
+				padding: '0 0 10 10'
 			    },
 			    items: [
 				{
-				    width: 800,
+				    width: 770,
 				    height: 300,
 				    layout: {
 					type: 'hbox',
diff --git a/www/manager6/node/StatusView.js b/www/manager6/node/StatusView.js
index 3ee56ad..54e618e 100644
--- a/www/manager6/node/StatusView.js
+++ b/www/manager6/node/StatusView.js
@@ -3,20 +3,24 @@ Ext.define('PVE.node.StatusView', {
     alias: 'widget.pveNodeStatus',
 
     height: 300,
+    bodyPadding: '20 15 20 15',
 
     defaults: {
 	xtype: 'pveInfoWidget',
-	padding: '0 30 5 30',
-	width: 394
+	padding: '0 15 5 15',
+	// default available width on 1920x1080 is
+	// 1545, so we have for one column
+	// ~770px
+	// -10 for padding
+	// -2 for border
+	// -30 for inner padding
+	// = 728px
+	// = 364px per column inside statuspanel
+	width: 364
     },
 
     items: [
 	{
-	    xtype: 'box',
-	    width: 400,
-	    height: 20
-	},
-	{
 	    itemId: 'cpu',
 	    title: gettext('CPU usage'),
 	    valueField: 'cpu',
@@ -54,7 +58,7 @@ Ext.define('PVE.node.StatusView', {
 	    renderer: function(record) {
 		return PVE.Utils.render_size(record.shared);
 	    },
-	    padding: '0 30 10 30'
+	    padding: '0 15 10 15'
 	},
 	{
 	    itemId: 'rootfs',
@@ -87,7 +91,7 @@ Ext.define('PVE.node.StatusView', {
 		gettext('Socket' + (cpuinfo.sockets > 1 ? 's': '')) + ")";
 	    },
 	    value: '',
-	    width: 790
+	    width: 730
 	},
 	{
 	    itemId: 'kversion',
@@ -95,7 +99,7 @@ Ext.define('PVE.node.StatusView', {
 	    printBar: false,
 	    textField: 'kversion',
 	    value: '',
-	    width: 790
+	    width: 730
 	},
 	{
 	    itemId: 'version',
@@ -103,7 +107,7 @@ Ext.define('PVE.node.StatusView', {
 	    title: gettext('PVE Manager Version'),
 	    textField: 'pveversion',
 	    value: '',
-	    width: 790
+	    width: 730
 	}
     ],
 
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index 92e0551..6e67b74 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -3,7 +3,7 @@ Ext.define('PVE.node.Summary', {
     alias: 'widget.pveNodeSummary',
 
     scrollable: true,
-    bodyStyle: 'padding:10px',
+    bodyPadding: '10 0 0 0',
 
     showVersions: function() {
 	var me = this;
@@ -100,13 +100,13 @@ Ext.define('PVE.node.Summary', {
 			xtype: 'container',
 			layout: 'column',
 			defaults: {
-			    padding: '0 10 10 0'
+			    padding: '0 0 10 10'
 			},
 			items: [
 			    {
 				xtype: 'pveNodeStatus',
 				rstore: rstore,
-				width: 800,
+				width: 770,
 				pveSelNode: me.pveSelNode
 			    },
 			    {
diff --git a/www/manager6/panel/RRDChart.js b/www/manager6/panel/RRDChart.js
index 6d3ce65..449eb4a 100644
--- a/www/manager6/panel/RRDChart.js
+++ b/www/manager6/panel/RRDChart.js
@@ -3,7 +3,7 @@ Ext.define('PVE.widget.RRDChart', {
     alias: 'widget.pveRRDChart',
 
 
-    width: 800,
+    width: 770,
     height: 300,
     animation: false,
     interactions: [{
diff --git a/www/manager6/qemu/Summary.js b/www/manager6/qemu/Summary.js
index 67b740a..e0838b6 100644
--- a/www/manager6/qemu/Summary.js
+++ b/www/manager6/qemu/Summary.js
@@ -3,7 +3,7 @@ Ext.define('PVE.qemu.Summary', {
     alias: 'widget.pveQemuSummary',
 
     scrollable: true,
-    bodyPadding: 10,
+    bodyPadding: '10 0 0 0',
 
     initComponent: function() {
         var me = this;
@@ -31,7 +31,7 @@ Ext.define('PVE.qemu.Summary', {
 
 	var notesview = Ext.create('PVE.panel.NotesView', {
 	    pveSelNode: me.pveSelNode,
-	    padding: template? '10 0 0 0' : '0 0 0 10',
+	    padding: '0 0 0 10',
 	    flex: 1
 	});
 
@@ -47,10 +47,10 @@ Ext.define('PVE.qemu.Summary', {
 				type: 'column'
 			    },
 			    defaults: {
-				padding: '0 10 10 0'
+				padding: '0 0 10 0'
 			    },
 			    items: [{
-				width: 800,
+				width: 770,
 				layout: {
 				    type: 'vbox',
 				    align: 'stretch'
@@ -60,6 +60,7 @@ Ext.define('PVE.qemu.Summary', {
 				    {
 					xtype: 'pveTemplateStatusView',
 					pveSelNode: me.pveSelNode,
+					padding: '0 0 10 10',
 					rstore: rstore
 				    },
 				    notesview
@@ -89,11 +90,11 @@ Ext.define('PVE.qemu.Summary', {
 				type: 'column'
 			    },
 			    defaults: {
-				padding: '0 10 10 0'
+				padding: '0 0 10 10'
 			    },
 			    items: [
 				{
-				    width: 800,
+				    width: 770,
 				    height: 300,
 				    layout: {
 					type: 'hbox',
-- 
2.1.4





More information about the pve-devel mailing list