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/fixes.scss | 7 | ||||
| -rw-r--r-- | core/css/header.scss | 9 | ||||
| -rw-r--r-- | core/css/mobile.scss | 2 | ||||
| -rw-r--r-- | core/css/styles.scss | 16 |
7 files changed, 53 insertions, 36 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/fixes.scss b/core/css/fixes.scss index 3cb89c6599f..0303b4d751a 100644 --- a/core/css/fixes.scss +++ b/core/css/fixes.scss @@ -16,3 +16,10 @@ select { visibility: hidden; } +.ie #header .menu, +.ie .header-left #navigation, +.ie .ui-datepicker, +.ie .ui-timepicker.ui-widget, +.ie #appmenu li span { + box-shadow: 0 1px 10px $color-box-shadow; +} diff --git a/core/css/header.scss b/core/css/header.scss index b5bb8ca9c5b..b38c0bcb401 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -76,7 +76,7 @@ .menu { top: 45px; background-color: $color-main-background; - filter: drop-shadow(0 1px 3px $color-box-shadow); + filter: drop-shadow(0 1px 10px $color-box-shadow); border-radius: 0 0 3px 3px; box-sizing: border-box; z-index: 2000; @@ -213,7 +213,7 @@ nav { left: -100%; width: 160px; background-color: $color-main-background; - filter: drop-shadow(0 1px 3px $color-box-shadow); + filter: drop-shadow(0 1px 10px $color-box-shadow); &:after { /* position of dropdown arrow */ left: 47%; @@ -411,7 +411,6 @@ nav { #expanddiv { right: 13px; background: $color-main-background; - box-shadow: 0 1px 10px $color-box-shadow; &:after { /* position of dropdown arrow */ right: 13px; @@ -486,7 +485,7 @@ nav { display: none; position: absolute; overflow: visible; - background-color: rgba($color-main-background, .97); + background-color: $color-main-background; white-space: nowrap; border: none; border-radius: $border-radius; @@ -499,7 +498,7 @@ nav { top: 45px; transform: translateX(-50%); padding: 4px 10px; - box-shadow: 0 1px 10px $color-box-shadow; + filter: drop-shadow(0 1px 10px $color-box-shadow); } li:hover span { 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; } |