mirror of https://github.com/apache/cloudstack.git
CloudStack Marketplace Basic Prototype and Directory Structure
This commit is contained in:
Pranav Saxena
parent
41dd38c86b
commit
0eb5322454
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
|
|
@ -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));
|
||||
|
||||
|
|
@ -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));
|
||||
Loading…
Reference in New Issue