incubator-cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject git commit: UI browser: add panel focus overlay
Date Tue, 16 Oct 2012 21:11:30 GMT
Updated Branches:
  refs/heads/master 58ae1009c -> d7704422a


UI browser: add panel focus overlay

On hover of a breadcrumb, show an overlay effect which focuses on that
particular panel, hiding all panels after it.

This allows a user to see the content of previous breadcrumbs that the
user loaded.


Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/d7704422
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/d7704422
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/d7704422

Branch: refs/heads/master
Commit: d7704422ac7643ff7c42afc4ba8e2535a1c1b904
Parents: 58ae100
Author: Brian Federle <brian.federle@citrix.com>
Authored: Tue Oct 16 14:08:50 2012 -0700
Committer: Brian Federle <brian.federle@citrix.com>
Committed: Tue Oct 16 14:11:05 2012 -0700

----------------------------------------------------------------------
 ui/css/cloudstack3.css                |   68 ++++++++++++++++++++++++++++
 ui/images/sprites.png                 |  Bin 180100 -> 180485 bytes
 ui/scripts/ui/widgets/cloudBrowser.js |   53 +++++++++++++++++++--
 3 files changed, 116 insertions(+), 5 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/d7704422/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 76cb36e..affc816 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -2445,6 +2445,13 @@ div.detail-group.actions td {
   overflow: hidden;
 }
 
+#browser.panel-highlight {
+  overflow: visible;
+}
+
+#browser.panel-highlight .panel {
+}
+
 #browser div.panel {
   height: 698px;
   background: #F7F7F7;
@@ -2452,6 +2459,35 @@ div.detail-group.actions td {
   overflow: visible;
 }
 
+#browser div.panel.panel-highlight-wrapper {
+  display: inline-block;
+  background: none;
+  /*+border-radius:9px;*/
+  -moz-border-radius: 9px;
+  -webkit-border-radius: 9px;
+  -khtml-border-radius: 9px;
+  border-radius: 9px;
+  margin-top: 7px;
+  /*+box-shadow:0px 0px 12px #000000;*/
+  -moz-box-shadow: 0px 0px 12px #000000;
+  -webkit-box-shadow: 0px 0px 12px #000000;
+  -o-box-shadow: 0px 0px 12px #000000;
+  box-shadow: 0px 0px 12px #000000;
+  border: 3px solid #FFFFFF;
+  height: 542px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 10000;
+  padding: 78px 0px 67px 51px;
+}
+
+#browser div.panel.panel-highlight-wrapper .panel {
+  left: 20px !important;
+  height: 631px;
+  overflow: hidden;
+  top: 3px;
+}
+
 .project-view #browser div.panel {
   background: #6D747D;
 }
@@ -2474,6 +2510,38 @@ div.detail-group.actions td {
   background: url(../images/bg-panel-shadow.png) repeat-y 0px 0px;
 }
 
+#browser.panel-highlight {
+  overflow: visible;
+}
+
+#browser.panel-highlight .panel.highlighted {
+  /*+box-shadow:0px 10px 11px #5C5C5C;*/
+  -moz-box-shadow: 0px 10px 11px #5C5C5C;
+  -webkit-box-shadow: 0px 10px 11px #5C5C5C;
+  -o-box-shadow: 0px 10px 11px #5C5C5C;
+  box-shadow: 0px 10px 11px #5C5C5C;
+  border: 5px solid #FFFFFF;
+  /*+border-radius:6px;*/
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -khtml-border-radius: 6px;
+  border-radius: 6px;
+  margin-top: 21px;
+}
+
+#browser.panel-highlight .panel > .shadow {
+  display: none;
+}
+
+#browser .highlight-arrow {
+  width: 24px;
+  height: 19px;
+  background: url(../images/sprites.png) -590px -1295px;
+  position: absolute;
+  top: -22px;
+  left: 80px;
+}
+
 /*Toolbar*/
 /*[clearfix]*/div.toolbar {
   width: 793px;

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/d7704422/ui/images/sprites.png
----------------------------------------------------------------------
diff --git a/ui/images/sprites.png b/ui/images/sprites.png
index db95cca..a3ad9e4 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/d7704422/ui/scripts/ui/widgets/cloudBrowser.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js
index 2cd0169..47fbd0a 100644
--- a/ui/scripts/ui/widgets/cloudBrowser.js
+++ b/ui/scripts/ui/widgets/cloudBrowser.js
@@ -362,11 +362,37 @@
         var  $hiddenPanels = data.panel.siblings().filter(function(){
           return $(this).index() > data.panel.index();
         });
+        var $targetPanel = data.panel.filter(':first');
+        var $targetBreadcrumb = _breadcrumb.filter($targetPanel);
+        var $panelWrapper = $('<div>').addClass('panel panel-highlight-wrapper');
         
         $hiddenPanels.addClass('mouseover-hidden');
-        setTimeout(function() {
-          $('.mouseover-hidden').fadeOut('fast');
-        }, 1000);
+        
+        $browser.data('browser-panel-highlight-timer', setTimeout(function() {
+          $('#browser').addClass('panel-highlight');
+          $('.overlay').remove();
+
+          // Setup panel and wrapper positioning
+          $panelWrapper
+            .css({
+              left: $targetPanel.position().left
+            })
+            .width($targetPanel.width());
+          $targetPanel
+            .wrap($panelWrapper);
+          $panelWrapper
+            .zIndex(10000)
+            .overlay();
+          $targetPanel.filter(':last').addClass('highlighted');
+
+          // Setup breadcrumbs
+          $targetBreadcrumb.each(function() {
+            $(this).data('breadcrumb-original-zindex', $(this).zIndex());
+          });
+          $targetBreadcrumb.zIndex(10001);
+          
+          $hiddenPanels.hide();
+        }, 1000));
       }
     }
   ));
@@ -375,9 +401,26 @@
     'cloudBrowser',
     {
       'breadcrumb': function($target, $browser, data) {
-        var  $getHiddenPanels = $browser.find('.panel.mouseover-hidden');
-        
+        var $getHiddenPanels = $browser.find('.panel.mouseover-hidden');
+        var $visiblePanels = $getHiddenPanels.siblings();
+        var $visibleBreadcrumbs = _breadcrumb.filter($visiblePanels);
+
+        clearTimeout($browser.data('browser-panel-highlight-timer'));
+        $('#browser').removeClass('panel-highlight');
+        $('#browser .panel').removeClass('highlighted');
+        $('#browser .panel.panel-highlight-wrapper').each(function() {
+          var $wrapper = $(this);
+          var $panel = $wrapper.find('.panel');
+          
+          $wrapper.after($panel);
+          $wrapper.remove();
+        });
         $getHiddenPanels.removeClass('mouseover-hidden').show();
+        $visibleBreadcrumbs.each(function() {
+          $(this).zIndex($(this).data('breadcrumb-original-zindex'));
+        });
+        $('.overlay').remove();
+        $('#browser .panel > .highlight-arrow').remove();
       }
     }
   ));


Mime
View raw message