From 83b50690a854a1fac9f9df885008100cb526df6c Mon Sep 17 00:00:00 2001 From: Daniel Calviño Sánchez Date: Tue, 27 Feb 2018 13:59:09 +0100 Subject: Take padding and margins of crumbs into account MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- apps/files/js/breadcrumb.js | 4 +-- apps/files/tests/js/breadcrumbSpec.js | 54 +++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 2 deletions(-) (limited to 'apps/files') diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js index 347d5a5dd0d..e4951958ad9 100644 --- a/apps/files/js/breadcrumb.js +++ b/apps/files/js/breadcrumb.js @@ -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(); } diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js index b1fd8d11769..ea912cc9fa9 100644 --- a/apps/files/tests/js/breadcrumbSpec.js +++ b/apps/files/tests/js/breadcrumbSpec.js @@ -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; -- cgit v1.2.3