[pve-devel] [PATCH manager 3/9] add new icons to grid and tree

[Dominik Csapak]

we set new icons for the tree and grid
changes:
* new icons
* wider type column (bigger icons)
* use arrows true (uses arrows instead of +/- and gets rid of the
  ugly lines in the tree)
* datacenter has icon instead of folder open/close
* "folder view" gets type icons for folders

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Utils.js              | 41 +++++++++++++++++++++++------
 www/manager6/data/ResourceStore.js |  2 +-
 www/manager6/tree/ResourceTree.js  | 53 +++++++++++++++++++++++++++++++-------
 3 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 07fd0f4..d1cbe4e 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -898,17 +898,42 @@ Ext.define('PVE.Utils', { statics: {
 
     render_resource_type: function(value, metaData, record, rowIndex, colIndex, store) {
 
-	var cls = 'pve-itype-icon-' + value;
+	var icon = '';
+	var gridcls = '';
+
+	switch (value) {
+	    case 'lxc': icon = 'cube';
+			gridcls = '-stopped';
+			break;
+	    case 'qemu': icon = 'desktop';
+			 gridcls = '-stopped';
+			 break;
+	    case 'node': icon = 'building';
+			 gridcls = '-offline';
+			 break;
+	    case 'storage': icon = 'database'; break;
+	    case 'pool': icon = 'tags'; break;
+	    default: icon = 'file';
+	}
 
-	if (record.data.running) {
-	    metaData.tdCls = cls + "-running";
-	} else if (record.data.template) {
-	    metaData.tdCls = cls + "-template";	    
-	} else {
-	    metaData.tdCls = cls;
+	if (value === 'lxc' || value === 'qemu') {
+	    if (record.data.running && record.data.status !== 'paused') {
+		gridcls = '-running';
+	    } else if (record.data.running) {
+		gridcls = '-paused';
+	    }
+	    if (record.data.template) {
+		icon = 'file-o';
+		gridcls = '-template-' + value;
+	    }
+	} else if (value === 'node') {
+	    if (record.data.running) {
+		gridcls = '-online'
+	    }
 	}
 
-	return value;
+	var fa = '<i class="fa fa-fw x-fa-grid' + gridcls  +  ' fa-' + icon  + '"></i> '
+	return fa + value;
     },
 
     render_uptime: function(value, metaData, record, rowIndex, colIndex, store) {
diff --git a/www/manager6/data/ResourceStore.js b/www/manager6/data/ResourceStore.js
index c757a46..4c409de 100644
--- a/www/manager6/data/ResourceStore.js
+++ b/www/manager6/data/ResourceStore.js
@@ -23,7 +23,7 @@ Ext.define('PVE.data.ResourceStore', {
 		renderer: PVE.Utils.render_resource_type,
 		sortable: true,
 		hideable: false,
-		width: 80
+		width: 100
 	    },
 	    id: {
 		header: 'ID',
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 556975e..9b703a0 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -8,28 +8,37 @@ Ext.define('PVE.tree.ResourceTree', {
     statics: {
 	typeDefaults: {
 	    node: { 
-		iconCls: 'x-tree-node-server',
+		iconCls: 'fa fa-building  x-fa-tree',
 		text: gettext('Nodes')
 	    },
 	    pool: { 
-		iconCls: 'x-tree-node-pool',
+		iconCls: 'fa fa-tags fa-dark  x-fa-tree',
 		text: gettext('Resource Pool')
 	    },
 	    storage: {
-		iconCls: 'x-tree-node-harddisk',
+		iconCls: 'fa fa-database fa-dark  x-fa-tree',
 		text: gettext('Storage')
 	    },
 	    qemu: {
-		iconCls: 'x-tree-node-computer',
+		iconCls: 'fa fa-desktop  x-fa-tree',
 		text: gettext('Virtual Machine')
 	    },
 	    lxc: {
-		iconCls: 'x-tree-node-lxc',
+		//iconCls: 'x-tree-node-lxc',
+		iconCls: 'fa fa-cube  x-fa-tree',
 		text: gettext('LXC Container')
-	    } 
+	    },
+	    template: {
+		iconCls: 'fa fa-file-o fa-dark  x-fa-tree-template'
+	    },
+	    datacenter: {
+		iconCls: 'fa fa-server x-fa-tree-datacenter',
+	    }
 	}
     },
 
+    useArrows: true,
+
     // private
     nodeSortFn: function(node1, node2) {
 	var n1 = node1.data;
@@ -94,10 +103,34 @@ Ext.define('PVE.tree.ResourceTree', {
 	var me = this;
 
 	var defaults = PVE.tree.ResourceTree.typeDefaults[info.type];
+	if (info.id === 'root') {
+	    defaults = PVE.tree.ResourceTree.typeDefaults['datacenter'];
+	} else if (info.type === 'type') {
+	    defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
+	}
 	if (defaults && defaults.iconCls) {
-	    var running = info.running ? '-running' : '';
-	    var template = info.template ? '-template' : '';
-	    info.iconCls = defaults.iconCls + running + template;
+	    var iconClsAdd = '';
+
+	    if (info.running && info.type === 'node') {
+		iconClsAdd = '-online';
+	    } else if (info.running) {
+		iconClsAdd = '-running';
+		if (info.status === 'paused') {
+		    iconClsAdd = '-paused';
+		}
+	    } else if (info.type === 'lxc' || info.type === 'qemu') {
+		iconClsAdd = '-stopped';
+	    } else if (info.type === 'node') {
+		iconClsAdd = '-offline';
+	    }
+
+	    info.iconCls = defaults.iconCls + iconClsAdd;
+
+	    if (info.template) {
+		iconClsAdd = '-template';
+		info.iconCls = PVE.tree.ResourceTree.typeDefaults['template'].iconCls + '-' + info.type;
+	    }
+
 	}
     },
 
@@ -201,7 +234,7 @@ Ext.define('PVE.tree.ResourceTree', {
 	    // fixme: suspend events ?
 
 	    var rootnode = me.store.getRootNode();
-	    
+	    me.setIconCls(rootnode.data);
 	    // remember selected node (and all parents)
 	    var sm = me.getSelectionModel();
 
-- 
2.1.4