You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2012/12/20 00:05:04 UTC
[1/2] git commit: Add/style basic plugin listing
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 <br...@citrix.com>
Authored: Wed Dec 19 15:04:47 2012 -0800
Committer: Brian Federle <br...@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));