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 <[email protected]> Authored: Tue Oct 16 14:08:50 2012 -0700 Committer: Brian Federle <[email protected]> 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(); } } ));
