Updated Branches: refs/heads/master 815f55d91 -> 93e87a5b3
CS-14877: Focus browser panel on breadcrumb hover When mouse is over a breadcrumb for a period of > 2s, show its respective panel until mouseout. This allows a user to see the contents of the panel without having to select it. reviewed-by: brian Original commit: commit 88be929e04826cd1159a2db7dbca220f7eadf5fd Author: Pranav Saxena <[email protected]> Date: Fri Jun 8 14:17:42 2012 +0530 CS-14877: Expanded breadcrumb navigation on hover UI Requirement Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/93e87a5b Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/93e87a5b Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/93e87a5b Branch: refs/heads/master Commit: 93e87a5b31b27815fa1eed1c271edd679386a978 Parents: 815f55d Author: Brian Federle <[email protected]> Authored: Mon Jun 11 12:52:10 2012 -0700 Committer: Brian Federle <[email protected]> Committed: Mon Jun 11 12:52:22 2012 -0700 ---------------------------------------------------------------------- ui/scripts/ui/widgets/cloudBrowser.js | 28 ++++++++++++++++++++++++++++ 1 files changed, 28 insertions(+), 0 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/93e87a5b/ui/scripts/ui/widgets/cloudBrowser.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js index 1977a51..a358742 100644 --- a/ui/scripts/ui/widgets/cloudBrowser.js +++ b/ui/scripts/ui/widgets/cloudBrowser.js @@ -385,4 +385,32 @@ } } )); + + // Breadcrumb hovering + $('#breadcrumbs li').live('mouseover', cloudStack.ui.event.bind( + 'cloudBrowser', + { + 'breadcrumb': function($target, $browser, data) { + var $hiddenPanels = data.panel.siblings().filter(function(){ + return $(this).index() > data.panel.index(); + }); + + $hiddenPanels.addClass('mouseover-hidden'); + setTimeout(function() { + $('.mouseover-hidden').hide("slow"); + } ,2000); + } + } + )); + + $('#breadcrumbs li').live('mouseout',cloudStack.ui.event.bind( + 'cloudBrowser', + { + 'breadcrumb': function($target, $browser, data) { + var $getHiddenPanels = $browser.find('.panel.mouseover-hidden'); + + $getHiddenPanels.removeClass('mouseover-hidden').show(); + } + } + )); })(jQuery, cloudStack);
