Add/style basic plugin listing

ui/css/cloudstack3.css

@@ -2395,6 +2395,10 @@ div.detail-group.actions td {
   background-position: -519px -24px;
 }
 
+#navigation ul li.plugins span.icon {
+  background: url(../images/sprites.png) no-repeat -140px -291px;
+}
+
 /*Browser*/
 #browser {
   width: 794px;
@@ -10914,6 +10918,60 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
   font-size: 11px;
 }
 
+/*Plugins listing*/
+.plugins-listing {
+}
+
+.plugins-listing ul {
+  width: 100%;
+}
+
+.plugins-listing ul li {
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  /*+box-shadow:0px 2px 6px #D3D3D3;*/
+  -moz-box-shadow: 0px 2px 6px #D3D3D3;
+  -webkit-box-shadow: 0px 2px 6px #D3D3D3;
+  -o-box-shadow: 0px 2px 6px #D3D3D3;
+  box-shadow: 0px 2px 6px #D3D3D3;
+  border: 1px solid #A8A3A3;
+  background: url(../images/bg-gradients.png) 0px -29px;
+  width: 98%;
+  height: 66px;
+  margin: 9px auto 12px;
+}
+
+.plugins-listing ul li .title {
+  display: block;
+  float: left;
+  width: 90%;
+  font-weight: bold;
+  /*+text-shadow:0px 1px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px 1px 1px #FFFFFF;
+  -webkit-text-shadow: 0px 1px 1px #FFFFFF;
+  -o-text-shadow: 0px 1px 1px #FFFFFF;
+  text-shadow: 0px 1px 1px #FFFFFF;
+  color: #4A5A6A;
+  margin: 13px 0 7px;
+}
+
+.plugins-listing ul li .desc {
+  color: #524E4E;
+  font-size: 13px;
+}
+
+.plugins-listing ul li .icon {
+  background: #BDBDBD;
+  display: block;
+  width: 40px;
+  height: 40px;
+  float: left;
+  margin: 13px 13px 13px 11px;
+}
+
 /*Action icons*/
 .action.edit .icon {
   background-position: 1px -1px;

ui/index.jsp

@@ -1673,7 +1673,11 @@ under the License.
     <script type="text/javascript" src="scripts/system.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/domains.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/docs.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/ui-custom/plugins.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/plugins.js?t=<%=now%>"></script>
+
+    <!-- Plugin listing -->
+    <script type="text/javascript" src="plugins/plugins.js?t=<%=now%>"></script>
   </body>
 </html>
 <jsp:include page="dictionary.jsp" />

ui/plugins/plugins.js

@@ -0,0 +1,6 @@
+(function($, cloudStack) {
+  cloudStack.plugins = [
+    'testPlugin1',
+    'testPlugin2'
+  ];
+}(jQuery, cloudStack));

ui/scripts/plugins.js

@@ -1,8 +1,6 @@
 (function($, cloudStack) {
   cloudStack.sections.plugins = {
     title: 'Plugins',
-    show: function(args) {
-      return $('<div>').html('Plugins');
-    }
+    show: cloudStack.uiCustom.plugins
   }
 }(jQuery, cloudStack));

ui/scripts/ui-custom/plugins.js

@@ -0,0 +1,54 @@
+(function($, cloudStack) {
+  var elems = {
+    pluginItem: function(args) {
+      var id = args.id;
+      var title = args.title;
+      var desc = args.desc;
+      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');
+
+      $pluginItem.append(
+        $icon, $title, $desc
+      );
+
+      return $pluginItem;
+    },
+    pluginListing: function(args) {
+      var plugins = args.plugins;
+      var $plugins = $('<ul>');
+      var $pluginsListing = $('<div>').addClass('plugins-listing');
+
+      $(plugins).each(function() {
+        var plugin = this;
+
+        elems.pluginItem({
+          id: plugin.id,
+          title: plugin.title,
+          desc: plugin.desc
+        }).appendTo($plugins);
+      });
+
+      $pluginsListing.append($plugins);
+
+      return $pluginsListing;
+    }
+  };
+
+  cloudStack.uiCustom.plugins = function() {
+    var plugins = cloudStack.plugins;
+
+    return elems.pluginListing({
+      plugins: $(plugins).map(function(index, plugin) {
+        plugin = plugin.toString();
+
+        return {
+          id: plugin,
+          title: plugin,
+          desc: plugin + 'Description'
+        };
+      })
+    });
+  };
+}(jQuery, cloudStack));