cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject [1/2] git commit: Add/style basic plugin listing
Date Wed, 19 Dec 2012 23:05:04 GMT
Updated Branches:
  refs/heads/ui-plugins bd9bedac8 -> f0a6e86e1


Add/style basic plugin listing


Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/f0a6e86e
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/f0a6e86e
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/f0a6e86e

Branch: refs/heads/ui-plugins
Commit: f0a6e86e142610d3973afe3cd9230da59aa2a27b
Parents: 11dbab0
Author: Brian Federle <brian.federle@citrix.com>
Authored: Wed Dec 19 15:04:47 2012 -0800
Committer: Brian Federle <brian.federle@citrix.com>
Committed: Wed Dec 19 15:04:47 2012 -0800

----------------------------------------------------------------------
 ui/css/cloudstack3.css          |   58 ++++++++++++++++++++++++++++++++++
 ui/images/sprites.png           |  Bin 180485 -> 182811 bytes
 ui/index.jsp                    |    4 ++
 ui/plugins/plugins.js           |    6 +++
 ui/scripts/plugins.js           |    4 +--
 ui/scripts/ui-custom/plugins.js |   54 +++++++++++++++++++++++++++++++
 6 files changed, 123 insertions(+), 3 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/f0a6e86e/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 9d5cc44..23353ce 100644
--- a/ui/css/cloudstack3.css
+++ b/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;

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/f0a6e86e/ui/images/sprites.png
----------------------------------------------------------------------
diff --git a/ui/images/sprites.png b/ui/images/sprites.png
index a3ad9e4..ba4ae45 100644
Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/f0a6e86e/ui/index.jsp
----------------------------------------------------------------------
diff --git a/ui/index.jsp b/ui/index.jsp
index bb22086..b78d623 100644
--- a/ui/index.jsp
+++ b/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" />

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/f0a6e86e/ui/plugins/plugins.js
----------------------------------------------------------------------
diff --git a/ui/plugins/plugins.js b/ui/plugins/plugins.js
new file mode 100644
index 0000000..6717f8d
--- /dev/null
+++ b/ui/plugins/plugins.js
@@ -0,0 +1,6 @@
+(function($, cloudStack) {
+  cloudStack.plugins = [
+    'testPlugin1',
+    'testPlugin2'
+  ];
+}(jQuery, cloudStack));

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/f0a6e86e/ui/scripts/plugins.js
----------------------------------------------------------------------
diff --git a/ui/scripts/plugins.js b/ui/scripts/plugins.js
index 336fd92..91de056 100644
--- a/ui/scripts/plugins.js
+++ b/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));

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/f0a6e86e/ui/scripts/ui-custom/plugins.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/plugins.js b/ui/scripts/ui-custom/plugins.js
new file mode 100644
index 0000000..8c2cffc
--- /dev/null
+++ b/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)); 


Mime
View raw message