wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compress siblings before calculating the available width for crumbs

Browse source 
When the parent element of the breadcrumbs was resized to a larger width
and the siblings of the breadcrumbs expanded to fill all the available
width some crumbs could be hidden even if there was enough room for
them. The reason was that the width of the siblings being used to
calculate the available width for the breadcrumbs was the expanded width
of the siblings. Now as many crumbs as possible (that is, fitting in the
parent, no matter the siblings) are first shown so the expanding
siblings are compressed before calculating the available width.

Due to the lack of support for flexboxes in PhantomJS the related unit
test is skipped; it has to be run in other browser, like Firefox.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-02-20 17:07:26 +01:00
parent a37007f872
commit acdf091f84
2 changed files with 96 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/files/js/breadcrumb.js
View file

@ -316,6 +316,15 @@
return;
}
// Show the crumbs to compress the siblings before hidding again the
// crumbs. This is needed when the siblings expand to fill all the
// available width, as in that case their old width would limit the
// available width for the crumbs.
while (this.$el.find('.crumb.hidden').length > 0
&& this.getTotalWidth() < this.$el.parent().width()) {
this._showCrumb();
}
var siblingsWidth = 0;
this.$el.prevAll(':visible').each(function () {
siblingsWidth += $(this).outerWidth(true);

87
apps/files/tests/js/breadcrumbSpec.js
View file

@ -238,6 +238,10 @@ describe('OCA.Files.BreadCrumb tests', function() {
describe('Resizing', function() {
var bc, dummyDir, widths;
// cit() will skip tests if running on PhantomJS because it does not
// have proper support for flexboxes.
var cit = window.isPhantom?xit:it;
beforeEach(function() {
dummyDir = '/short name/longer name/looooooooooooonger/' +
'even longer long long long longer long/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/last one';
@ -451,6 +455,89 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
it('Updates the breadcrumbs when increasing available width', function() {
var $crumbs;
// limited space
$('#controls').width(850);
bc._resize();
$crumbs = bc.$el.find('.crumb');
// Third and fourth crumb are hidden and everything else is visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
// simulate increase
$('#controls').width(1000);
bc._resize();
// Third crumb is hidden and everything else is visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
cit('Updates the breadcrumbs when increasing available width with an expanding sibling', function() {
var $crumbs;
// The sibling expands to fill all the width left by the breadcrumbs
var $nextSibling = $('<div class="sibling"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$nextSibling.css('width', '10px');
$nextSibling.css('min-width', '10px');
$nextSibling.css('display', 'flex');
$nextSibling.css('flex', '1 1');
var $nextSiblingChild = $('<div class="siblingChild"></div>');
$nextSiblingChild.css('margin-left', 'auto');
$nextSibling.append($nextSiblingChild);
$('#controls').append($nextSibling);
// limited space
$('#controls').width(850);
bc._resize();
$crumbs = bc.$el.find('.crumb');
// Third and fourth crumb are hidden and everything else is visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
// simulate increase
$('#controls').width(1000);
bc._resize();
// Third crumb is hidden and everything else is visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);