[pve-devel] [PATCH manager 1/7] gui: qemu/HardwareView: prepare Hardwareview for font-awesome icons

[Dominik Csapak]

we want to be able to use fontawesome icons directly instead of having
to use extracted png in css classes

this patch makes it possible to use 'iconCls' with the font-awesome icon name

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/css/ext6-pve.css              | 8 ++++++++
 www/manager6/qemu/HardwareView.js | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 7ac35603..e7f44a1f 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -250,6 +250,14 @@
     padding-left: 20px;
 }
 
+.pve-itype-fa > .x-grid-cell-inner{
+    padding-left: 3px;
+}
+
+.pve-grid-fa {
+    margin-right: 10px;
+}
+
 .pve-itype-icon-qemu,
 .x-tree-node-computer,
 .x-grid-tree-node-expanded .x-tree-node-computer
diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index ca825798..50c259c0 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -8,6 +8,9 @@ Ext.define('PVE.qemu.HardwareView', {
 	var me = this;
 	var rows = me.rows;
 	var rowdef = rows[key] || {};
+	var iconCls = rowdef.iconCls;
+	var icon = '';
+	var txt = (rowdef.header || key);
 
 	metaData.tdAttr = "valign=middle";
 
@@ -26,8 +29,11 @@ Ext.define('PVE.qemu.HardwareView', {
 		    return rowdef.cdheader;
 		}
 	    }
+	} else if (iconCls) {
+	    icon = "<i class='pve-grid-fa fa fa-fw fa-" + iconCls + "'></i>";
+	    metaData.tdCls += " pve-itype-fa";
 	}
-	return rowdef.header || key;
+	return icon + txt;
     },
 
     initComponent : function() {
-- 
2.11.0