From 7a9e65ceed793604588399d4eaefa7908ad44379 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 13 Dec 2017 11:51:54 +0100 Subject: [PATCH 1/7] Fixed breadcrumbs calculation and actions flow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/css/files.scss | 5 +++++ apps/files/js/breadcrumb.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 6135b1ceecafa..a8dede66310fc 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -21,6 +21,11 @@ .actions.creatable { position: relative; z-index: -30; + display: flex; + flex: 1 1; + .button:not(:last-child) { + margin-right: 3px; + } } #trash { diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js index 35aeb8d357d1b..20b15e3cb9376 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; } From 228ca16bea8a39d50c0085d04396713763cdb288 Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Wed, 13 Dec 2017 14:49:11 +0100 Subject: [PATCH 2/7] Dynamic control bar width Signed-off-by: Marin Treselj --- core/css/mobile.scss | 2 -- core/css/styles.scss | 12 ++---------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 1951847998740..6f1583cb77a04 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 5474b41a2b47f..54775f67f62ae 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -223,12 +223,8 @@ body { #controls { box-sizing: border-box; - position: fixed; - top: 45px; - right: 0; - left: 0; + position: relative; height: 44px; - width: calc(100% - 250px); padding: 0; margin: 0; background-color: rgba($color-main-background, 0.95); @@ -237,15 +233,11 @@ body { -moz-user-select: none; -ms-user-select: none; user-select: none; - display: inline-flex; + display: flex; } /* position controls for apps with app-navigation */ -#app-navigation + #app-content #controls { - left: 250px; -} - .viewer-mode #app-navigation + #app-content #controls { left: 0; } From eebc70cf1eaed59522859a56fddc0406ab336adb Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Tue, 19 Dec 2017 15:09:09 +0100 Subject: [PATCH 3/7] Make contorls stick to the top when scrolling Signed-off-by: Marin Treselj --- apps/files/css/files.scss | 4 ---- core/css/styles.scss | 3 ++- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index a8dede66310fc..5a5a3a5d30b24 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -48,10 +48,6 @@ width: 100%; } -#filestable.has-controls { - top: 44px; -} - #filestable tbody tr { height: 51px; } diff --git a/core/css/styles.scss b/core/css/styles.scss index 54775f67f62ae..edcaeb17429a2 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -223,7 +223,7 @@ body { #controls { box-sizing: border-box; - position: relative; + position: sticky; height: 44px; padding: 0; margin: 0; @@ -234,6 +234,7 @@ body { -ms-user-select: none; user-select: none; display: flex; + top: 0; } /* position controls for apps with app-navigation */ From 9e6f9564ec11cd3c42a1e22a1d15c44594dd795b Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Wed, 20 Dec 2017 12:07:32 +0100 Subject: [PATCH 4/7] Properly show action icons Signed-off-by: Morris Jobke --- apps/files/css/files.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 5a5a3a5d30b24..8e81bf84b4fa9 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -20,7 +20,6 @@ .actions.creatable { position: relative; - z-index: -30; display: flex; flex: 1 1; .button:not(:last-child) { From 0fef6089279f7ffff01ba96bc3e2831b43b4636d Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Wed, 20 Dec 2017 12:24:17 +0100 Subject: [PATCH 5/7] Add the webkit sticky position prefix Signed-off-by: Morris Jobke --- core/css/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/core/css/styles.scss b/core/css/styles.scss index edcaeb17429a2..0ae5f45a3eb7b 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -223,6 +223,7 @@ body { #controls { box-sizing: border-box; + position: -webkit-sticky; position: sticky; height: 44px; padding: 0; From 3105a2780b8eaf5528e8025f7681d0291cf35778 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 20 Dec 2017 13:50:44 +0100 Subject: [PATCH 6/7] zindex fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index 0ae5f45a3eb7b..1b76e3c68de2d 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -229,7 +229,7 @@ body { 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; From 8cc90ab4de744f430b69f8a9f1f3447d0f926af0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 21 Dec 2017 16:22:54 +0100 Subject: [PATCH 7/7] Fixed breadcrumbs tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/tests/js/breadcrumbSpec.js | 43 +++++++++++++++++++-------- 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js index dd3eac017ec2f..5ec5ad2d6e8c6 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( + '
' + ); + $('#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( - '
' - ); - $('#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);