[pve-devel] [PATCH manager v2 2/4] use font-awesome icons for action buttons and cmdmenu

Dominik Csapak d.csapak at proxmox.com
Tue Apr 5 11:31:46 CEST 2016


this patch makes use of font-awesome for
lxc/qemu action buttons (start/shutdown etc.)
node actions buttons (restart/shutdown etc.)
and lxc/qemu cmdmenus

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/lxc/CmdMenu.js       | 14 +++++++-------
 www/manager6/lxc/Config.js        | 18 ++++++++++++------
 www/manager6/node/Config.js       | 16 ++++++++++------
 www/manager6/qemu/CmdMenu.js      | 18 +++++++++---------
 www/manager6/qemu/Config.js       | 24 ++++++++++++++++--------
 www/manager6/qemu/TemplateMenu.js |  4 ++--
 6 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/www/manager6/lxc/CmdMenu.js b/www/manager6/lxc/CmdMenu.js
index 6640cbd..53652a8 100644
--- a/www/manager6/lxc/CmdMenu.js
+++ b/www/manager6/lxc/CmdMenu.js
@@ -32,14 +32,14 @@ Ext.define('PVE.lxc.CmdMenu', {
 	me.items = [
 	    {
 		text: gettext('Start'),
-		icon: '/pve2/images/start.png',
+		iconCls: 'fa fa-fw fa-play',
 		handler: function() {
 		    vm_command('start');
 		}
 	    },
 	    { 
 		text: gettext('Migrate'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-send-o',
 		handler: function() {
 		    var win = Ext.create('PVE.window.Migrate', {
 			vmtype: 'lxc',
@@ -51,7 +51,7 @@ Ext.define('PVE.lxc.CmdMenu', {
 	    },
 	    {
 		text: gettext('Suspend'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-pause',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('vzsuspend', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -65,14 +65,14 @@ Ext.define('PVE.lxc.CmdMenu', {
 	    },
 	    {
 		text: gettext('Resume'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-play',
 		handler: function() {
 		    vm_command('resume');
 		}
 	    },
 	    {
 		text: gettext('Shutdown'),
-		icon: '/pve2/images/stop.png',
+		iconCls: 'fa fa-fw fa-power-off',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('vzshutdown', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -86,7 +86,7 @@ Ext.define('PVE.lxc.CmdMenu', {
 	    },
 	    {
 		text: gettext('Stop'),
-		icon: '/pve2/images/gtk-stop.png',
+		iconCls: 'fa fa-fw fa-stop',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('vzstop', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -120,7 +120,7 @@ Ext.define('PVE.lxc.CmdMenu', {
 //	    },
 	    {
 		text: gettext('Console'),
-		icon: '/pve2/images/display.png',
+		iconCls: 'fa fa-fw fa-terminal',
 		handler: function() {
 		    PVE.Utils.openDefaultConsoleWindow(true, 'lxc', vmid, nodename, vmname);
 		}
diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index db98f71..5e09064 100644
--- a/www/manager6/lxc/Config.js
+++ b/www/manager6/lxc/Config.js
@@ -43,7 +43,8 @@ Ext.define('PVE.lxc.Config', {
 	    disabled: !caps.vms['VM.PowerMgmt'],
 	    handler: function() {
 		vm_command('start');
-	    }
+	    },
+	    iconCls: 'fa fa-play'
 	});
 
 	var umountBtn = Ext.create('Ext.Button', {
@@ -62,7 +63,8 @@ Ext.define('PVE.lxc.Config', {
 	    dangerous: true,
 	    handler: function() {
 		vm_command("stop");
-	    }
+	    },
+	    iconCls: 'fa fa-stop'
 	});
 
 	var shutdownBtn = Ext.create('PVE.button.Split', {
@@ -74,7 +76,8 @@ Ext.define('PVE.lxc.Config', {
 	    },
 	    menu: {
 		items:[stopBtn]
-	    }
+	    },
+	    iconCls: 'fa fa-power-off'
 	});
 
 	var migrateBtn = Ext.create('Ext.Button', {
@@ -87,7 +90,8 @@ Ext.define('PVE.lxc.Config', {
 		    vmid: vmid
 		});
 		win.show();
-	    }
+	    },
+	    iconCls: 'fa fa-send-o'
 	});
 
 	var removeBtn = Ext.create('PVE.button.Button', {
@@ -98,7 +102,8 @@ Ext.define('PVE.lxc.Config', {
 		    url: base_url,
 		    item: { type: 'CT', id: vmid }
 		}).show();
-	    }
+	    },
+	    iconCls: 'fa fa-trash-o'
 	});
 
 	var vmname = me.pveSelNode.data.name;
@@ -108,7 +113,8 @@ Ext.define('PVE.lxc.Config', {
 	    consoleType: 'lxc',
 	    consoleName: vmname,
 	    nodename: nodename,
-	    vmid: vmid
+	    vmid: vmid,
+	    iconCls: 'fa fa-terminal'
 	});
 
 	var descr = vmid + " (" + (vmname ? "'" + vmname + "' " : "'CT " + vmid + "'") + ")";
diff --git a/www/manager6/node/Config.js b/www/manager6/node/Config.js
index c770e8c..79a8f9b 100644
--- a/www/manager6/node/Config.js
+++ b/www/manager6/node/Config.js
@@ -36,7 +36,8 @@ Ext.define('PVE.node.Config', {
 		items: [
 		    {
 			text: gettext('Start all VMs and Containers'),
-			icon: '/pve2/images/start.png',
+			text: gettext('Start All VMs'),
+			iconCls: 'fa fa-fw fa-play',
 			handler: function() {
 			    var msg = gettext('Start all VMs and Containers') + ' (' + gettext('Node') + " '" + nodename + "')";
 			    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -57,7 +58,7 @@ Ext.define('PVE.node.Config', {
 		    },
 		    {
 			text: gettext('Stop all VMs and Containers'),
-			icon: '/pve2/images/gtk-stop.png',
+			iconCls: 'fa fa-fw fa-stop fa-red',
 			handler: function() {
 			    var msg = gettext('Stop all VMs and Containers') + ' (' + gettext('Node') + " '" + nodename + "')";
 			    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -78,7 +79,7 @@ Ext.define('PVE.node.Config', {
 		    },
 		    {
 			text: gettext('Migrate all VMs and Containers'),
-			icon: '/pve2/images/forward.png',
+			iconCls: 'fa fa-fw fa-send-o',
 			handler: function() {
 			    var win = Ext.create('PVE.window.MigrateAll', {
 				nodename: nodename,
@@ -96,7 +97,8 @@ Ext.define('PVE.node.Config', {
 	    confirmMsg: gettext('Node') + " '" + nodename + "' - " + gettext('Restart'),
 	    handler: function() {
 		node_command('reboot');
-	    }
+	    },
+	    iconCls: 'fa fa-undo'
 	});
 
 	var shutdownBtn = Ext.create('PVE.button.Button', {
@@ -105,14 +107,16 @@ Ext.define('PVE.node.Config', {
 	    confirmMsg: gettext('Node') + " '" + nodename + "' - " + gettext('Shutdown'),
 	    handler: function() {
 		node_command('shutdown');
-	    }
+	    },
+	    iconCls: 'fa fa-power-off'
 	});
 
 	var shellBtn = Ext.create('PVE.button.ConsoleButton', {
 	    disabled: !caps.nodes['Sys.Console'],
 	    text: gettext('Shell'),
 	    consoleType: 'shell',
-	    nodename: nodename
+	    nodename: nodename,
+		iconCls: 'fa fa-terminal'
 	});
 
 	me.items = [];
diff --git a/www/manager6/qemu/CmdMenu.js b/www/manager6/qemu/CmdMenu.js
index 7e9140b..864060b 100644
--- a/www/manager6/qemu/CmdMenu.js
+++ b/www/manager6/qemu/CmdMenu.js
@@ -32,14 +32,14 @@ Ext.define('PVE.qemu.CmdMenu', {
 	me.items = [
 	    {
 		text: gettext('Start'),
-		icon: '/pve2/images/start.png',
+		iconCls: 'fa fa-fw fa-play',
 		handler: function() {
 		    vm_command('start');
 		}
 	    },
 	    { 
 		text: gettext('Migrate'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-send-o',
 		handler: function() {
 		    var win = Ext.create('PVE.window.Migrate', {
 			vmtype: 'qemu',
@@ -51,7 +51,7 @@ Ext.define('PVE.qemu.CmdMenu', {
 	    },
 	    {
 		text: gettext('Suspend'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-pause',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('qmsuspend', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -64,14 +64,14 @@ Ext.define('PVE.qemu.CmdMenu', {
 	    },
 	    {
 		text: gettext('Resume'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-play',
 		handler: function() {
 		    vm_command('resume');
 		}
 	    },
 	    {
 		text: gettext('Shutdown'),
-		icon: '/pve2/images/stop.png',
+		iconCls: 'fa fa-fw fa-power-off',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('qmshutdown', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -85,7 +85,7 @@ Ext.define('PVE.qemu.CmdMenu', {
 	    },
 	    {
 		text: gettext('Stop'),
-		icon: '/pve2/images/gtk-stop.png',
+		iconCls: 'fa fa-fw fa-stop',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('qmstop', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -99,7 +99,7 @@ Ext.define('PVE.qemu.CmdMenu', {
 	    },
 	    {
 		text: gettext('Clone'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-clone',
 		handler: function() {
 		    var win = Ext.create('PVE.window.Clone', {
 			nodename: nodename,
@@ -110,7 +110,7 @@ Ext.define('PVE.qemu.CmdMenu', {
 	    },
 	    {
 		text: gettext('Convert to template'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-sticky-note-o',
 		handler: function() {
 		    var msg = PVE.Utils.format_task_description('qmtemplate', vmid);
 		    Ext.Msg.confirm(gettext('Confirm'), msg, function(btn) {
@@ -130,7 +130,7 @@ Ext.define('PVE.qemu.CmdMenu', {
 	    },
 	    {
 		text: gettext('Console'),
-		icon: '/pve2/images/display.png',
+		iconCls: 'fa fa-fw fa-terminal',
 		handler: function() {
 		    PVE.Utils.API2Request({
 			url: '/nodes/' + nodename + '/qemu/' + vmid + '/status/current',
diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index 0f74a4f..303fdef 100644
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -44,7 +44,8 @@ Ext.define('PVE.qemu.Config', {
 	    hidden: true,
 	    handler: function() {
 		vm_command('resume');
-	    }
+	    },
+	    iconCls: 'fa fa-play'
 	});
 
 	var startBtn = Ext.create('Ext.Button', {
@@ -52,7 +53,8 @@ Ext.define('PVE.qemu.Config', {
 	    disabled: !caps.vms['VM.PowerMgmt'],
 	    handler: function() {
 		vm_command('start');
-	    }
+	    },
+	    iconCls: 'fa fa-play',
 	});
 
 	var migrateBtn = Ext.create('Ext.Button', {
@@ -65,7 +67,8 @@ Ext.define('PVE.qemu.Config', {
 		    vmid: vmid
 		});
 		win.show();
-	    }
+	    },
+	    iconCls: 'fa fa-send-o'
 	});
 
 	var resetBtn = Ext.create('PVE.button.Button', {
@@ -74,7 +77,8 @@ Ext.define('PVE.qemu.Config', {
 	    confirmMsg: PVE.Utils.format_task_description('qmreset', vmid),
 	    handler: function() {
 		vm_command("reset");
-	    }
+	    },
+	    iconCls: 'fa fa-bolt'
 	});
 
 	var shutdownBtn = Ext.create('PVE.button.Split', {
@@ -92,9 +96,11 @@ Ext.define('PVE.qemu.Config', {
 		    confirmMsg: PVE.Utils.format_task_description('qmstop', vmid),
 		    handler: function() {
 			vm_command("stop", { timeout: 30 });
-		    }
+		    },
+		    iconCls: 'fa fa-stop',
 		}]
-	    }
+	    },
+	    iconCls: 'fa fa-power-off'
 	});
 
 	var removeBtn = Ext.create('PVE.button.Button', {
@@ -105,7 +111,8 @@ Ext.define('PVE.qemu.Config', {
 		    url: base_url,
 		    item: { type: 'VM', id: vmid }
 		}).show();
-	    }
+	    },
+	    iconCls: 'fa fa-trash-o'
 	});
 
 	var vmname = me.pveSelNode.data.name;
@@ -115,7 +122,8 @@ Ext.define('PVE.qemu.Config', {
 	    consoleType: 'kvm',
 	    consoleName: vmname,
 	    nodename: nodename,
-	    vmid: vmid
+	    vmid: vmid,
+	    iconCls: 'fa fa-terminal'
 	});
 
 	var descr = vmid + " (" + (vmname ? "'" + vmname + "' " : "'VM " + vmid + "'") + ")";
diff --git a/www/manager6/qemu/TemplateMenu.js b/www/manager6/qemu/TemplateMenu.js
index 8c9be92..6bcf87e 100644
--- a/www/manager6/qemu/TemplateMenu.js
+++ b/www/manager6/qemu/TemplateMenu.js
@@ -34,7 +34,7 @@ Ext.define('PVE.qemu.TemplateMenu', {
 	me.items = [
 	    {
 		text: gettext('Migrate'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-send-o',
 		handler: function() {
 		    var win = Ext.create('PVE.window.Migrate', {
 			vmtype: 'qemu',
@@ -46,7 +46,7 @@ Ext.define('PVE.qemu.TemplateMenu', {
 	    },
 	    {
 		text: gettext('Clone'),
-		icon: '/pve2/images/forward.png',
+		iconCls: 'fa fa-fw fa-clone',
 		handler: function() {
 		    var win = Ext.create('PVE.window.Clone', {
 			nodename: nodename,
-- 
2.1.4





More information about the pve-devel mailing list