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 2013/02/27 00:55:30 UTC
git commit: refs/heads/ui-regions - Regions UI: Move to separate
source file, add real data, update style
Updated Branches:
refs/heads/ui-regions 84b73b979 -> b9a459c24
Regions UI: Move to separate source file, add real data, update style
-Move region UI code to ui-custom/regions.js, to separate from core UI
rendering
-Pull real data and endpoint URL on region select list, from data
provider in scripts/regions.js
-Make region selector have same appearance as notifications box
Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/b9a459c2
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/b9a459c2
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/b9a459c2
Branch: refs/heads/ui-regions
Commit: b9a459c24d9fb561e1d64abec606656e899d6482
Parents: 84b73b9
Author: Brian Federle <br...@citrix.com>
Authored: Tue Feb 26 15:53:34 2013 -0800
Committer: Brian Federle <br...@citrix.com>
Committed: Tue Feb 26 15:55:02 2013 -0800
----------------------------------------------------------------------
ui/css/cloudstack3.css | 60 +++++++++-------------
ui/index.jsp | 1 +
ui/scripts/regions.js | 14 +++++
ui/scripts/ui-custom/regions.js | 90 ++++++++++++++++++++++++++++++++++
ui/scripts/ui/core.js | 75 ++--------------------------
5 files changed, 134 insertions(+), 106 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/b9a459c2/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index d1166dc..fb45d2c 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -11102,29 +11102,28 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
- width: 281px;
- background: #E4E4E4;
- height: 327px;
- /*+placement:shift 72px 49px;*/
+ width: 318px;
+ background: url(../images/bg-notifications.png) center;
+ height: 372px;
+ /*+placement:shift 321px 49px;*/
position: relative;
- left: 72px;
+ left: 321px;
top: 49px;
position: absolute;
z-index: 1000;
- /*+box-shadow:0px 3px 11px #171717;*/
- -moz-box-shadow: 0px 3px 11px #171717;
- -webkit-box-shadow: 0px 3px 11px #171717;
- -o-box-shadow: 0px 3px 11px #171717;
- box-shadow: 0px 3px 11px #171717;
}
.region-selector h2 {
- color: #283139;
- text-shadow: 0px 1px 3px #FFFFFF;
- margin: 5px 0 12px;
+ color: #FFFFFF;
text-align: center;
+ font-size: 21px;
letter-spacing: 1px;
- font-size: 18px;
+ /*+text-shadow:0px 1px 2px #000000;*/
+ -moz-text-shadow: 0px 1px 2px #000000;
+ -webkit-text-shadow: 0px 1px 2px #000000;
+ -o-text-shadow: 0px 1px 2px #000000;
+ text-shadow: 0px 1px 2px #000000;
+ margin: 31px 0 14px;
}
.region-selector .buttons {
@@ -11134,16 +11133,16 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
}
.region-selector .buttons .button.close {
+ background: url(../images/gradients.png) 0px -317px;
float: right;
- cursor: pointer;
- background: url(../images/bg-gradients.png) 0px -270px;
+ margin-right: 10px;
+ border-bottom: 1px solid #232323;
/*+border-radius:4px;*/
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
- border: 1px solid #B1B1B1;
- padding: 8px 17px 8px 18px;
+ padding: 8px;
}
.region-selector .buttons .button.close:hover {
@@ -11155,16 +11154,17 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
}
.region-selector .buttons .button.close span {
- color: #636363;
- /*+text-shadow:none;*/
- -moz-text-shadow: none;
- -webkit-text-shadow: none;
- -o-text-shadow: none;
- text-shadow: none;
+ color: #FFFFFF;
+ font-weight: bold;
+ letter-spacing: 1px;
+ /*+text-shadow:0px 1px 2px #000000;*/
+ -moz-text-shadow: 0px 1px 2px #000000;
+ -webkit-text-shadow: 0px 1px 2px #000000;
+ -o-text-shadow: 0px 1px 2px #000000;
+ text-shadow: 0px 1px 2px #000000;
}
.region-selector .buttons .button.close:hover span {
- color: #000000;
}
.region-selector ul {
@@ -11212,16 +11212,6 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
text-shadow: 0px 1px #FFFFFF;
}
-.region-selector .top-arrow {
- width: 76px;
- height: 12px;
- background: url(../images/sprites.png) -107px -1312px;
- /*+placement:shift 78px -12px;*/
- position: relative;
- left: 78px;
- top: -12px;
-}
-
.region-switcher .icon {
display: block;
width: 100%;
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/b9a459c2/ui/index.jsp
----------------------------------------------------------------------
diff --git a/ui/index.jsp b/ui/index.jsp
index 1e0df9f..d1e6bfa 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -1657,6 +1657,7 @@ under the License.
<script type="text/javascript" src="scripts/instances.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/events.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/regions.js?t=<%=now%>"></script>
+ <script type="text/javascript" src="scripts/ui-custom/regions.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/ipRules.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/enableStaticNAT.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/securityRules.js?t=<%=now%>"></script>
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/b9a459c2/ui/scripts/regions.js
----------------------------------------------------------------------
diff --git a/ui/scripts/regions.js b/ui/scripts/regions.js
index 46f73da..ee77ac1 100644
--- a/ui/scripts/regions.js
+++ b/ui/scripts/regions.js
@@ -18,6 +18,20 @@
cloudStack.sections.regions = {
title: 'label.menu.regions',
id: 'regions',
+ regionSelector: {
+ dataProvider: function(args) {
+ $.ajax({
+ url: createURL('listRegions&listAll=true'),
+ success: function(json) {
+ var regions = json.listregionsresponse.region
+
+ args.response.success({
+ data: regions ? regions : []
+ });
+ }
+ });
+ }
+ },
listView: {
section: 'regions',
fields: {
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/b9a459c2/ui/scripts/ui-custom/regions.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/regions.js b/ui/scripts/ui-custom/regions.js
new file mode 100644
index 0000000..73b14a7
--- /dev/null
+++ b/ui/scripts/ui-custom/regions.js
@@ -0,0 +1,90 @@
+(function($, cloudStack) {
+ $(window).bind('cloudStack.ready', function() {
+ // Region switcher
+ var $regionList = $('<ul>');
+
+ // Get region listing
+ var refreshRegions = function() {
+ $regionList.find('li').remove();
+ cloudStack.sections.regions.regionSelector.dataProvider({
+ response: {
+ success: function(args) {
+ var data = args.data;
+
+ $(data).each(function() {
+ var region = this;
+ var $li = $('<li>').append($('<span>').html(_s(region.name)));
+
+ $li.data('region-data', region);
+ $regionList.append($li);
+ });
+ }
+ }
+ });
+ };
+
+ $(window).bind('cloudStack.refreshRegions', refreshRegions);
+
+ var $regionSelector = $('<div>').addClass('region-selector')
+ .append($('<div>').addClass('top-arrow'))
+ .append($('<h2>').html(_l('label.menu.regions')))
+ .append($regionList)
+ .append(
+ $('<div>').addClass('buttons')
+ .append(
+ $('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
+ )
+ )
+ .hide();
+ var $regionSwitcherButton = $('<div>').addClass('region-switcher')
+ .attr('title', 'Select region')
+ .append(
+ $('<span>').addClass('icon').html(' ')
+ );
+
+ var closeRegionSelector = function(args) {
+ $regionSwitcherButton.removeClass('active');
+ $regionSelector.fadeOut(args ? args.complete : null);
+ $('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
+ };
+
+ var switchRegion = function(url) {
+
+ closeRegionSelector({
+ complete: function() {
+ $('#container').prepend($('<div>').addClass('loading-overlay'));
+
+ document.location.href = url;
+ }
+ });
+ };
+
+ $regionList.click(function(event) {
+ var $target = $(event.target);
+ var $li = $target.closest('li');
+
+ if ($li.size()) {
+ var url = $li.data('region-data').endpoint;
+
+ switchRegion(url);
+ }
+ });
+
+ $regionSwitcherButton.click(function() {
+ if ($regionSwitcherButton.hasClass('active')) {
+ closeRegionSelector();
+ } else {
+ $regionSwitcherButton.addClass('active');
+ $regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
+ }
+ });
+
+ $regionSelector.find('.button.close').click(function() {
+ closeRegionSelector();
+ });
+
+ $('#header .controls .view-switcher.button:last').after($regionSwitcherButton, $regionSelector);
+ refreshRegions();
+ });
+}(jQuery, cloudStack));
+
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/b9a459c2/ui/scripts/ui/core.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js
index 3fc1f59..de86e51 100644
--- a/ui/scripts/ui/core.js
+++ b/ui/scripts/ui/core.js
@@ -127,75 +127,6 @@
.append($('<span>').html(_l('label.notifications')))
.notifications();
- // Region switcher
- var $regionList = $('<ul>');
-
- // Append dummy content for now
- $regionList.append($('<li>').append($('<span>').html('USA')));
- $regionList.append($('<li>').append($('<span>').html('Canada')));
- $regionList.append($('<li>').append($('<span>').html('Europe')));
- $regionList.append($('<li>').append($('<span>').html('Asia')));
- $regionList.append($('<li>').append($('<span>').html('USA')));
- $regionList.append($('<li>').append($('<span>').html('Canada')));
- $regionList.append($('<li>').append($('<span>').html('Europe')));
-
- var $regionSelector = $('<div>').addClass('region-selector')
- .append($('<div>').addClass('top-arrow'))
- .append($('<h2>').html(_l('label.menu.regions')))
- .append($regionList)
- .append(
- $('<div>').addClass('buttons')
- .append(
- $('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
- )
- )
- .hide();
- var $regionSwitcherButton = $('<div>').addClass('region-switcher')
- .attr('title', 'Select region')
- .append(
- $('<span>').addClass('icon').html(' ')
- );
-
- var closeRegionSelector = function(args) {
- $regionSwitcherButton.removeClass('active');
- $regionSelector.fadeOut(args ? args.complete : null);
- $('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
- };
-
- var switchRegion = function(url) {
- closeRegionSelector({
- complete: function() {
- $('#container').prepend($('<div>').addClass('loading-overlay'));
-
- document.location.href = url;
- }
- });
- };
-
- $regionList.click(function(event) {
- var $target = $(event.target);
- var $li = $target.closest('li');
-
- if ($li.size()) {
- var url = 'http://10.223.77.3:8080/client';
-
- switchRegion(url);
- }
- });
-
- $regionSwitcherButton.click(function() {
- if ($regionSwitcherButton.hasClass('active')) {
- closeRegionSelector();
- } else {
- $regionSwitcherButton.addClass('active');
- $regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
- }
- });
-
- $regionSelector.find('.button.close').click(function() {
- closeRegionSelector();
- });
-
// Project switcher
var $viewSwitcher = $('<div>').addClass('button view-switcher')
.append(
@@ -204,6 +135,8 @@
.html(_l('label.default.view'))
.prepend(
$('<span>').addClass('icon').html(' ')
+
+
)
)
.append(
@@ -288,8 +221,6 @@
$('<div>').addClass('logo'),
$('<div>').addClass('controls')
.append($notificationArea)
- .append($regionSwitcherButton)
- .append($regionSelector)
.append($viewSwitcher)
.append($projectSelect)
.append($userInfo)
@@ -426,6 +357,8 @@
// Hide logo conditionally
if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
+
+ $(window).trigger('cloudStack.ready');
return this;
};