ext6/triton: add some visual changes and fixes

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.

diff --git a/PVE/ExtJSIndex6.pm b/PVE/ExtJSIndex6.pm
index fde27cd5a873ccbc2a530ea8ee9aa7b5084d1356..aa6ffa35ac97b4c155b16222ce119be97b42154a 100644 (file)
--- 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 c21a65e3830172f3727906f23c9671bd89ccc480..c406bd73de0a1865e8aae9d6fee7f5a3dfd38f21 100644 (file)
--- 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 (file)
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 c8c4cb665fb55166af14d5b3fe24a02b7d3546de..e16bc30e885a93a2c232a709cb22b9f596b5190f 100644 (file)
--- 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 fdab318edf60ed7657c3f44a0cdb2ee713d999e3..bfa9211a2d28f4cba93effefe70000ef5b44d091 100644 (file)
--- 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', {