[pve-devel] [RFC manager] ext6/triton: add some visual changes and fixes
Thomas Lamprecht
t.lamprecht at proxmox.com
Fri Feb 12 07:52:56 CET 2016
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.
---
Half of these changes are, imo, really needed for usability, this
includes mainly the tree and button fixes.
The others are maybe discuss-able and a matter of taste, but they
save quite some space.
Did this mainly in the spare time when waiting for task to complete
but feel free to comment.
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 a49c4d7..b0082fc 100644
--- a/PVE/ExtJSIndex6.pm
+++ b/PVE/ExtJSIndex6.pm
@@ -24,6 +24,7 @@ sub get_index {
<title>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..c8d9750
--- /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;
+}
\ No newline at end of file
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index a807b41..26b36af 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -371,6 +371,7 @@ Ext.define('PVE.StdWorkspace', {
baseCls: 'x-plain'
},
border: false,
+ height: 35,
margin: '2 0 5 0',
items: [
{
@@ -382,8 +383,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
More information about the pve-devel
mailing list