[pve-devel] [RFC manager v3] 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 let the main tree receive a sane space padding.

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

Also the "start/stop/more/..." buttons from the tool bar above the
navigation tab bar gets fixed.

Login panel got also some small fixes together with all input
fields.

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 compiling the sass
stuff also, this is the preferred way for now.

We add a new css stylesheet so that the current manager remains
untouched by this changes.
---

changes since v2:
* Rebased on current master


 PVE/ExtJSIndex6.pm                |  1 +
 www/css/Makefile                  |  4 +-
 www/css/ext6-pve.css              | 90 +++++++++++++++++++++++++++++++++++++++
 www/manager6/Workspace.js         |  4 +-
 www/manager6/panel/ConfigPanel.js |  2 +-
 5 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 www/css/ext6-pve.css

diff --git a/PVE/ExtJSIndex6.pm b/PVE/ExtJSIndex6.pm
index fde27cd..aa6ffa3 100644
--- a/PVE/ExtJSIndex6.pm
+++ b/PVE/ExtJSIndex6.pm
@@ -24,6 +24,7 @@ sub get_index {
     <title>$nodename - Proxmox Virtual Environment</title>
     <link rel="stylesheet" type="text/css" href="/pve2/ext6/theme-triton/resources/theme-triton-all.css" />
     <link rel="stylesheet" type="text/css" href="/pve2/css/ext-pve.css" />
+    <link rel="stylesheet" type="text/css" href="/pve2/css/ext6-pve.css" />
     <script type="text/javascript" src="/pve2/ext6/ext-all-debug.js"></script>
 _EOD
 
diff --git a/www/css/Makefile b/www/css/Makefile
index c21a65e..c406bd7 100644
--- a/www/css/Makefile
+++ b/www/css/Makefile
@@ -3,9 +3,9 @@ include ../../defines.mk
 all:
 
 .PHONY: install 
-install: ext-pve.css
+install: ext-pve.css ext6-pve.css
 	install -d ${WWWCSSDIR}
-	install -m 0644 -o www-data -g www-data $< ${WWWCSSDIR}
+	install -m 0644 -o www-data -g www-data $? ${WWWCSSDIR}
 
 .PHONY: distclean
 distclean: clean
diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
new file mode 100644
index 0000000..f8a7cfa
--- /dev/null
+++ b/www/css/ext6-pve.css
@@ -0,0 +1,90 @@
+/* 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: 4px;
+   /* some button depth, not really pretty yet, though,
+      make better for release! */
+    background-color: rgba(135, 188, 235, 0.5);
+}
+
+/* no big paddings on start/stop ... buttons */
+.x-btn-default-toolbar-small {
+    padding: 3px;
+}
+
+.x-toolbar-default {
+    padding: 4px 0px 4px 8px;
+}
+
+/*
+ no space above tabs, this could actually be
+ undesired if we want big buttons (mobile devices, ...)
+*/
+.x-tab-bar-horizontal > .x-tab-bar-body-default {
+    min-height: 27px;
+}
+.x-tab-bar-default-top > .x-tab-bar-body-default {
+    padding: 0px 6px;
+}
+
+.x-panel-header-default-horizontal.x-header-noborder {
+    padding: 6px 10px;
+}
+
+/* Make the optional titlebar under the tab row smaller */
+.x-window-header-default-top {
+    padding: 5px 10px;
+}
+
+.x-window-header-title-default {
+    font-size: 14px;
+}
+
+/* Stronger weight on enabled buttons */
+.x-btn-inner-default-toolbar-small {
+    color: #000;
+}
+
+/* make the search field smaller */
+.x-form-text-default {
+    min-height: unset;
+    font-size: 12px;
+}
+
+/* form field with arrows needs some hack so that others are not affected*/
+.x-form-trigger-default {
+    font-size: 12px;
+}
+
+/* drop down items */
+.x-boundlist-item {
+    padding: 0px 8px;
+    font-size: 12px;
+}
+
+/* let grid cells heigh as they are */
+.x-grid-cell-inner {
+    line-height: inherit;
+    padding: 2px 6px;
+}
+
+.x-column-header-inner {
+    padding: 4px 6px;
+}
+
+/* fixes no space from top in the login form */
+.x-panel-body-default-framed {
+    padding-top: 8px;
+}
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index c8c4cb6..e16bc30 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -369,6 +369,7 @@ Ext.define('PVE.StdWorkspace', {
 			baseCls: 'x-plain'			
 		    },
 		    border: false,
+		    height: 35,
 		    margin: '2 0 5 0',
 		    items: [
 			{
@@ -380,8 +381,7 @@ Ext.define('PVE.StdWorkspace', {
 			    minWidth: 200,
 			    flex: 1,
 			    id: 'versioninfo',
-			    html: 'Proxmox Virtual Environment',
-			    height: 30
+			    html: 'Proxmox Virtual Environment'
 			},
 			{
 			    pack: 'end',
diff --git a/www/manager6/panel/ConfigPanel.js b/www/manager6/panel/ConfigPanel.js
index fdab318..bfa9211 100644
--- a/www/manager6/panel/ConfigPanel.js
+++ b/www/manager6/panel/ConfigPanel.js
@@ -52,7 +52,7 @@ Ext.define('PVE.panel.Config', {
 	var toolbar = Ext.create('Ext.toolbar.Toolbar', {
 	    items: tbar,
 	    style: 'border:0px;',
-	    height: 28
+	    height: 32
 	});
 
 	var tab = Ext.create('Ext.tab.Panel', {
-- 
2.1.4