From 71a38b74c383e475c9c55a0221d67b94c21157ad Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Wed, 2 Oct 2013 12:17:00 -0700 Subject: [PATCH] Browser widget: Modify behavior -For better screen real-estate, make all browser panes open to full width of content area by default, unless partial: true is passed in options -Remove animation effect, for quicker browsing --- ui/scripts/ui/widgets/cloudBrowser.js | 54 ++++++++++----------------- ui/scripts/ui/widgets/treeView.js | 1 + 2 files changed, 21 insertions(+), 34 deletions(-) diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js index a5f253b1188..ffb5f157abe 100644 --- a/ui/scripts/ui/widgets/cloudBrowser.js +++ b/ui/scripts/ui/widgets/cloudBrowser.js @@ -95,7 +95,7 @@ */ width: function($container, options) { options = options ? options : {}; - var width = $container.find('div.panel').size() < 1 || options.maximized == true ? + var width = $container.find('div.panel').size() < 1 || !options.partial ? $container.width() : $container.width() - $container.width() / 4; return width; @@ -105,7 +105,7 @@ * Get left position */ position: function($container, options) { - return $container.find('div.panel').size() <= 1 || options.maximized == true ? + return $container.find('div.panel').size() <= 1 || !options.partial ? 0 : _panel.width($container, options) - _panel.width($container, options) / 1.5; }, @@ -160,7 +160,7 @@ var $panel = $('
').addClass('panel').css({ position: 'absolute', width: _panel.width($container, { - maximized: options.maximized + partial: options.partial }), zIndex: _panel.topIndex($container) }).append( @@ -168,8 +168,6 @@ $('
').addClass('shadow') ).append(options.data); - if (options.maximized) $panel.addClass('always-maximized'); - return $panel; } }; @@ -195,12 +193,10 @@ var $toRemove = _panel.higher($container, $panel); var complete = args.complete; - if ($panel.hasClass('maximized')) return false; - _breadcrumb.filter($toRemove).remove(); _breadcrumb.filter($panel.siblings()).removeClass('active'); _breadcrumb.filter($panel).addClass('active'); - _breadcrumb.filter($('div.panel')).find('span').animate({ + _breadcrumb.filter($('div.panel')).find('span').css({ opacity: 1 }); _breadcrumb.filter( @@ -209,7 +205,7 @@ .addClass('reduced') ).removeClass('active maximized'); - $toRemove.animate( + $toRemove.css( _panel.initialState($container), { duration: 500, complete: function() { @@ -220,7 +216,7 @@ } ); $toShow.show(); - $panel.animate({ + $panel.css({ left: _panel.position($container, { maximized: $panel.hasClass('always-maximized') }) @@ -241,25 +237,18 @@ _breadcrumb.filter($panel).removeClass('maximized'); $panel.removeClass('maximized'); $panel.addClass('reduced'); - _breadcrumb.filter($panel.siblings()).find('span').animate({ + _breadcrumb.filter($panel.siblings()).find('span').css({ opacity: 1 }); - $toHide.animate({ + $toHide.css({ left: _panel.position($container, {}) - }, { - duration: 500 }); $shadow.show(); } else { _breadcrumb.filter($panel).addClass('maximized'); $panel.removeClass('reduced'); $panel.addClass('maximized'); - _breadcrumb.filter($panel.siblings()).find('span').animate({ - opacity: 0.5 - }); - $toHide.animate(_panel.initialState($container), { - duration: 500 - }); + $toHide.css(_panel.initialState($container)); $shadow.hide(); } }, @@ -275,7 +264,7 @@ // Create panel $panel = _panel.create(this.element, { - maximized: args.maximizeIfSelected, + partial: args.partial, data: args.data }); @@ -315,7 +304,8 @@ // Panel slide-in targetPosition = _panel.position($container, { - maximized: args.maximizeIfSelected + maximized: args.maximizeIfSelected, + partial: args.partial }); if (!$panel.index()) { // Just show immediately if this is the first panel @@ -325,20 +315,16 @@ if (args.complete) args.complete($panel, _breadcrumb.filter($panel)); } else { // Animate slide-in - $panel.animate({ + $panel.css({ left: targetPosition - }, { - duration: duration, - easing: 'easeOutCirc', - complete: function() { - // Hide panels - $panel.siblings().filter(function() { - return $(this).width() == $panel.width(); - }); - - if ($panel.is(':visible') && args.complete) args.complete($panel); - } }); + + // Hide panels + $panel.siblings().filter(function() { + return $(this).width() == $panel.width(); + }); + + if ($panel.is(':visible') && args.complete) args.complete($panel); }; return $panel; diff --git a/ui/scripts/ui/widgets/treeView.js b/ui/scripts/ui/widgets/treeView.js index 80a03e2ae5f..8b75a6947af 100644 --- a/ui/scripts/ui/widgets/treeView.js +++ b/ui/scripts/ui/widgets/treeView.js @@ -110,6 +110,7 @@ $treeView.find('li .name').removeClass('selected'); $target.addClass('selected'); $browser.cloudBrowser('addPanel', { + partial: true, title: $target.html(), data: '', parent: $treeView.closest('div.panel'),