From 0eb53224540feb4976ec24e2237f221c87ce7e4f Mon Sep 17 00:00:00 2001 From: Pranav Saxena Date: Thu, 13 Dec 2012 04:55:06 +0530 Subject: [PATCH] CloudStack Marketplace Basic Prototype and Directory Structure --- ui/css/marketplace.css | 260 +++++++++++++++++++++++++ ui/index.jsp | 4 + ui/marketplace/apps/testApp1/config.js | 10 + ui/marketplace/apps/testApp2/config.js | 0 ui/marketplace/apps/testApp3/config.js | 0 ui/marketplace/apps/testApp4/config.js | 0 ui/marketplace/apps/testApp5/config.js | 0 ui/marketplace/apps/testApp6/config.js | 0 ui/marketplace/apps/testApp7/config.js | 0 ui/marketplace/apps/testApp8/config.js | 0 ui/marketplace/apps/testApp9/config.js | 0 ui/marketplace/config.js | 19 ++ ui/scripts/ui-custom/marketplace.js | 150 ++++++++++++++ 13 files changed, 443 insertions(+) create mode 100644 ui/css/marketplace.css create mode 100644 ui/marketplace/apps/testApp1/config.js create mode 100644 ui/marketplace/apps/testApp2/config.js create mode 100644 ui/marketplace/apps/testApp3/config.js create mode 100644 ui/marketplace/apps/testApp4/config.js create mode 100644 ui/marketplace/apps/testApp5/config.js create mode 100644 ui/marketplace/apps/testApp6/config.js create mode 100644 ui/marketplace/apps/testApp7/config.js create mode 100644 ui/marketplace/apps/testApp8/config.js create mode 100644 ui/marketplace/apps/testApp9/config.js create mode 100644 ui/marketplace/config.js create mode 100644 ui/scripts/ui-custom/marketplace.js diff --git a/ui/css/marketplace.css b/ui/css/marketplace.css new file mode 100644 index 00000000000..e64d6dfaeea --- /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; +} diff --git a/ui/index.jsp b/ui/index.jsp index a9b83e6fdd5..1de54abfa78 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -31,6 +31,7 @@ under the License. + @@ -1673,6 +1674,9 @@ under the License. + + + diff --git a/ui/marketplace/apps/testApp1/config.js b/ui/marketplace/apps/testApp1/config.js new file mode 100644 index 00000000000..fe90fbb65dc --- /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: 'support@example.com' + }; +}(cloudStack)); + diff --git a/ui/marketplace/apps/testApp2/config.js b/ui/marketplace/apps/testApp2/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp3/config.js b/ui/marketplace/apps/testApp3/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp4/config.js b/ui/marketplace/apps/testApp4/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp5/config.js b/ui/marketplace/apps/testApp5/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp6/config.js b/ui/marketplace/apps/testApp6/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp7/config.js b/ui/marketplace/apps/testApp7/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp8/config.js b/ui/marketplace/apps/testApp8/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/apps/testApp9/config.js b/ui/marketplace/apps/testApp9/config.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/marketplace/config.js b/ui/marketplace/config.js new file mode 100644 index 00000000000..a761ca7aabb --- /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)); + diff --git a/ui/scripts/ui-custom/marketplace.js b/ui/scripts/ui-custom/marketplace.js new file mode 100644 index 00000000000..bd046370e1f --- /dev/null +++ b/ui/scripts/ui-custom/marketplace.js @@ -0,0 +1,150 @@ +(function($, cloudStack) { + var elems = { + // Side navigation bar + navigation: function() { + var $navigation = $('
').addClass('main-navigation'); + var $categories=$('
').addClass('button-category').html('CATEGORIES'); + + $categories.appendTo($navigation); + + // $navigation.html('Navigation'); + + return $navigation; + }, + + // Listing 'tile' container + listing: function() { + var $listing = $('
').addClass('listing'); + var $categories=$('
').addClass('button-application').html('APPLICATIONS'); + var apps = cloudStack.marketplace.apps; + + $categories.appendTo($listing); + + // $listing.html('Listing area'); + var $listPanel = $('
').addClass('list-panel').html('Application Development').hide(); + $listPanel.appendTo($listing); + var $listPanel2 = $('
').addClass('list-panel').html('Operations Management').hide(); + $listPanel2.appendTo($listing); + var $listPanel3 = $('
').addClass('list-panel').html('Business Applications').hide(); + $listPanel3.appendTo($listing); + var $contributePanel = $('
').addClass('contribute-list-panel').html('WOULD YOU LIKE TO CONTRIBUTE ?'); + $contributePanel.appendTo($listing); + var $mainPanel = $('
').addClass('main-panel'); + $mainPanel.appendTo($listing); + var $panelFooter = $('
').addClass('footer-panel').html('  CloudStack 2012'); + $panelFooter.appendTo($listing); + + $.each(apps, function(key, value) { + var appID = key; + var app = value; + var $miniPanel = $('
').addClass('login-panel'); + var $thumbnail = $('
').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 = $('
').addClass('app-content-detail-view'); + $detailView.appendTo('.marketplace-container'); + $detailView.show(); + $detailView.append($('
').addClass('config-title').append(appConfig.title).append("

")); + $detailView.append($('
').addClass('config-vendor').append(appConfig.vendor).append("

")); + $detailView.append($('
').addClass('config-desc').append(appConfig.desc).append("

")); + $detailView.append($('
').addClass('config-support-desc').append(appConfig.supportDesc).append("

")); + $detailView.append($('
').addClass('config-support-contact').append(appConfig.supportContact)); + + /* $.each(appConfig,function(key,value) { + $detailView.append(value).append("

"); + + });*/ + + }); + }); + }); + }); + + return $listing; + }, + + // Container for marketplace body + // -- holds the navigation and listing area + marketplace: function() { + var $marketplace = $('
').addClass('marketplace-container'); + var $navigation = elems.navigation(); + var $listing = elems.listing(); + + $marketplace.append($navigation, $listing); + + return $marketplace; + }, + + sectionSwitcher: function() { + var $switcher = $('
').addClass('section-switcher'); + var $applications = $('
').addClass('buttons').html('Applications'); + var $templates = $('
').addClass('buttons').html('Templates'); + var $isos = $('
').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 $('
'); + }; +}(jQuery, cloudStack));