diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files/css/files.scss | 10 | ||||
| -rw-r--r-- | apps/files/js/breadcrumb.js | 2 | ||||
| -rw-r--r-- | apps/files/tests/js/breadcrumbSpec.js | 43 |
3 files changed, 37 insertions, 18 deletions
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 6135b1ceeca..8e81bf84b4f 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -20,7 +20,11 @@ .actions.creatable { position: relative; - z-index: -30; + display: flex; + flex: 1 1; + .button:not(:last-child) { + margin-right: 3px; + } } #trash { @@ -43,10 +47,6 @@ width: 100%; } -#filestable.has-controls { - top: 44px; -} - #filestable tbody tr { height: 51px; } diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js index 35aeb8d357d..20b15e3cb93 100644 --- a/apps/files/js/breadcrumb.js +++ b/apps/files/js/breadcrumb.js @@ -331,7 +331,7 @@ // Used for testing since this.$el.parent fails if (!this.availableWidth) { - this.usedWidth = this.$el.parent().width() - (this.$el.parent().find('.button').length + 1) * 44; + this.usedWidth = this.$el.parent().width() - this.$el.parent().find('.actions.creatable').width(); } else { this.usedWidth = this.availableWidth; } diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js index dd3eac017ec..5ec5ad2d6e8 100644 --- a/apps/files/tests/js/breadcrumbSpec.js +++ b/apps/files/tests/js/breadcrumbSpec.js @@ -242,6 +242,17 @@ describe('OCA.Files.BreadCrumb tests', function() { dummyDir = '/short name/longer name/looooooooooooonger/' + 'even longer long long long longer long/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/last one'; + bc = new BreadCrumb(); + // append dummy navigation and controls + // as they are currently used for measurements + $('#testArea').append( + '<div id="controls"></div>' + ); + $('#controls').append(bc.$el); + + // triggers resize implicitly + bc.setDirectory(dummyDir); + // using hard-coded widths (pre-measured) to avoid getting different // results on different browsers due to font engine differences // 51px is default size for menu and home @@ -250,14 +261,6 @@ describe('OCA.Files.BreadCrumb tests', function() { $('div.crumb').each(function(index){ $(this).css('width', widths[index]); }); - - bc = new BreadCrumb(); - // append dummy navigation and controls - // as they are currently used for measurements - $('#testArea').append( - '<div id="controls"></div>' - ); - $('#controls').append(bc.$el); }); afterEach(function() { bc = null; @@ -267,8 +270,6 @@ describe('OCA.Files.BreadCrumb tests', function() { bc.setMaxWidth(500); - // triggers resize implicitly - bc.setDirectory(dummyDir); $crumbs = bc.$el.find('.crumb'); // Menu and home are always visible @@ -282,6 +283,24 @@ describe('OCA.Files.BreadCrumb tests', function() { expect($crumbs.eq(6).hasClass('hidden')).toEqual(true); expect($crumbs.eq(7).hasClass('hidden')).toEqual(false); }); + it('Hides breadcrumbs to fit max allowed width', function() { + var $crumbs; + + bc.setMaxWidth(700); + + $crumbs = bc.$el.find('.crumb'); + + // Menu and home are always 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); + }); it('Updates the breadcrumbs when reducing max allowed width', function() { var $crumbs; @@ -290,7 +309,7 @@ describe('OCA.Files.BreadCrumb tests', function() { $crumbs = bc.$el.find('.crumb'); // Menu is hidden - expect($crumbs.eq(0).hasClass('hidden')).toEqual(false); + expect($crumbs.eq(0).hasClass('hidden')).toEqual(true); // triggers resize implicitly bc.setDirectory(dummyDir); @@ -304,7 +323,7 @@ describe('OCA.Files.BreadCrumb tests', function() { expect($crumbs.eq(2).hasClass('hidden')).toEqual(false); expect($crumbs.eq(3).hasClass('hidden')).toEqual(false); - expect($crumbs.eq(4).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); |