Updated Branches: refs/heads/ui-regions e3439bc8d -> fb44e6d7e
Add basic region drop-down Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/fb44e6d7 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/fb44e6d7 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/fb44e6d7 Branch: refs/heads/ui-regions Commit: fb44e6d7ed05b8bd8617c3daa96c046bc88f854f Parents: e3439bc Author: Brian Federle <[email protected]> Authored: Tue Feb 26 14:28:22 2013 -0800 Committer: Brian Federle <[email protected]> Committed: Tue Feb 26 14:28:22 2013 -0800 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 83 +++++++++++++++++++++++++++++++++++++++++- ui/images/sprites.png | Bin 187945 -> 188552 bytes ui/scripts/ui/core.js | 32 +++++++++++++++- 3 files changed, 111 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/fb44e6d7/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index f8a7884..c832d4d 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -11073,6 +11073,8 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it /*Regions*/ .region-switcher { + z-index: 2002; + position: relative; background: url(../images/bg-gradients.png) 0px -1px; border: 1px solid #5E5E5E; /*+border-radius:4px;*/ @@ -11094,6 +11096,81 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it box-shadow: inset 0px 1px 1px #000000; } +.region-selector { + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + width: 281px; + background: #FFFFFF; + min-height: 275px; + max-height: 275px; + /*+placement:shift 72px 49px;*/ + position: relative; + left: 72px; + 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 ul { + width: 97%; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + height: 253px; + overflow: auto; + margin: auto; + /*+box-shadow:inset 0px 0px 8px #A3A3A3;*/ + -moz-box-shadow: inset 0px 0px 8px #A3A3A3; + -webkit-box-shadow: inset 0px 0px 8px #A3A3A3; + -o-box-shadow: inset 0px 0px 8px #A3A3A3; + box-shadow: inset 0px 0px 8px #A3A3A3; +} + +.region-selector ul li { + background: none; + color: #3E4B56; + font-size: 14px; + /*+text-shadow:none;*/ + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; + text-indent: 14px; + cursor: pointer; + border-bottom: 1px solid #C9C5C5; + width: 100%; + padding: 18px 0; +} + +.region-selector ul li:hover { + background: #E9E9E9; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + 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%; @@ -11101,7 +11178,8 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it background: url(../images/sprites.png) -15px -1313px; } -.region-switcher:hover { +.region-switcher:hover, +.region-switcher.active { /*+box-shadow:inset 0px 1px 5px #000000;*/ -moz-box-shadow: inset 0px 1px 5px #000000; -webkit-box-shadow: inset 0px 1px 5px #000000; @@ -11109,7 +11187,8 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it box-shadow: inset 0px 1px 5px #000000; } -.region-switcher:hover .icon { +.region-switcher:hover .icon, +.region-switcher.active .icon { background-position: -70px -1311px; } http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/fb44e6d7/ui/images/sprites.png ---------------------------------------------------------------------- diff --git a/ui/images/sprites.png b/ui/images/sprites.png index 0dd997e..03b01b3 100644 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/fb44e6d7/ui/scripts/ui/core.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js index 68dafda..629663b 100644 --- a/ui/scripts/ui/core.js +++ b/ui/scripts/ui/core.js @@ -128,12 +128,39 @@ .notifications(); // Region switcher - var $regionSwitcher = $('<div>').addClass('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($regionList) + .hide(); + var $regionSwitcherButton = $('<div>').addClass('region-switcher') .attr('title', 'Select region') .append( $('<span>').addClass('icon').html(' ') ); + + $regionSwitcherButton.click(function() { + if ($regionSwitcherButton.hasClass('active')) { + $regionSwitcherButton.removeClass('active'); + $regionSelector.fadeOut(); + $('body > .overlay').remove(); + } else { + $regionSwitcherButton.addClass('active'); + $regionSelector.fadeIn('fast').overlay(); + } + }); + // Project switcher var $viewSwitcher = $('<div>').addClass('button view-switcher') .append( @@ -226,8 +253,9 @@ $('<div>').addClass('logo'), $('<div>').addClass('controls') .append($notificationArea) + .append($regionSwitcherButton) + .append($regionSelector) .append($viewSwitcher) - .append($regionSwitcher) .append($projectSelect) .append($userInfo) ];
