[pve-devel] [RFC manager] ext6/triton: add some visual changes and fixes

[Thomas Lamprecht]

they are mostly intended to save space as the "new theme", if it
gets applied, takes up space like it's worth pure gold.

Paddings get made smaller on buttons, tabs and grids.
Also the tree receive a sane space padding.

Further fix the height of the top info panel (the one with the logo,
PVE version, login button ...).

We use simple CSS overrides to achieve this all.
Working with the scss (sass) files and rebuilding the theme would
be nicer, but as I have no intend to start working with senchas
"build system" and we self have no sane way for compilling the sass
stuff also, this is the preferred way for now.
---

*NOTE:* this is not really intended for commit (yet), altough I'd
have no problems with that, but for the people wo want to try and
work with ExtJS6 and our current theme of choice (?): triton


 www/css/ext-pve.css       | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 www/manager6/Workspace.js |  6 +++---
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/www/css/ext-pve.css b/www/css/ext-pve.css
index d9461d2..a9ba292 100644
--- a/www/css/ext-pve.css
+++ b/www/css/ext-pve.css
@@ -1,6 +1,49 @@
+/* Force smaller tree padding */
+.x-grid-cell-inner-treecolumn { /* horizontal padding */
+    padding: 1px 0px;
+}
+
+.x-tree-elbow-img { /* vertical padding */
+    width: 10px;
+}
+
+/* no big paddings on small buttons */
+.x-btn-default-small {
+    padding: 3px;
+}
+
+.x-tab-default-top {
+    padding: 3px;
+    /* comment out for some button depth, not really pretty yet though*/
+/*    background-color: rgba(135, 188, 235, 0.6); */
+}
+
+.x-btn-default-toolbar-small {
+    padding: 3px;
+}
+
+/* no space above tabs */
+.x-tab-bar-horizontal > .x-tab-bar-body-default {
+    min-height: 27px;
+}
+
+.x-tab-bar-default-top > .x-tab-bar-body-default {
+    padding: 0px 4px;
+}
+
+/* Stronger weight on enabled buttons */
+.x-btn-inner-default-toolbar-small {
+    color: #000;
+}
+
 /* force same grid cell heigh */
 .x-grid-cell-inner {
-    line-height: 13px;
+    line-height: inherit;
+    padding: 2px 6px;
+}
+
+.x-column-header-inner {
+    padding: 4px 6px;
 }
 
 .x-grid-row-loading {
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index a807b41..3601b91 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -371,19 +371,19 @@ Ext.define('PVE.StdWorkspace', {
 			baseCls: 'x-plain'			
 		    },
 		    border: false,
+		    height: 35,
 		    margin: '2 0 5 0',
 		    items: [
 			{
 			    margin: '0 0 0 4',
 			    html: '<a class="x-unselectable" target=_blank href="http://www.proxmox.com">' +
-				'<img height=30 width=209 src="/pve2/images/proxmox_logo.png"/></a>'
+				'<img height=30 width=209 src="/pve2/images/proxmox_logo.png"/></a>',
 			},
 			{
 			    minWidth: 200,
 			    flex: 1,
 			    id: 'versioninfo',
-			    html: 'Proxmox Virtual Environment',
-			    height: 30
+			    html: 'Proxmox Virtual Environment'
 			},
 			{
 			    pack: 'end',
-- 
2.1.4