apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-12-16 18:43:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Browser widget: Modify behavior

Browse Source 
-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
This commit is contained in:
Brian Federle 2013-10-02 12:17:00 -07:00
parent 2dd5e2d7c7
commit 71a38b74c3
2 changed files with 21 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ui/scripts/ui/widgets/cloudBrowser.js
View File

@ -95,7 +95,7 @@
*/ */
width: function($container, options) { width: function($container, options) {
options = options ? 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; $container.width() : $container.width() - $container.width() / 4;
return width; return width;
@ -105,7 +105,7 @@
* Get left position * Get left position
*/ */
position: function($container, options) { 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; 0 : _panel.width($container, options) - _panel.width($container, options) / 1.5;
}, },
@ -160,7 +160,7 @@
var $panel = $('<div>').addClass('panel').css({ var $panel = $('<div>').addClass('panel').css({
position: 'absolute', position: 'absolute',
width: _panel.width($container, { width: _panel.width($container, {
maximized: options.maximized partial: options.partial
}), }),
zIndex: _panel.topIndex($container) zIndex: _panel.topIndex($container)
}).append( }).append(
@ -168,8 +168,6 @@
$('<div>').addClass('shadow') $('<div>').addClass('shadow')
).append(options.data); ).append(options.data);
if (options.maximized) $panel.addClass('always-maximized');
return $panel; return $panel;
} }
}; };
@ -195,12 +193,10 @@
var $toRemove = _panel.higher($container, $panel); var $toRemove = _panel.higher($container, $panel);
var complete = args.complete; var complete = args.complete;
if ($panel.hasClass('maximized')) return false;
_breadcrumb.filter($toRemove).remove(); _breadcrumb.filter($toRemove).remove();
_breadcrumb.filter($panel.siblings()).removeClass('active'); _breadcrumb.filter($panel.siblings()).removeClass('active');
_breadcrumb.filter($panel).addClass('active'); _breadcrumb.filter($panel).addClass('active');
_breadcrumb.filter($('div.panel')).find('span').animate({ _breadcrumb.filter($('div.panel')).find('span').css({
opacity: 1 opacity: 1
}); });
_breadcrumb.filter( _breadcrumb.filter(
@ -209,7 +205,7 @@
.addClass('reduced') .addClass('reduced')
).removeClass('active maximized'); ).removeClass('active maximized');
$toRemove.animate( $toRemove.css(
_panel.initialState($container), { _panel.initialState($container), {
duration: 500, duration: 500,
complete: function() { complete: function() {
@ -220,7 +216,7 @@
} }
); );
$toShow.show(); $toShow.show();
$panel.animate({ $panel.css({
left: _panel.position($container, { left: _panel.position($container, {
maximized: $panel.hasClass('always-maximized') maximized: $panel.hasClass('always-maximized')
}) })
@ -241,25 +237,18 @@
_breadcrumb.filter($panel).removeClass('maximized'); _breadcrumb.filter($panel).removeClass('maximized');
$panel.removeClass('maximized'); $panel.removeClass('maximized');
$panel.addClass('reduced'); $panel.addClass('reduced');
_breadcrumb.filter($panel.siblings()).find('span').animate({ _breadcrumb.filter($panel.siblings()).find('span').css({
opacity: 1 opacity: 1
}); });
$toHide.animate({ $toHide.css({
left: _panel.position($container, {}) left: _panel.position($container, {})
}, {
duration: 500
}); });
$shadow.show(); $shadow.show();
} else { } else {
_breadcrumb.filter($panel).addClass('maximized'); _breadcrumb.filter($panel).addClass('maximized');
$panel.removeClass('reduced'); $panel.removeClass('reduced');
$panel.addClass('maximized'); $panel.addClass('maximized');
_breadcrumb.filter($panel.siblings()).find('span').animate({ $toHide.css(_panel.initialState($container));
opacity: 0.5
});
$toHide.animate(_panel.initialState($container), {
duration: 500
});
$shadow.hide(); $shadow.hide();
} }
}, },
@ -275,7 +264,7 @@
// Create panel // Create panel
$panel = _panel.create(this.element, { $panel = _panel.create(this.element, {
maximized: args.maximizeIfSelected, partial: args.partial,
data: args.data data: args.data
}); });
@ -315,7 +304,8 @@
// Panel slide-in // Panel slide-in
targetPosition = _panel.position($container, { targetPosition = _panel.position($container, {
maximized: args.maximizeIfSelected maximized: args.maximizeIfSelected,
partial: args.partial
}); });
if (!$panel.index()) { if (!$panel.index()) {
// Just show immediately if this is the first panel // Just show immediately if this is the first panel
@ -325,20 +315,16 @@
if (args.complete) args.complete($panel, _breadcrumb.filter($panel)); if (args.complete) args.complete($panel, _breadcrumb.filter($panel));
} else { } else {
// Animate slide-in // Animate slide-in
$panel.animate({ $panel.css({
left: targetPosition 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; return $panel;

1
ui/scripts/ui/widgets/treeView.js
View File

@ -110,6 +110,7 @@
$treeView.find('li .name').removeClass('selected'); $treeView.find('li .name').removeClass('selected');
$target.addClass('selected'); $target.addClass('selected');
$browser.cloudBrowser('addPanel', { $browser.cloudBrowser('addPanel', {
partial: true,
title: $target.html(), title: $target.html(),
data: '', data: '',
parent: $treeView.closest('div.panel'), parent: $treeView.closest('div.panel'),