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

Take padding and margins of crumbs into account 

When calculating the total width of the crumbs only its padding was
taken into account; now the margin is too. In a similar way, before
showing a crumb only its width was taken into account; now its padding
and margin are taken into account too.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-02-27 13:59:09 +01:00
parent 89c0a0733f
commit 83b50690a8
2 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,7 +249,7 @@
for (var i = 0; i < this.breadcrumbs.length; i++ ) {
var $crumb = $(this.breadcrumbs[i]);
if(!$crumb.hasClass('hidden') || ignoreHidden === true) {
totalWidth += $crumb.outerWidth();
totalWidth += $crumb.outerWidth(true);
}
}
return totalWidth;
@ -344,7 +344,7 @@
// If container is bigger than content + element to be shown
// AND if there is at least one hidden crumb
while (this.$el.find('.crumb.hidden').length > 0
&& this.getTotalWidth() + this._getCrumbElement().width() < availableWidth) {
&& this.getTotalWidth() + this._getCrumbElement().outerWidth(true) < availableWidth) {
this._showCrumb();
}

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

@ -313,6 +313,60 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
it('Hides breadcrumbs to fit available width taking paddings into account', function() {
var $crumbs;
// Each element is 20px wider
paddings = [10, 10, 10, 10, 10, 10, 10, 10];
$('div.crumb').each(function(index){
$(this).css('padding', paddings[index]);
});
$('#controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
// Second, 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(true);
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);
});
it('Hides breadcrumbs to fit available width taking margins into account', function() {
var $crumbs;
// Each element is 20px wider
margins = [10, 10, 10, 10, 10, 10, 10, 10];
$('div.crumb').each(function(index){
$(this).css('margin', margins[index]);
});
$('#controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
// Second, 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(true);
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);
});
it('Hides breadcrumbs to fit available width left by siblings', function() {
var $crumbs;