diff options
| -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 | ||||
| -rw-r--r-- | core/css/mobile.scss | 2 | ||||
| -rw-r--r-- | core/css/styles.scss | 16 |
5 files changed, 42 insertions, 31 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); diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 19518479987..6f1583cb77a 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -83,9 +83,7 @@ /* position controls for apps with app-navigation */ #app-navigation+#app-content #controls { - left: 0 !important; padding-left: 44px; - width: 100%; } /* .viewer-mode is when text editor, PDF viewer, etc is open */ diff --git a/core/css/styles.scss b/core/css/styles.scss index 5474b41a2b4..1b76e3c68de 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -223,29 +223,23 @@ body { #controls { box-sizing: border-box; - position: fixed; - top: 45px; - right: 0; - left: 0; + position: -webkit-sticky; + position: sticky; height: 44px; - width: calc(100% - 250px); padding: 0; margin: 0; background-color: rgba($color-main-background, 0.95); - z-index: 50; + z-index: 55; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - display: inline-flex; + display: flex; + top: 0; } /* position controls for apps with app-navigation */ -#app-navigation + #app-content #controls { - left: 250px; -} - .viewer-mode #app-navigation + #app-content #controls { left: 0; } |