Updated Branches: refs/heads/marketplace-prototype [created] 0eb532245
CloudStack Marketplace Basic Prototype and Directory Structure Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/0eb53224 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/0eb53224 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/0eb53224 Branch: refs/heads/marketplace-prototype Commit: 0eb53224540feb4976ec24e2237f221c87ce7e4f Parents: 41dd38c Author: Pranav Saxena <[email protected]> Authored: Thu Dec 13 04:55:06 2012 +0530 Committer: Pranav Saxena <[email protected]> Committed: Thu Dec 13 04:55:06 2012 +0530 ---------------------------------------------------------------------- ui/css/marketplace.css | 260 +++++++++++++++++++++++++++ ui/index.jsp | 4 + ui/marketplace/apps/testApp1/config.js | 10 + ui/marketplace/config.js | 19 ++ ui/scripts/ui-custom/marketplace.js | 150 +++++++++++++++ 5 files changed, 443 insertions(+), 0 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/css/marketplace.css ---------------------------------------------------------------------- diff --git a/ui/css/marketplace.css b/ui/css/marketplace.css new file mode 100644 index 0000000..e64d6df --- /dev/null +++ b/ui/css/marketplace.css @@ -0,0 +1,260 @@ +.buttons +{ + width: 88px; + height: 16px; + padding: 11px 0 8px; + float: left; + padding-right: 3px; + padding-top: 10px; + margin-right: 80px; + text-align: center; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + border: 1px solid #78818F; + cursor: pointer; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.button-application +{ + width: 819px; + height: 16px; + background-color: #808080; + color: #FFFFFF; + text-align: center; + margin-top: -37px; + margin-left: 203px; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: pointer; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.button-category +{ + width: 200px; + text-align: center; + background-color: #808080; + color: #FFFFFF; + height: 16px; + background-color: #808080; + color: #FFFFFF; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: pointer; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.list-panel +{ + width: 200px; + height: 160px; + background-color: #808080; + color: #0000FF; + text-align: center; + margin-top: 1px; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: default; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.contribute-list-panel +{ + width: 200px; + height: 160px; + background-color: #FFFFFF; + color: #000000; + text-align: center; + margin-top: 1px; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: default; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.main-panel +{ + width: 819px; + height: 670px; + background-color: #808080; + color: #0000FF; + float: right; + text-align: center; + margin-top: -180px; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: default; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.app-content-detail-view { + width: 1020px; + height: 670px; + background-color: #F2F2F2 ; + color: #0000FF; + float: left; + margin-top:1px; + text-align: center; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: default; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + + + +} + +.footer-panel +{ + width: 819px; + height: 15px; + background-color: #808080; + color: #FFFFFF; + float: right; + margin-top: -35px; + text-align: left; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: default; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.main-panel .login-panel +{ + width: 200px; + height: 150px; + margin-left: 50px; + margin-top: 20px; + margin-bottom: 20px; + float: left; + background-color: #FFFFFF; + color: #000000; + text-align: left; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + -moz-box-shadow: 0px 3px 3px #FFFFFF; + box-shadow: 0px 3px 3px #FFFFFF; + border: 1px solid #78818F; + cursor: default; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} +.main-panel .login-panel .thumbnail +{ + width: 152px; + height: 113px; + margin: auto; + background: no-repeat 0 0; +} http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/index.jsp ---------------------------------------------------------------------- diff --git a/ui/index.jsp b/ui/index.jsp index a9b83e6..1de54ab 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -31,6 +31,7 @@ under the License. <title></title> <link type="text/css" rel="stylesheet" href="lib/reset.css"/> <link type="text/css" rel="stylesheet" href="css/cloudstack3.css" /> + <link type="text/css" rel="stylesheet" href="css/marketplace.css" /> <c:if test="${!empty cookie.lang && cookie.lang.value != 'en'}"> <link type="text/css" rel="stylesheet" href="css/cloudstack3.${cookie.lang.value}.css" /> </c:if> @@ -1673,6 +1674,9 @@ 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/marketplace.js"></script> + <script type="text/javascript" src="marketplace/config.js" ></script> + </body> </html> <jsp:include page="dictionary.jsp" /> http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp1/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp1/config.js b/ui/marketplace/apps/testApp1/config.js new file mode 100644 index 0000000..fe90fbb --- /dev/null +++ b/ui/marketplace/apps/testApp1/config.js @@ -0,0 +1,10 @@ +(function(cloudStack) { + cloudStack.marketplace.apps.testApp1 = { + title: 'VM Creation', + vendor: 'Vendor 1', + desc: 'Desc', + supportDesc: 'Support desc', + supportContact: '[email protected]' + }; +}(cloudStack)); + http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp2/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp2/config.js b/ui/marketplace/apps/testApp2/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp3/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp3/config.js b/ui/marketplace/apps/testApp3/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp4/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp4/config.js b/ui/marketplace/apps/testApp4/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp5/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp5/config.js b/ui/marketplace/apps/testApp5/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp6/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp6/config.js b/ui/marketplace/apps/testApp6/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp7/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp7/config.js b/ui/marketplace/apps/testApp7/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp8/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp8/config.js b/ui/marketplace/apps/testApp8/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/apps/testApp9/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/apps/testApp9/config.js b/ui/marketplace/apps/testApp9/config.js new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/marketplace/config.js ---------------------------------------------------------------------- diff --git a/ui/marketplace/config.js b/ui/marketplace/config.js new file mode 100644 index 0000000..a761ca7 --- /dev/null +++ b/ui/marketplace/config.js @@ -0,0 +1,19 @@ +(function(cloudStack) { + // Dummy app data + cloudStack.marketplace = { + baseURL: 'file:///home/pranav/ui-cloudstack/cloud-ui-demo/public/marketplace', + apps: { + 'testApp1': {}, + 'testApp2': {}, + 'testApp3': {}, + 'testApp4': {}, + 'testApp5': {}, + 'testApp6': {}, + 'testApp7': {}, + 'testApp8': {}, + 'testApp9': {} + } + }; + +}(cloudStack)); + http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/0eb53224/ui/scripts/ui-custom/marketplace.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/marketplace.js b/ui/scripts/ui-custom/marketplace.js new file mode 100644 index 0000000..bd04637 --- /dev/null +++ b/ui/scripts/ui-custom/marketplace.js @@ -0,0 +1,150 @@ +(function($, cloudStack) { + var elems = { + // Side navigation bar + navigation: function() { + var $navigation = $('<div>').addClass('main-navigation'); + var $categories=$('<div>').addClass('button-category').html('CATEGORIES'); + + $categories.appendTo($navigation); + + // $navigation.html('Navigation'); + + return $navigation; + }, + + // Listing 'tile' container + listing: function() { + var $listing = $('<div>').addClass('listing'); + var $categories=$('<div>').addClass('button-application').html('APPLICATIONS'); + var apps = cloudStack.marketplace.apps; + + $categories.appendTo($listing); + + // $listing.html('Listing area'); + var $listPanel = $('<div>').addClass('list-panel').html('Application Development').hide(); + $listPanel.appendTo($listing); + var $listPanel2 = $('<div>').addClass('list-panel').html('Operations Management').hide(); + $listPanel2.appendTo($listing); + var $listPanel3 = $('<div>').addClass('list-panel').html('Business Applications').hide(); + $listPanel3.appendTo($listing); + var $contributePanel = $('<div>').addClass('contribute-list-panel').html('WOULD YOU LIKE TO <b></b>CONTRIBUTE ?'); + $contributePanel.appendTo($listing); + var $mainPanel = $('<div>').addClass('main-panel'); + $mainPanel.appendTo($listing); + var $panelFooter = $('<div>').addClass('footer-panel').html('  CloudStack 2012'); + $panelFooter.appendTo($listing); + + $.each(apps, function(key, value) { + var appID = key; + var app = value; + var $miniPanel = $('<div>').addClass('login-panel'); + var $thumbnail = $('<div>').addClass('thumbnail'); + var thumbnailURL = 'url(' + cloudStack.marketplace.baseURL + '/apps/' + appID + '/images/thumbnail.png)'; + var configURL = cloudStack.marketplace.baseURL + '/apps/' + appID + '/config.js'; + + $miniPanel.addClass(appID); + $miniPanel.appendTo($mainPanel); + $thumbnail.css({ + 'background-image': thumbnailURL + }); + $thumbnail.appendTo($miniPanel); + + $thumbnail.click(function() { + require([configURL], function() { + // fade-out main panel + $listing.fadeOut(function() { + var appConfig = cloudStack.marketplace.apps[appID]; + //debugger; + // show detail panel + var $detailView = $('<div>').addClass('app-content-detail-view'); + $detailView.appendTo('.marketplace-container'); + $detailView.show(); + $detailView.append($('<div>').addClass('config-title').append(appConfig.title).append("<br></br>")); + $detailView.append($('<div>').addClass('config-vendor').append(appConfig.vendor).append("<br></br>")); + $detailView.append($('<div>').addClass('config-desc').append(appConfig.desc).append("<br></br>")); + $detailView.append($('<div>').addClass('config-support-desc').append(appConfig.supportDesc).append("<br></br>")); + $detailView.append($('<div>').addClass('config-support-contact').append(appConfig.supportContact)); + + /* $.each(appConfig,function(key,value) { + $detailView.append(value).append("<br></br>"); + + });*/ + + }); + }); + }); + }); + + return $listing; + }, + + // Container for marketplace body + // -- holds the navigation and listing area + marketplace: function() { + var $marketplace = $('<div>').addClass('marketplace-container'); + var $navigation = elems.navigation(); + var $listing = elems.listing(); + + $marketplace.append($navigation, $listing); + + return $marketplace; + }, + + sectionSwitcher: function() { + var $switcher = $('<div>').addClass('section-switcher'); + var $applications = $('<div>').addClass('buttons').html('Applications'); + var $templates = $('<div>').addClass('buttons').html('Templates'); + var $isos = $('<div>').addClass('buttons').html('ISOs'); + + $applications.appendTo($switcher); + $templates.appendTo($switcher); + $isos.appendTo($switcher); + + // Append buttons + // ... + + return $switcher; + } + }; + + // Replace header items with marketplace-specific ones + var updateHeader = function(args) { + var $header = args.$header.clone(); + var $marketplaceSections = elems.sectionSwitcher(); + var $buttons = $header.find('.button'); // Notifications and project switcher + + // Hide buttons, show marketplace switcher in place + $buttons + .hide() + .filter(':last') + .after($marketplaceSections); + + $header.addClass('marketplace'); // Logo CSS will show different logo if .marketplace is present + + return $header; + }; + + cloudStack.uiCustom.marketplace = function(args) { + var $header = $('#header'); + var $marketplaceHeader = updateHeader({ + $header: $header + }); + var $container = $('#browser'); + var $navigation = $('#navigation'); + var $marketplace = elems.marketplace(); + + // Update header + $header.replaceWith($marketplaceHeader); + + // Replace CloudStack main UI + $marketplace.hide(); + $navigation.fadeOut(); + $container.fadeOut(function() { + $container.after($marketplace); + $marketplace.show(); + }); + + // Dummy placeholder + return $('<div>'); + }; +}(jQuery, cloudStack));
