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/master Commit: b9a459c24d9fb561e1d64abec606656e899d6482 Parents: 84b73b9 Author: Brian Federle <[email protected]> Authored: Tue Feb 26 15:53:34 2013 -0800 Committer: Brian Federle <[email protected]> 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; };
