incubator-cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject git commit: refs/heads/ui-regions - Add basic region drop-down
Date Tue, 26 Feb 2013 22:28:36 GMT
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 <brian.federle@citrix.com>
Authored: Tue Feb 26 14:28:22 2013 -0800
Committer: Brian Federle <brian.federle@citrix.com>
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('&nbsp;')
         );
 
+
+      $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)
       ];


Mime
View raw message