mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Take all visible siblings into account 

Other apps could add elements to the controls outside the creatable
actions div (for example, the button to switch to the gallery), so the
widths of all the visible siblings of the breadcrumbs have to be taken
into account in the size calculations.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-02-20 00:11:40 +01:00
parent bb85084c3d
commit a93dac6a9c
2 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/files/js/breadcrumb.js
View File

@ -316,7 +316,15 @@
return;
}
var availableWidth = this.$el.parent().width() - this.$el.parent().find('.actions.creatable').outerWidth(true);
var siblingsWidth = 0;
this.$el.prevAll(':visible').each(function () {
siblingsWidth += $(this).outerWidth(true);
});
this.$el.nextAll(':visible').each(function () {
siblingsWidth += $(this).outerWidth(true);
});
var availableWidth = this.$el.parent().width() - siblingsWidth;
// If container is smaller than content
// AND if there are crumbs left to hide

54
apps/files/tests/js/breadcrumbSpec.js
View File

@ -322,13 +322,35 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
// Visible sibling widths add up to 200px
var $previousSibling = $('<div class="otherSibling"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$previousSibling.css('width', '50px');
$previousSibling.css('min-width', '50px');
$('#controls').prepend($previousSibling);
var $creatableActions = $('<div class="actions creatable"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$creatableActions.css('width', '200px');
$creatableActions.css('min-width', '200px');
$creatableActions.css('width', '100px');
$creatableActions.css('min-width', '100px');
$('#controls').append($creatableActions);
var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$nextHiddenSibling.css('width', '200px');
$nextHiddenSibling.css('min-width', '200px');
$('#controls').append($nextHiddenSibling);
var $nextSibling = $('<div class="otherSibling"></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', '50px');
$nextSibling.css('min-width', '50px');
$('#controls').append($nextSibling);
bc._resize();
// Second, third, fourth and fifth crumb are hidden and everything
@ -362,15 +384,39 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
// Visible sibling widths add up to 200px
var $previousSibling = $('<div class="otherSibling"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$previousSibling.css('width', '10px');
$previousSibling.css('min-width', '10px');
$previousSibling.css('margin', '20px');
$('#controls').prepend($previousSibling);
var $creatableActions = $('<div class="actions creatable"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$creatableActions.css('width', '20px');
$creatableActions.css('min-width', '20px');
$creatableActions.css('margin-left', '90px');
$creatableActions.css('padding-right', '90px');
$creatableActions.css('margin-left', '40px');
$creatableActions.css('padding-right', '40px');
$('#controls').append($creatableActions);
var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$nextHiddenSibling.css('width', '200px');
$nextHiddenSibling.css('min-width', '200px');
$('#controls').append($nextHiddenSibling);
var $nextSibling = $('<div class="otherSibling"></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('padding', '20px');
$('#controls').append($nextSibling);
bc._resize();
// Second, third, fourth and fifth crumb are hidden and everything