cloudBrowser / list view UI: Show subsection in breadcrumb If in a section with multiple subsections, show active subsection in the breadcrumb.
For example, if in storage->snapshots, display 'Storage - Snapshots' based on the 'title' attribute for the main section and subsetion. -- Note: this disables the 'fixSize' functionality which resizes long breadcrumb trails, due to incompatibility with this new feature. It is going to be reimplemented anyway, as it is fairly glitchy in its current incarnation. Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/640dcdec Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/640dcdec Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/640dcdec Branch: refs/heads/vpc Commit: 640dcdec1f01791c2217ceb1dd641434d398dd3e Parents: 96ac18d Author: Brian Federle <[email protected]> Authored: Wed Aug 1 13:24:19 2012 -0700 Committer: Brian Federle <[email protected]> Committed: Wed Aug 1 15:57:24 2012 -0700 ---------------------------------------------------------------------- ui/scripts/ui/core.js | 9 ++++-- ui/scripts/ui/widgets/cloudBrowser.js | 41 +--------------------------- ui/scripts/ui/widgets/listView.js | 12 ++++++++ 3 files changed, 19 insertions(+), 43 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/640dcdec/ui/scripts/ui/core.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js index 0c6b4e7..c38ed3f 100644 --- a/ui/scripts/ui/core.js +++ b/ui/scripts/ui/core.js @@ -73,17 +73,20 @@ return $(this).hasClass(sectionID); }); var data = args.sections[sectionID]; + data.$browser = $browser; - $navItem.siblings().removeClass('active'); $navItem.addClass('active'); // Reset browser panels $browser.cloudBrowser('removeAllPanels'); $browser.cloudBrowser('addPanel', { - title: _l(data.title), + title: '<span class="section">' + _l(data.title) + '</span>' + '<span class="subsection"></span>', data: '', - complete: function($panel) { + complete: function($panel, $breadcrumb) { + $breadcrumb.attr('title', _l(data.title)); + data.$breadcrumb = $breadcrumb; + // Hide breadcrumb if this is the home section if (args.home === sectionID) { $('#breadcrumbs').find('li:first, div.end:last').hide(); http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/640dcdec/ui/scripts/ui/widgets/cloudBrowser.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js index 2c518cb..2cd0169 100644 --- a/ui/scripts/ui/widgets/cloudBrowser.js +++ b/ui/scripts/ui/widgets/cloudBrowser.js @@ -21,41 +21,6 @@ * Breadcrumb-related functions */ var _breadcrumb = cloudStack.ui.widgets.browser.breadcrumb = { - fixSize: function($breadcrumbContainer) { - var width = 0; - var containerWidth = $breadcrumbContainer.width(); - var $elems = $breadcrumbContainer.find('ul li, div'); - - $elems.each(function() { - width += $(this).width(); - }); - - if (width > containerWidth) { - $elems.filter('li').each(function() { - var targetWidth = $(this).width() - ( - (width - containerWidth) / $elems.filter('li').size() - ) - 10; - - $(this).width(targetWidth); - - // Concatenate title - var $text = $(this).find('span'); - var text = $(this).attr('title'); - - $text.html( - text - .substring(0, text.length - targetWidth / 15) - .concat('...') - ); - }); - } else { - $elems.css({ width: '' }); - $elems.find('span').each(function() { - $(this).html($(this).closest('li').attr('title')); - }); - } - }, - /** * Generate new breadcrumb */ @@ -244,7 +209,6 @@ .removeClass('maximized') .addClass('reduced') ).removeClass('active maximized'); - _breadcrumb.fixSize($('#breadcrumbs')); $toRemove.animate( _panel.initialState($container), @@ -330,8 +294,6 @@ .addClass('active') .appendTo('#breadcrumbs ul'); - _breadcrumb.fixSize($('#breadcrumbs')); - // Reduced appearance for previous panels $panel.siblings().filter(function() { return $(this).index() < $panel.index(); @@ -352,7 +314,7 @@ $panel.css( { left: targetPosition } ); - if (args.complete) args.complete($panel); + if (args.complete) args.complete($panel, _breadcrumb.filter($panel)); } else { // Animate slide-in $panel.animate({ left: targetPosition }, { @@ -380,7 +342,6 @@ this.element.find('div.panel').remove(); $('#breadcrumbs').find('ul li').remove(); $('#breadcrumbs').find('ul div.end').remove(); - _breadcrumb.fixSize($('#breadcrumbs')); } }); http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/640dcdec/ui/scripts/ui/widgets/listView.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 9c30b49..be2f106 100644 --- a/ui/scripts/ui/widgets/listView.js +++ b/ui/scripts/ui/widgets/listView.js @@ -1117,6 +1117,18 @@ if (section) { listViewData = args.sections[section].listView; + + var sectionTitle = _l(args.title); + var subsectionTitle = _l(args.sections[section].title); + + // Show subsection in breadcrumb + if ((sectionTitle && subsectionTitle) && (sectionTitle != subsectionTitle)) { + args.$breadcrumb.find('span.subsection').html(' - ' + subsectionTitle); + args.$breadcrumb.attr('title', sectionTitle + ' - ' + subsectionTitle); + } else { + args.$breadcrumb.find('span.subsection').html(''); + args.$breadcrumb.attr('title', sectionTitle); + } } // Create table and other elems
