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/master Commit: f0a6e86e142610d3973afe3cd9230da59aa2a27b Parents: 11dbab0 Author: Brian Federle <[email protected]> Authored: Wed Dec 19 15:04:47 2012 -0800 Committer: Brian Federle <[email protected]> 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));
