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

Dominik Csapak d.csapak at proxmox.com
Thu Mar 28 16:25:04 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