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

Dominik Csapak d.csapak at proxmox.com
Wed Mar 27 14:13:17 CET 2019


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




More information about the pve-devel mailing list