Merge pull request #7478 from nextcloud/breadcrumbs-buttons-fixes-gallery

Fixed breadcrumbs calculation and actions flow

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;
 }

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;
 			}

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);

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 */

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;
 }