UI plugin: Show custom icon

Show custom icon '<pluginName>/icon.png' on side nav bar (if plugin
added new section), and on plugin listing.

ui/css/cloudstack3.css

@@ -2336,6 +2336,28 @@ div.detail-group.actions td {
   top: 18px;
 }
 
+#navigation ul li.custom-icon span.icon {
+  display: block;
+  width: 50px;
+  height: 50px;
+  position: relative;
+  float: left;
+  margin-right: -47px;
+  background: none;
+}
+
+#navigation ul li.custom-icon span.icon img {
+  width: 50px;
+  height: 50px;
+  float: left;
+  /*+placement:shift -6px -17px;*/
+  position: relative;
+  left: -6px;
+  top: -17px;
+  position: absolute;
+  margin-right: -14px;
+}
+
 #navigation ul li.last.active,
 #navigation ul li.last:hover {
   height: 52px;
@@ -10988,12 +11010,16 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 }
 
 .plugins-listing ul li .icon {
-  background: #BDBDBD;
   display: block;
-  width: 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   float: left;
-  margin: 13px 13px 13px 11px;
+  margin: 8px 13px 13px 11px;
+}
+
+.plugins-listing ul li .icon img {
+  width: 100%;
+  height: 100%;
 }
 
 /*Action icons*/

ui/scripts/plugins.js

@@ -13,7 +13,9 @@
 
   var pluginAPI = {
     addSection: function(section) {
-      cloudStack.sections[section.id] = section;
+      cloudStack.sections[section.id] = $.extend(section, {
+        customIcon: 'plugins/' + section.id + '/icon.png'
+      });
     },
     extend: function(obj) {
       $.extend(true, cloudStack, obj);

ui/scripts/ui-custom/plugins.js

@@ -4,10 +4,13 @@
       var id = args.id;
       var title = args.title;
       var desc = args.desc;
+      var iconURL = args.iconURL;
       var $pluginItem = $('<li>').addClass('plugin-item').addClass(id);
       var $title = $('<span>').addClass('title').html(title);
       var $desc = $('<span>').addClass('desc').html(desc);
-      var $icon = $('<span>').addClass('icon');
+      var $icon = $('<span>').addClass('icon').append(
+        $('<img>').attr({ src: iconURL })
+      );
 
       $pluginItem.append(
         $icon, $title, $desc
@@ -25,7 +28,8 @@
         var $plugin = elems.pluginItem({
           id: plugin.id,
           title: plugin.title,
-          desc: plugin.desc
+          desc: plugin.desc,
+          iconURL: 'plugins/' + plugin.id + '/icon.png'
         });
         var $browser = $('#browser .container');
 

ui/scripts/ui/core.js

@@ -45,6 +45,7 @@
         }
       }
 
+      
       var $li = $('<li>')
             .addClass('navigation-item')
             .addClass(sectionID)
@@ -52,6 +53,12 @@
             .append($('<span>').html(_l(args.title)))
             .data('cloudStack-section-id', sectionID);
 
+      if (args.customIcon) {
+        $li.addClass('custom-icon').find('span.icon').html('').append(
+          $('<img>').attr({ src: args.customIcon })
+        );
+      }
+
       $li.appendTo($navList);
 
       return true;