From f717bed085b7ef8c1cc4bb982c63193a2c8bbdec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 3 Oct 2018 10:59:31 +0200
Subject: [PATCH 01/42] Grid init
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss     | 34 ++++++++++++++++++++++++++++++++++
 apps/files/js/filelist.js     | 10 ++++++++++
 apps/files/templates/list.php |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 5d8a20d86a..ed15865b32 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -726,3 +726,37 @@ table.dragshadow td.size {
 	height: 30px;
 	line-height: 30px;
 }
+
+/* GRID */
+#filestable.view-grid {
+	display: flex;
+	flex-direction: column;
+	thead {
+		display: none;
+	}
+	tbody {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, 180px);
+		justify-content: space-around;
+		row-gap: 15px;
+		tr {
+			display: block;
+			height: 180px;
+		}
+		td {
+			display: block;
+			&.selection {
+				position: absolute;
+				top: 0;
+				left: 0;
+				display: flex;
+				width: 44px;
+				label {
+					width: 44px;
+					height: 44px;
+					display: inline-block;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 94052b10b3..2f61fe71db 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -327,6 +327,9 @@
 
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
+			// Toggle for grid view
+			$('#view-button').on('click', this._onGridToggle);
+
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);
 			$(window).resize(this._onResize);
@@ -587,6 +590,13 @@
 			this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
 		},
 
+		/**
+		 * Event handler for grid view toggle
+		 */
+		_onGridToggle: function() {
+			$('.list-container').toggleClass('view-grid');
+		},
+
 		/**
 		 * Event handler when leaving previously hidden state
 		 */
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 9cae72a176..f9cd5a2529 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -38,7 +38,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
+<table id="filestable" class="view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
 	<thead>
 		<tr>
 			<th id="headerSelection" class="hidden column-selection">

From 10c96656a23c596fe1f6af16f14f6e2fe5b4517b Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 12:18:50 +0200
Subject: [PATCH 02/42] Adjust design of grid view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 72 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index ed15865b32..f8185977de 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -731,26 +731,89 @@ table.dragshadow td.size {
 #filestable.view-grid {
 	display: flex;
 	flex-direction: column;
+
 	thead {
 		display: none;
 	}
+
 	tbody {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, 180px);
 		justify-content: space-around;
 		row-gap: 15px;
+
 		tr {
 			display: block;
+			position: relative;
 			height: 180px;
 		}
+
 		td {
-			display: block;
+			display: inline;
+			border-bottom: none;
+
+			&.filename {
+				.thumbnail-wrapper {
+					min-width: 0;
+
+					.thumbnail {
+						width: 130px;
+						height: 130px;
+						background-size: 130px;
+						margin-left: 26px;
+
+						/* Position favorite star related to checkbox to left and 3-dot menu below */
+						.favorite-mark {
+							padding: 14px;
+							right: -24px;
+						}
+					}
+				}
+
+				.name {
+					height: 100%;
+
+					.nametext {
+						display: inline-block;
+						width: initial;
+						height: initial;
+						overflow: initial;
+						margin-top: 135px;
+						padding-right: 0;
+						text-align: right;
+
+						.innernametext {
+							display: inline-block;
+							max-width: 80px;
+						}
+
+						/* No space for extension in grid view */
+						.extension {
+							display: none;
+						}
+					}
+
+					.fileactions {
+						height: initial;
+						margin-top: 135px;
+					}
+				}
+			}
+
+			/* No space for filesize and date in grid view */
+			&.filesize,
+			&.date {
+				display: none;
+			}
+
 			&.selection {
 				position: absolute;
 				top: 0;
 				left: 0;
 				display: flex;
 				width: 44px;
+				z-index: 10;
+
 				label {
 					width: 44px;
 					height: 44px;
@@ -759,4 +822,9 @@ table.dragshadow td.size {
 			}
 		}
 	}
-}
\ No newline at end of file
+
+	/* Do not show "Shared" text next to icon as there is no space */
+	#fileList .action.action-share.permanent.shared-style span:not(.icon) {
+		display: none;
+	}
+}

From 34038136b03d8cefef533d1944b0bb1420630ab8 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 12:25:56 +0200
Subject: [PATCH 03/42] Fix popovermenu position

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index f8185977de..c8bac60538 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -746,6 +746,7 @@ table.dragshadow td.size {
 			display: block;
 			position: relative;
 			height: 180px;
+			border-radius: var(--border-radius);
 		}
 
 		td {
@@ -827,4 +828,16 @@ table.dragshadow td.size {
 	#fileList .action.action-share.permanent.shared-style span:not(.icon) {
 		display: none;
 	}
+
+	/* Position actions menu below file */
+	.popovermenu {
+		left: 0;
+		width: 169px;
+
+		/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
+		.menuitem span:not(.icon) {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
 }

From 1983f91e29d697ca24d46d07fc669f3431435416 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 12:27:39 +0200
Subject: [PATCH 04/42] Fix grey background behind selection checkbox

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index c8bac60538..925d25fa0f 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -814,6 +814,7 @@ table.dragshadow td.size {
 				display: flex;
 				width: 44px;
 				z-index: 10;
+				background: transparent;
 
 				label {
 					width: 44px;

From 5b293a96f231504085db934383ea9c94db7c3a73 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 12:33:18 +0200
Subject: [PATCH 05/42] Also add border-radius to thumbnail

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 925d25fa0f..c08de6cfeb 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -762,6 +762,7 @@ table.dragshadow td.size {
 						height: 130px;
 						background-size: 130px;
 						margin-left: 26px;
+						border-radius: var(--border-radius);
 
 						/* Position favorite star related to checkbox to left and 3-dot menu below */
 						.favorite-mark {

From 32d6090c8bca8db45bf5f78c7a1f2037a1411e29 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 13:08:00 +0200
Subject: [PATCH 06/42] Fetch high resolution thumbnails for grid view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/templates/list.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index f9cd5a2529..8238ec82f5 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -38,7 +38,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" class="view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
+<table id="filestable" class="view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
 	<thead>
 		<tr>
 			<th id="headerSelection" class="hidden column-selection">

From 2a42a8da3e3dfa6edf04feaf6f05f87fa4d3969b Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 13:19:08 +0200
Subject: [PATCH 07/42] Center align the footer file number & size summary

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index c08de6cfeb..6a2aa604c6 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -842,4 +842,27 @@ table.dragshadow td.size {
 			text-overflow: ellipsis;
 		}
 	}
+
+	/* Center align the footer file number & size summary */
+	tfoot {
+		display: grid;
+
+		.summary {
+			display: inline-block;
+			margin: 0 auto;
+
+			td {
+				padding-top: 50px;
+
+				&:first-child,
+				&.date {
+					display: none;
+				}
+
+				.info {
+				    margin-left: 0;
+				}
+			}
+		}
+	}
 }

From e704899e2229428c7da1a247409794f7462ec34d Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 18:09:48 +0200
Subject: [PATCH 08/42] Show view toggle in controls bar

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss     | 19 +++++++++++++++++++
 apps/files/js/filelist.js     |  2 +-
 apps/files/templates/list.php |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 6a2aa604c6..82c244cff0 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -866,3 +866,22 @@ table.dragshadow td.size {
 		}
 	}
 }
+
+/* Grid view toggle */
+.view-toggle {
+	background-color: transparent;
+	border: none;
+	margin: 0;
+	padding: 22px;
+	opacity: .5;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+}
+
+/* Hide legacy Gallery toggle */
+#gallery-button {
+	display: none;
+}
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 2f61fe71db..441b8f0a12 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -328,7 +328,7 @@
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
 			// Toggle for grid view
-			$('#view-button').on('click', this._onGridToggle);
+			$('#view-toggle').on('click', this._onGridToggle);
 
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 8238ec82f5..c77cbb4d7c 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -24,6 +24,7 @@
 	<?php endif;?>
 	<input type="hidden" class="max_human_file_size"
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
+	<button id="view-toggle" class="button view-toggle icon-toggle-pictures has-tooltip" title="<?php p($l->t('Toggle grid view'))?>"></button>
 </div>
 
 <div id="emptycontent" class="hidden">
@@ -38,7 +39,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" class="view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
+<table id="filestable" class="list-container view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
 	<thead>
 		<tr>
 			<th id="headerSelection" class="hidden column-selection">

From 39ff82f70796bff9d2f0321d03213ec3ea9b713f Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 3 Oct 2018 21:42:24 +0200
Subject: [PATCH 09/42] Use grid view in other file views too

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/templates/recentlist.php               | 2 +-
 apps/files/templates/simplelist.php               | 2 +-
 apps/files/tests/js/favoritesfilelistspec.js      | 2 +-
 apps/files/tests/js/fileUploadSpec.js             | 2 +-
 apps/files/tests/js/fileactionsSpec.js            | 2 +-
 apps/files/tests/js/filelistSpec.js               | 2 +-
 apps/files_external/templates/list.php            | 2 +-
 apps/files_sharing/templates/list.php             | 2 +-
 apps/files_sharing/tests/js/publicAppSpec.js      | 2 +-
 apps/files_sharing/tests/js/shareSpec.js          | 6 +++---
 apps/files_sharing/tests/js/sharedfilelistSpec.js | 4 ++--
 apps/files_trashbin/templates/index.php           | 2 +-
 apps/files_trashbin/tests/js/filelistSpec.js      | 2 +-
 core/templates/filepicker.html                    | 2 +-
 14 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/files/templates/recentlist.php b/apps/files/templates/recentlist.php
index cfdb95c80a..4c269c2025 100644
--- a/apps/files/templates/recentlist.php
+++ b/apps/files/templates/recentlist.php
@@ -11,7 +11,7 @@
 	<p></p>
 </div>
 
-<table id="filestable">
+<table id="filestable" class="list-container view-grid">
 	<thead>
 	<tr>
 		<th id='headerName' class="hidden column-name">
diff --git a/apps/files/templates/simplelist.php b/apps/files/templates/simplelist.php
index 78adb21922..a99607ea64 100644
--- a/apps/files/templates/simplelist.php
+++ b/apps/files/templates/simplelist.php
@@ -13,7 +13,7 @@
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 	<p></p>
 </div>
-<table id="filestable">
+<table id="filestable" class="list-container view-grid">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">
diff --git a/apps/files/tests/js/favoritesfilelistspec.js b/apps/files/tests/js/favoritesfilelistspec.js
index d1421c84ee..5a206ca4de 100644
--- a/apps/files/tests/js/favoritesfilelistspec.js
+++ b/apps/files/tests/js/favoritesfilelistspec.js
@@ -25,7 +25,7 @@ describe('OCA.Files.FavoritesFileList tests', function() {
 			'</div>' +
 			// dummy table
 			// TODO: at some point this will be rendered by the fileList class itself!
-			'<table id="filestable">' +
+			'<table id="filestable" class="list-container view-grid">' +
 			'<thead><tr>' +
 			'<th id="headerName" class="hidden column-name">' +
 			'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
diff --git a/apps/files/tests/js/fileUploadSpec.js b/apps/files/tests/js/fileUploadSpec.js
index 6dde2734f1..ca88461faf 100644
--- a/apps/files/tests/js/fileUploadSpec.js
+++ b/apps/files/tests/js/fileUploadSpec.js
@@ -117,7 +117,7 @@ describe('OC.Upload tests', function() {
 		beforeEach(function() {
 			$('#testArea').append(
 				'<div id="tableContainer">' +
-				'<table id="filestable">' +
+				'<table id="filestable" class="list-container view-grid">' +
 				'<thead><tr>' +
 				'<th id="headerName" class="hidden column-name">' +
 				'<input type="checkbox" id="select_all_files" class="select-all">' +
diff --git a/apps/files/tests/js/fileactionsSpec.js b/apps/files/tests/js/fileactionsSpec.js
index 00d13859b5..024993b310 100644
--- a/apps/files/tests/js/fileactionsSpec.js
+++ b/apps/files/tests/js/fileactionsSpec.js
@@ -28,7 +28,7 @@ describe('OCA.Files.FileActions tests', function() {
 		var $body = $('#testArea');
 		$body.append('<input type="hidden" id="dir" value="/subdir"></input>');
 		$body.append('<input type="hidden" id="permissions" value="31"></input>');
-		$body.append('<table id="filestable"><tbody id="fileList"></tbody></table>');
+		$body.append('<table id="filestable" class="list-container view-grid"><tbody id="fileList"></tbody></table>');
 		// dummy files table
 		fileActions = new OCA.Files.FileActions();
 		fileActions.registerAction({
diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index 04102a8475..961761c3e8 100644
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -88,7 +88,7 @@ describe('OCA.Files.FileList tests', function() {
 			'<input type="file" id="file_upload_start" name="files[]" multiple="multiple">' +
 			// dummy table
 			// TODO: at some point this will be rendered by the fileList class itself!
-			'<table id="filestable">' +
+			'<table id="filestable" class="list-container view-grid">' +
 			'<thead><tr>' +
 			'<th id="headerName" class="hidden column-name">' +
 			'<input type="checkbox" id="select_all_files" class="select-all checkbox">' +
diff --git a/apps/files_external/templates/list.php b/apps/files_external/templates/list.php
index ed13ed8370..20f97dd4c0 100644
--- a/apps/files_external/templates/list.php
+++ b/apps/files_external/templates/list.php
@@ -11,7 +11,7 @@
 
 <input type="hidden" name="dir" value="" id="dir">
 
-<table id="filestable">
+<table id="filestable" class="list-container view-grid">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">
diff --git a/apps/files_sharing/templates/list.php b/apps/files_sharing/templates/list.php
index ec13b5c1f7..de92037a56 100644
--- a/apps/files_sharing/templates/list.php
+++ b/apps/files_sharing/templates/list.php
@@ -10,7 +10,7 @@
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 </div>
 
-<table id="filestable">
+<table id="filestable" class="list-container view-grid">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">
diff --git a/apps/files_sharing/tests/js/publicAppSpec.js b/apps/files_sharing/tests/js/publicAppSpec.js
index dc9000af15..9d24a7a794 100644
--- a/apps/files_sharing/tests/js/publicAppSpec.js
+++ b/apps/files_sharing/tests/js/publicAppSpec.js
@@ -60,7 +60,7 @@ describe('OCA.Sharing.PublicApp tests', function() {
 				'<input type="file" id="file_upload_start" name="files[]" multiple="multiple">' +
 				// dummy table
 				// TODO: at some point this will be rendered by the fileList class itself!
-				'<table id="filestable">' +
+				'<table id="filestable" class="list-container view-grid">' +
 				'<thead><tr>' +
 				'<th id="headerName" class="hidden column-name">' +
 				'<input type="checkbox" id="select_all_files" class="select-all">' +
diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index 554a3a82b3..39472fdeed 100644
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -28,7 +28,7 @@ describe('OCA.Sharing.Util tests', function() {
 		// dummy file list
 		var $div = $(
 			'<div id="listContainer">' +
-			'<table id="filestable">' +
+			'<table id="filestable" class="list-container view-grid">' +
 			'<thead></thead>' +
 			'<tbody id="fileList"></tbody>' +
 			'</table>' +
@@ -510,8 +510,8 @@ describe('OCA.Sharing.Util tests', function() {
 			OCA.Sharing.Util.attach(fileList);
 			fileList.setFiles(testFiles);
 		});
-		afterEach(function() { 
-			shareTabSpy.restore(); 
+		afterEach(function() {
+			shareTabSpy.restore();
 		});
 
 		it('updates fileInfoModel when shares changed', function() {
diff --git a/apps/files_sharing/tests/js/sharedfilelistSpec.js b/apps/files_sharing/tests/js/sharedfilelistSpec.js
index c9e2bafcc2..b0b7c1b9b9 100644
--- a/apps/files_sharing/tests/js/sharedfilelistSpec.js
+++ b/apps/files_sharing/tests/js/sharedfilelistSpec.js
@@ -28,7 +28,7 @@ describe('OCA.Sharing.FileList tests', function() {
 			'</div>' +
 			// dummy table
 			// TODO: at some point this will be rendered by the fileList class itself!
-			'<table id="filestable">' +
+			'<table id="filestable" class="list-container view-grid">' +
 			'<thead><tr>' +
 			'<th id="headerName" class="hidden column-name">' +
 			'<input type="checkbox" id="select_all_files" class="select-all">' +
@@ -701,7 +701,7 @@ describe('OCA.Sharing.FileList tests', function() {
 			// dummy file list
 			var $div = $(
 				'<div>' +
-				'<table id="filestable">' +
+				'<table id="filestable" class="list-container view-grid">' +
 				'<thead></thead>' +
 				'<tbody id="fileList"></tbody>' +
 				'</table>' +
diff --git a/apps/files_trashbin/templates/index.php b/apps/files_trashbin/templates/index.php
index dd24abb5de..054ffee617 100644
--- a/apps/files_trashbin/templates/index.php
+++ b/apps/files_trashbin/templates/index.php
@@ -18,7 +18,7 @@
 	<p></p>
 </div>
 
-<table id="filestable">
+<table id="filestable" class="list-container view-grid">
 	<thead>
 		<tr>
 			<th id="headerSelection" class="hidden column-selection">
diff --git a/apps/files_trashbin/tests/js/filelistSpec.js b/apps/files_trashbin/tests/js/filelistSpec.js
index e650a2f2d2..a56ee987b7 100644
--- a/apps/files_trashbin/tests/js/filelistSpec.js
+++ b/apps/files_trashbin/tests/js/filelistSpec.js
@@ -48,7 +48,7 @@ describe('OCA.Trashbin.FileList tests', function () {
 			'</div>' +
 			// dummy table
 			// TODO: at some point this will be rendered by the fileList class itself!
-			'<table id="filestable">' +
+			'<table id="filestable" class="list-container view-grid">' +
 			'<thead><tr><th id="headerName" class="hidden">' +
 			'<input type="checkbox" id="select_all_trash" class="select-all">' +
 			'<span class="name">Name</span>' +
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 215311348c..8b33b87908 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -5,7 +5,7 @@
 			<div class="icon-folder"></div>
 			<h2>{emptytext}</h2>
 		</div>
-		<table id="filestable" class="filelist">
+		<table id="filestable" class="filelist list-container view-grid">
 			<tbody>
 			<tr data-entryname="{filename}" data-type="{type}">
 				<td class="filename"

From 5b8dd4d4d69defe8cfb132eceacc52b3dac847e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 10:53:45 +0200
Subject: [PATCH 10/42] Fixed multiselect and header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 41 ++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 82c244cff0..5f7c998c51 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -172,7 +172,7 @@ table th, table th a {
 	color: var(--color-text-maxcontrast);
 }
 table.multiselect th a {
-	color: #000;
+	color: var(--color-main-text);
 }
 table th .columntitle {
 	display: block;
@@ -262,8 +262,7 @@ table.multiselect thead {
 }
 
 table.multiselect thead th {
-	background-color: rgba(255, 255, 255, 0.95); /* like controls bar */
-	color: #000;
+	background-color: var(--color-main-background);
 	font-weight: bold;
 	border-bottom: 0;
 }
@@ -732,10 +731,20 @@ table.dragshadow td.size {
 	display: flex;
 	flex-direction: column;
 
+	/* HEADER and MULTISELECT */
 	thead {
-		display: none;
+		tr {
+			display: block;
+			border-bottom: 1px solid var(--color-border);
+			background-color: var(--color-main-background);
+			th {
+				width: auto;
+				border: none;
+			}
+		}
 	}
 
+	/* MAIN FILE LIST */
 	tbody {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, 180px);
@@ -823,6 +832,18 @@ table.dragshadow td.size {
 					display: inline-block;
 				}
 			}
+
+			/* Position actions menu below file */
+			.popovermenu {
+				left: 0;
+				width: 169px;
+
+				/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
+				.menuitem span:not(.icon) {
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
 		}
 	}
 
@@ -831,18 +852,6 @@ table.dragshadow td.size {
 		display: none;
 	}
 
-	/* Position actions menu below file */
-	.popovermenu {
-		left: 0;
-		width: 169px;
-
-		/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
-		.menuitem span:not(.icon) {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
 	/* Center align the footer file number & size summary */
 	tfoot {
 		display: grid;

From bb56d75f2bc286c7da25f6d1beaf527ddce8166b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 11:28:27 +0200
Subject: [PATCH 11/42] Set grid variable and overall size adjustement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 60 ++++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 5f7c998c51..40be47210e 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -728,6 +728,7 @@ table.dragshadow td.size {
 
 /* GRID */
 #filestable.view-grid {
+	$grid-size: 180px;
 	display: flex;
 	flex-direction: column;
 
@@ -747,14 +748,14 @@ table.dragshadow td.size {
 	/* MAIN FILE LIST */
 	tbody {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, 180px);
+		grid-template-columns: repeat(auto-fill, $grid-size);
 		justify-content: space-around;
 		row-gap: 15px;
 
 		tr {
 			display: block;
 			position: relative;
-			height: 180px;
+			height: $grid-size;
 			border-radius: var(--border-radius);
 		}
 
@@ -767,16 +768,22 @@ table.dragshadow td.size {
 					min-width: 0;
 
 					.thumbnail {
-						width: 130px;
-						height: 130px;
-						background-size: 130px;
-						margin-left: 26px;
+						width: $grid-size;
+						height: $grid-size - 20px;
+						// 75% of the total size
+						background-size: $grid-size * 0.75;
+						margin: 0;
 						border-radius: var(--border-radius);
+						background-repeat: no-repeat;
+						background-position: center;
 
-						/* Position favorite star related to checkbox to left and 3-dot menu below */
+						/* Position favorite star related to checkbox to left and 3-dot menu below
+						 * Position is inherited from the selection while in grid view
+						 */
 						.favorite-mark {
 							padding: 14px;
-							right: -24px;
+							right: 0;
+							left: auto;
 						}
 					}
 				}
@@ -785,13 +792,16 @@ table.dragshadow td.size {
 					height: 100%;
 
 					.nametext {
-						display: inline-block;
-						width: initial;
-						height: initial;
-						overflow: initial;
-						margin-top: 135px;
+						display: flex;
+						height: 44px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-top: $grid-size - 44px;
 						padding-right: 0;
 						text-align: right;
+						line-height: 44px;
+						padding-left: 14px; // same as action icon right padding
 
 						.innernametext {
 							display: inline-block;
@@ -806,7 +816,17 @@ table.dragshadow td.size {
 
 					.fileactions {
 						height: initial;
-						margin-top: 135px;
+						margin-top: $grid-size - 44px;
+						display: flex;
+						align-items: center;
+						.action {
+							padding: 14px 14px;
+							width: 44px;
+							height: 44px;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
 					}
 				}
 			}
@@ -817,26 +837,32 @@ table.dragshadow td.size {
 				display: none;
 			}
 
-			&.selection {
+			&.selection,
+			&.filename .favorite-mark {
 				position: absolute;
 				top: 0;
 				left: 0;
 				display: flex;
 				width: 44px;
+				height: 44px;
 				z-index: 10;
 				background: transparent;
 
 				label {
 					width: 44px;
 					height: 44px;
-					display: inline-block;
+					display: inline-flex;
+					&::before {
+						margin: 0;
+					}
 				}
 			}
 
 			/* Position actions menu below file */
 			.popovermenu {
 				left: 0;
-				width: 169px;
+				width: $grid-size - 10px; // 2 * margin
+				margin: 0 5px;
 
 				/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
 				.menuitem span:not(.icon) {

From 4911f06c3ebe47eb913193e1dc89247d08a3718a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 12:09:23 +0200
Subject: [PATCH 12/42] Loading hidden fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 40be47210e..8f44a69998 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -727,8 +727,8 @@ table.dragshadow td.size {
 }
 
 /* GRID */
-#filestable.view-grid {
-	$grid-size: 180px;
+#filestable.view-grid:not(.hidden) {
+	$grid-size: 160px;
 	display: flex;
 	flex-direction: column;
 

From 49fda8ba56860918d2e424ca07c94c08237846d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 12:56:02 +0200
Subject: [PATCH 13/42] Hidden footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 8f44a69998..2f03a4b202 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -882,7 +882,7 @@ table.dragshadow td.size {
 	tfoot {
 		display: grid;
 
-		.summary {
+		.summary:not(.hidden) {
 			display: inline-block;
 			margin: 0 auto;
 

From c4cce1413487f5a0e870dd2139a4c624a97981fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 15:14:15 +0200
Subject: [PATCH 14/42] Remember toggle and events handler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/appinfo/routes.php               |  5 +++++
 apps/files/js/filelist.js                   | 19 +++++++++++++++----
 apps/files/lib/Controller/ApiController.php | 12 ++++++++++++
 apps/files/list.php                         |  3 +++
 apps/files/templates/list.php               |  6 ++++--
 core/css/icons.scss                         |  1 +
 6 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/apps/files/appinfo/routes.php b/apps/files/appinfo/routes.php
index 1147bdf9c4..61bc1d99a5 100644
--- a/apps/files/appinfo/routes.php
+++ b/apps/files/appinfo/routes.php
@@ -61,6 +61,11 @@ $application->registerRoutes(
 				'url' => '/api/v1/showhidden',
 				'verb' => 'POST'
 			],
+			[
+				'name' => 'API#showGridView',
+				'url' => '/api/v1/showgridview',
+				'verb' => 'POST'
+			],
 			[
 				'name' => 'view#index',
 				'url' => '/',
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 441b8f0a12..357b1b0601 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -328,7 +328,8 @@
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
 			// Toggle for grid view
-			$('#view-toggle').on('click', this._onGridToggle);
+			this.$showGridView = $('input#showgridview');
+			this.$showGridView.on('change', _.bind(this._onGridviewChange, this));
 
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);
@@ -591,10 +592,20 @@
 		},
 
 		/**
-		 * Event handler for grid view toggle
+		 * Toggle showing gridview by default or not
+		 *
+		 * @returns {undefined}
 		 */
-		_onGridToggle: function() {
-			$('.list-container').toggleClass('view-grid');
+		_onGridviewChange: function() {
+			var show = this.$showGridView.is(':checked');
+			$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
+				show: show
+			});
+			this.$showGridView.next('#view-toggle')
+				.removeClass('icon-toggle-filelist icon-toggle-pictures')
+				.addClass(show ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
+				
+			$('.list-container').toggleClass('view-grid', show);
 		},
 
 		/**
diff --git a/apps/files/lib/Controller/ApiController.php b/apps/files/lib/Controller/ApiController.php
index 9443b9776a..3c1eb6e43f 100644
--- a/apps/files/lib/Controller/ApiController.php
+++ b/apps/files/lib/Controller/ApiController.php
@@ -267,6 +267,18 @@ class ApiController extends Controller {
 		return new Response();
 	}
 
+	/**
+	 * Toggle default for files grid view
+	 *
+	 * @NoAdminRequired
+	 *
+	 * @param bool $show
+	 */
+	public function showGridView($show) {
+		$this->config->setUserValue($this->userSession->getUser()->getUID(), 'files', 'show_grid', (int)$show);
+		return new Response();
+	}
+
 	/**
 	 * Toggle default for showing/hiding xxx folder
 	 *
diff --git a/apps/files/list.php b/apps/files/list.php
index 93044d4c58..3b54d5ed24 100644
--- a/apps/files/list.php
+++ b/apps/files/list.php
@@ -22,11 +22,14 @@
  */
 
 $config = \OC::$server->getConfig();
+$userSession = \OC::$server->getUserSession();
 // TODO: move this to the generated config.js
 $publicUploadEnabled = $config->getAppValue('core', 'shareapi_allow_public_upload', 'yes');
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', false);
 
 // renders the controls and table headers template
 $tmpl = new OCP\Template('files', 'list', '');
 $tmpl->assign('publicUploadEnabled', $publicUploadEnabled);
+$tmpl->assign('showgridview', $showgridview);
 $tmpl->printPage();
 
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index c77cbb4d7c..0c92cf8a1d 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -24,7 +24,9 @@
 	<?php endif;?>
 	<input type="hidden" class="max_human_file_size"
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
-	<button id="view-toggle" class="button view-toggle icon-toggle-pictures has-tooltip" title="<?php p($l->t('Toggle grid view'))?>"></button>
+	<input type="checkbox" class="hidden" id="showgridview"
+		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
+	<label id="view-toggle" for="showgridview" class="button view-toggle <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>  has-tooltip" title="<?php p($l->t('Toggle grid view'))?>"></label>
 </div>
 
 <div id="emptycontent" class="hidden">
@@ -39,7 +41,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" class="list-container view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
+<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
 	<thead>
 		<tr>
 			<th id="headerSelection" class="hidden column-selection">
diff --git a/core/css/icons.scss b/core/css/icons.scss
index ca2a179d48..5b96d1223a 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -297,6 +297,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
 @include icon-black-white('toggle', 'actions', 1, true);
 @include icon-black-white('toggle-background', 'actions', 1, true);
 @include icon-black-white('toggle-pictures', 'actions', 1, true);
+@include icon-black-white('toggle-filelist', 'actions', 1, true);
 @include icon-black-white('triangle-e', 'actions', 1, true);
 @include icon-black-white('triangle-n', 'actions', 1, true);
 @include icon-black-white('triangle-s', 'actions', 1, true);

From 872b866a694e991671230857b30c36888234ca53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 15:17:24 +0200
Subject: [PATCH 15/42] Tooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss     | 2 +-
 apps/files/js/filelist.js     | 1 +
 apps/files/templates/list.php | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 2f03a4b202..b031737521 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -903,7 +903,7 @@ table.dragshadow td.size {
 }
 
 /* Grid view toggle */
-.view-toggle {
+#view-toggle {
 	background-color: transparent;
 	border: none;
 	margin: 0;
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 357b1b0601..65d2654541 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -330,6 +330,7 @@
 			// Toggle for grid view
 			this.$showGridView = $('input#showgridview');
 			this.$showGridView.on('change', _.bind(this._onGridviewChange, this));
+			$('#view-toggle').tooltip({placement: 'bottom'});
 
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 0c92cf8a1d..74821d7931 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -26,7 +26,7 @@
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
 	<input type="checkbox" class="hidden" id="showgridview"
 		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button view-toggle <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>  has-tooltip" title="<?php p($l->t('Toggle grid view'))?>"></label>
+	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>" title="<?php p($l->t('Toggle grid view'))?>"></label>
 </div>
 
 <div id="emptycontent" class="hidden">

From cd1cfe002d93684f54ece518d597a546d96339f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 18:45:23 +0200
Subject: [PATCH 16/42] Improve default visual and selection + default to file
 link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 53 +++++++++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index b031737521..2d4e65f1f4 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -729,6 +729,7 @@ table.dragshadow td.size {
 /* GRID */
 #filestable.view-grid:not(.hidden) {
 	$grid-size: 160px;
+	$grid-pad: 14px;
 	display: flex;
 	flex-direction: column;
 
@@ -751,12 +752,22 @@ table.dragshadow td.size {
 		grid-template-columns: repeat(auto-fill, $grid-size);
 		justify-content: space-around;
 		row-gap: 15px;
+		margin: 15px 0;
 
 		tr {
 			display: block;
 			position: relative;
-			height: $grid-size;
+			height: $grid-size + 44px;
 			border-radius: var(--border-radius);
+			&:hover,
+			&.selected {
+				background-color: transparent;
+				.thumbnail-wrapper,
+				.nametext,
+				.fileactions {
+					background-color: var(--color-background-dark);
+				}
+			}
 		}
 
 		td {
@@ -766,12 +777,19 @@ table.dragshadow td.size {
 			&.filename {
 				.thumbnail-wrapper {
 					min-width: 0;
+					max-width: none;
+					position: absolute;
+					width: $grid-size;
+					height: $grid-size;
+					padding: $grid-pad; // same as action icon bottom and right padding
+					top: 0;
+					left: 0;
+					z-index: -1; // make sure the default click is the link
 
 					.thumbnail {
-						width: $grid-size;
-						height: $grid-size - 20px;
-						// 75% of the total size
-						background-size: $grid-size * 0.75;
+						width: calc(100% - 2 * #{$grid-pad});
+						height: calc(100% - 2 * #{$grid-pad}); //action icon padding
+						background-size: contain;
 						margin: 0;
 						border-radius: var(--border-radius);
 						background-repeat: no-repeat;
@@ -781,15 +799,21 @@ table.dragshadow td.size {
 						 * Position is inherited from the selection while in grid view
 						 */
 						.favorite-mark {
-							padding: 14px;
-							right: 0;
+							padding: $grid-pad;
 							left: auto;
+							top: -22px; // center in corner of thumbnail
+							right: -22px; // center in corner of thumbnail
 						}
 					}
 				}
 
 				.name {
 					height: 100%;
+					// we but the thumbnail in background to ensure
+					// the name is the default click handler
+					// force back the cursor which have been overrided
+					// and disabled for some reason...
+					cursor: pointer !important;
 
 					.nametext {
 						display: flex;
@@ -797,11 +821,11 @@ table.dragshadow td.size {
 						overflow: hidden;
 						text-overflow: ellipsis;
 						white-space: nowrap;
-						margin-top: $grid-size - 44px;
+						margin-top: $grid-size;
 						padding-right: 0;
 						text-align: right;
 						line-height: 44px;
-						padding-left: 14px; // same as action icon right padding
+						padding-left: $grid-pad; // same as action icon right padding
 
 						.innernametext {
 							display: inline-block;
@@ -816,11 +840,11 @@ table.dragshadow td.size {
 
 					.fileactions {
 						height: initial;
-						margin-top: $grid-size - 44px;
+						margin-top: $grid-size;
 						display: flex;
 						align-items: center;
 						.action {
-							padding: 14px 14px;
+							padding: $grid-pad;
 							width: 44px;
 							height: 44px;
 							display: flex;
@@ -840,8 +864,8 @@ table.dragshadow td.size {
 			&.selection,
 			&.filename .favorite-mark {
 				position: absolute;
-				top: 0;
-				left: 0;
+				top: -8px; // half the checkbox width, center on corner of thumbnail
+				left: -8px; // half the checkbox width, center on corner of thumbnail
 				display: flex;
 				width: 44px;
 				height: 44px;
@@ -852,8 +876,11 @@ table.dragshadow td.size {
 					width: 44px;
 					height: 44px;
 					display: inline-flex;
+					padding: $grid-pad; // like any action icon
 					&::before {
 						margin: 0;
+						width: $grid-pad; // 16px - border
+						height: $grid-pad; // 16px - border
 					}
 				}
 			}

From 07224da3d47271fce6d364fee73bc381a23a48f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 18:49:06 +0200
Subject: [PATCH 17/42] Fix focus background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 2d4e65f1f4..43af02428c 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -759,12 +759,15 @@ table.dragshadow td.size {
 			position: relative;
 			height: $grid-size + 44px;
 			border-radius: var(--border-radius);
-			&:hover,
-			&.selected {
+			&:hover, &:focus, &:active,
+			&.selected,
+			&.searchresult,
+			.name:focus {
 				background-color: transparent;
 				.thumbnail-wrapper,
 				.nametext,
 				.fileactions {
+					transition: background-color 0.3s ease;
 					background-color: var(--color-background-dark);
 				}
 			}

From 184c1b03e380734906c725a2140a0fd7f6fc7d0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 18:49:32 +0200
Subject: [PATCH 18/42] Default to grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/list.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/list.php b/apps/files/list.php
index 3b54d5ed24..f18dc5964b 100644
--- a/apps/files/list.php
+++ b/apps/files/list.php
@@ -25,7 +25,7 @@ $config = \OC::$server->getConfig();
 $userSession = \OC::$server->getUserSession();
 // TODO: move this to the generated config.js
 $publicUploadEnabled = $config->getAppValue('core', 'shareapi_allow_public_upload', 'yes');
-$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', false);
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
 
 // renders the controls and table headers template
 $tmpl = new OCP\Template('files', 'list', '');

From 1f1dddcc5e50a2ea257134c1a331b69172e32df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 18:54:02 +0200
Subject: [PATCH 19/42] Fix spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 43af02428c..b168f9d63d 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -757,7 +757,7 @@ table.dragshadow td.size {
 		tr {
 			display: block;
 			position: relative;
-			height: $grid-size + 44px;
+			height: $grid-size + 44px - $grid-pad;
 			border-radius: var(--border-radius);
 			&:hover, &:focus, &:active,
 			&.selected,
@@ -824,7 +824,7 @@ table.dragshadow td.size {
 						overflow: hidden;
 						text-overflow: ellipsis;
 						white-space: nowrap;
-						margin-top: $grid-size;
+						margin-top: $grid-size - $grid-pad;
 						padding-right: 0;
 						text-align: right;
 						line-height: 44px;
@@ -843,7 +843,7 @@ table.dragshadow td.size {
 
 					.fileactions {
 						height: initial;
-						margin-top: $grid-size;
+						margin-top: $grid-size - $grid-pad;
 						display: flex;
 						align-items: center;
 						.action {

From b532c9516272ac6687958d2f3f72fdd9e385ba15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Oct 2018 19:11:09 +0200
Subject: [PATCH 20/42] Border radius
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index b168f9d63d..57c9baa1a3 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -812,6 +812,11 @@ table.dragshadow td.size {
 
 				.name {
 					height: 100%;
+					border-radius: var(--border-radius);
+					// since we're using thumbnail, name and actions bg
+					// we need to hide the overflow for the radius to show
+					// luckily the popovermenu is outside .name
+					overflow: hidden;
 					// we but the thumbnail in background to ensure
 					// the name is the default click handler
 					// force back the cursor which have been overrided

From 64607f5491f5616f12d0b7cf52b5cf9621919acd Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 19:02:00 +0200
Subject: [PATCH 21/42] If an avatar is present, show that instead of the icon

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 57c9baa1a3..219bec8017 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -759,11 +759,13 @@ table.dragshadow td.size {
 			position: relative;
 			height: $grid-size + 44px - $grid-pad;
 			border-radius: var(--border-radius);
+
 			&:hover, &:focus, &:active,
 			&.selected,
 			&.searchresult,
 			.name:focus {
 				background-color: transparent;
+
 				.thumbnail-wrapper,
 				.nametext,
 				.fileactions {
@@ -851,6 +853,7 @@ table.dragshadow td.size {
 						margin-top: $grid-size - $grid-pad;
 						display: flex;
 						align-items: center;
+
 						.action {
 							padding: $grid-pad;
 							width: 44px;
@@ -858,6 +861,19 @@ table.dragshadow td.size {
 							display: flex;
 							align-items: center;
 							justify-content: center;
+
+							&.action-share.permanent.shared-style span {
+								/* Do not show "Shared" text next to icon as there is no space */
+								&:not(.icon) {
+									display: none;
+								}
+
+								/* If an avatar is present, show that instead of the icon */
+								&.avatar {
+									display: inline-block;
+									position: absolute;
+								}
+							}
 						}
 					}
 				}
@@ -908,11 +924,6 @@ table.dragshadow td.size {
 		}
 	}
 
-	/* Do not show "Shared" text next to icon as there is no space */
-	#fileList .action.action-share.permanent.shared-style span:not(.icon) {
-		display: none;
-	}
-
 	/* Center align the footer file number & size summary */
 	tfoot {
 		display: grid;

From 1d486673f64686772c14e6127e2adbaf1788b6f9 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 19:19:08 +0200
Subject: [PATCH 22/42] If there is a comment, show it instead of the share
 icon

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 219bec8017..c6a0e43fa9 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -874,6 +874,11 @@ table.dragshadow td.size {
 									position: absolute;
 								}
 							}
+
+							/* If there is a comment, show it instead of the share icon */
+							&.action-comment ~ .action-share {
+								display: none;
+							}
 						}
 					}
 				}

From c0648efe3aeef94698983dd092f262eef0509504 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 19:30:47 +0200
Subject: [PATCH 23/42] Remove negative z-index on thumbnail-wrapper, caused
 thumbnails to not show

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 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 c6a0e43fa9..2480b1025c 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -789,7 +789,6 @@ table.dragshadow td.size {
 					padding: $grid-pad; // same as action icon bottom and right padding
 					top: 0;
 					left: 0;
-					z-index: -1; // make sure the default click is the link
 
 					.thumbnail {
 						width: calc(100% - 2 * #{$grid-pad});

From 35ef2b2737eef32e3bece18dfec6d371fa346623 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 19:51:19 +0200
Subject: [PATCH 24/42] Adjustments for public share page, actions menu, view
 toggle

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 2480b1025c..e3e9481d07 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -966,6 +966,20 @@ table.dragshadow td.size {
 	}
 }
 
+/* Adjustments for public share page */
+#body-public {
+	/* Position actions menu correctly below 3-dot-menu */
+	#filestable.view-grid:not(.hidden) tbody td .popovermenu {
+		left: -80px;
+	}
+
+	/* Right-align view toggle on public share page */
+	#view-toggle {
+		position: absolute;
+		right: 0;
+	}
+}
+
 /* Hide legacy Gallery toggle */
 #gallery-button {
 	display: none;

From bdfece12b2395235eedad6123a0c40bdea65e3a1 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 19:54:36 +0200
Subject: [PATCH 25/42] Fix tabbability to view-toggle, action on Enter to be
 fixed

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/templates/list.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 74821d7931..19e93e17ec 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -26,7 +26,7 @@
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
 	<input type="checkbox" class="hidden" id="showgridview"
 		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>" title="<?php p($l->t('Toggle grid view'))?>"></label>
+	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>" title="<?php p($l->t('Toggle grid view'))?>" tabindex="0"></label>
 </div>
 
 <div id="emptycontent" class="hidden">

From d979da3755bc271b6d60c952fd67bd7125a38e92 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 20:04:49 +0200
Subject: [PATCH 26/42] In "Deleted files", do not show "Restore" text next to
 icon as there is no space

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index e3e9481d07..bb6d942f30 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -874,6 +874,13 @@ table.dragshadow td.size {
 								}
 							}
 
+							/* In "Deleted files", do not show "Restore" text next to icon as there is no space */
+							&.action-restore.permanent span {
+								&:not(.icon) {
+									display: none;
+								}
+							}
+
 							/* If there is a comment, show it instead of the share icon */
 							&.action-comment ~ .action-share {
 								display: none;

From b62a48b2cd43a5950e842aa6cbb4c2f1c7f1b05b Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 20:43:27 +0200
Subject: [PATCH 27/42] Add back slightly translucent background for controls
 bar

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/css-variables.scss | 1 +
 core/css/styles.scss        | 2 +-
 core/css/variables.scss     | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 058e018b41..825345aae2 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -5,6 +5,7 @@
 :root {
 	--color-main-text: $color-main-text;
 	--color-main-background: $color-main-background;
+	--color-main-background-translucent: $color-main-background-translucent;
 
 	--color-background-dark: $color-background-dark;
 	--color-background-darker: $color-background-darker;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index dc217fb8f2..612fd779fc 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -167,7 +167,7 @@ body {
 	height: 44px;
 	padding: 0;
 	margin: 0;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background-translucent);
 	z-index: 60;
 	-webkit-user-select: none;
 	-moz-user-select: none;
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 8617c6e27d..55eac440db 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -33,6 +33,7 @@
 // DEPRECATED, please use CSS4 vars
 $color-main-text: #000 !default;
 $color-main-background: #fff !default;
+$color-main-background-translucent: hsla(0, 100%, 100%, .97) !default;
 
 // used for different active/disabled states
 $color-background-dark: nc-darken($color-main-background, 7%) !default;

From 25ae3ea29662d2312d09de2a9d0f634e23e9adf6 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 20:51:53 +0200
Subject: [PATCH 28/42] More space for filename on public share page since
 there is no share icon

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index bb6d942f30..61dbdaaf02 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -975,9 +975,16 @@ table.dragshadow td.size {
 
 /* Adjustments for public share page */
 #body-public {
-	/* Position actions menu correctly below 3-dot-menu */
-	#filestable.view-grid:not(.hidden) tbody td .popovermenu {
-		left: -80px;
+	#filestable.view-grid:not(.hidden) tbody td {
+		/* More space for filename since there is no share icon */
+		&.filename .name .nametext .innernametext {
+			max-width: 124px;
+		}
+
+		/* Position actions menu correctly below 3-dot-menu */
+		.popovermenu {
+			left: -80px;
+		}
 	}
 
 	/* Right-align view toggle on public share page */

From 8614693e9a6559542143fc3e5772de16205a008a Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 12 Oct 2018 23:07:52 +0200
Subject: [PATCH 29/42] Reduce bottom whitespace on share link page

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 61dbdaaf02..73fc4b230f 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -594,7 +594,13 @@ a.action > img {
 .summary {
 	opacity: .3;
 	/* add whitespace to bottom of files list to correctly show dropdowns */
-	height: 300px;
+	height: 250px;
+}
+/* Less whitespace needed on link share page
+ * as there is a footer and action menus have fewer entries.
+ */
+#body-public .summary {
+	height: 180px;
 }
 .summary:hover,
 .summary:focus,
@@ -973,7 +979,7 @@ table.dragshadow td.size {
 	}
 }
 
-/* Adjustments for public share page */
+/* Adjustments for link share page */
 #body-public {
 	#filestable.view-grid:not(.hidden) tbody td {
 		/* More space for filename since there is no share icon */
@@ -987,7 +993,7 @@ table.dragshadow td.size {
 		}
 	}
 
-	/* Right-align view toggle on public share page */
+	/* Right-align view toggle on link share page */
 	#view-toggle {
 		position: absolute;
 		right: 0;

From 0f299d1077ea1b0fd4b2d7809026cc9e0fe7bec0 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 18 Oct 2018 13:42:01 +0200
Subject: [PATCH 30/42] Revert "Remove negative z-index on thumbnail-wrapper,
 caused thumbnails to not show"

This reverts commit fb7fb1cebae5af129c4474a380e0f5e55f79569f.

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/files/css/files.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 73fc4b230f..2b8c9aa283 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -795,6 +795,7 @@ table.dragshadow td.size {
 					padding: $grid-pad; // same as action icon bottom and right padding
 					top: 0;
 					left: 0;
+					z-index: -1; // make sure the default click is the link
 
 					.thumbnail {
 						width: calc(100% - 2 * #{$grid-pad});

From e51d1867c38f287d5e8115980b11cc749e7b0b21 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 18 Oct 2018 13:43:30 +0200
Subject: [PATCH 31/42] Fix translucent controls bar for dark themes

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/css/variables.scss b/core/css/variables.scss
index 55eac440db..3914389a53 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -33,7 +33,7 @@
 // DEPRECATED, please use CSS4 vars
 $color-main-text: #000 !default;
 $color-main-background: #fff !default;
-$color-main-background-translucent: hsla(0, 100%, 100%, .97) !default;
+$color-main-background-translucent: rgba($color-main-background, .97) !default;
 
 // used for different active/disabled states
 $color-background-dark: nc-darken($color-main-background, 7%) !default;

From b662977862848bf623c3c461a9fc12389c540b6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 08:18:14 +0200
Subject: [PATCH 32/42] Fix table hidden on empty folder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/js/filelist.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 65d2654541..213d65cdad 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -2780,8 +2780,9 @@
 			var permissions = this.getDirectoryPermissions();
 			var isCreatable = (permissions & OC.PERMISSION_CREATE) !== 0;
 			this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
+			this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
 			this.$el.find('#emptycontent .uploadmessage').toggleClass('hidden', !isCreatable || !this.isEmpty);
-			this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty);
+			this.$el.find('#filestable').toggleClass('hidden', this.isEmpty);
 		},
 		/**
 		 * Shows the loading mask.

From efdb535a5d04d800c4182ad473df5433640817f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 08:23:22 +0200
Subject: [PATCH 33/42] Fix grey background over thumbnail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 2b8c9aa283..30b6126637 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -769,7 +769,8 @@ table.dragshadow td.size {
 			&:hover, &:focus, &:active,
 			&.selected,
 			&.searchresult,
-			.name:focus {
+			.name:focus,
+			&.highlighted {
 				background-color: transparent;
 
 				.thumbnail-wrapper,

From 8652ada561baf9acac83ac88f713ab7560245cf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 08:27:27 +0200
Subject: [PATCH 34/42] Tooltip on hover only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/js/filelist.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 213d65cdad..6c86286d56 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -330,7 +330,7 @@
 			// Toggle for grid view
 			this.$showGridView = $('input#showgridview');
 			this.$showGridView.on('change', _.bind(this._onGridviewChange, this));
-			$('#view-toggle').tooltip({placement: 'bottom'});
+			$('#view-toggle').tooltip({placement: 'bottom', trigger: 'hover'});
 
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);

From e0dde083d0502a4a5374feb51ea38ceaeebf7c3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 08:43:02 +0200
Subject: [PATCH 35/42] Public fixes, request & default to grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/js/filelist.js                             | 9 ++++++---
 apps/files_sharing/lib/Controller/ShareController.php | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 6c86286d56..1f4d230cef 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -599,9 +599,12 @@
 		 */
 		_onGridviewChange: function() {
 			var show = this.$showGridView.is(':checked');
-			$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
-				show: show
-			});
+			// only save state if user is logged in
+			if (OC.currentUser) {
+				$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
+					show: show
+				});
+			}
 			this.$showGridView.next('#view-toggle')
 				.removeClass('icon-toggle-filelist icon-toggle-pictures')
 				.addClass(show ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
diff --git a/apps/files_sharing/lib/Controller/ShareController.php b/apps/files_sharing/lib/Controller/ShareController.php
index 8e9cc5a963..8d02cc82fd 100644
--- a/apps/files_sharing/lib/Controller/ShareController.php
+++ b/apps/files_sharing/lib/Controller/ShareController.php
@@ -338,6 +338,7 @@ class ShareController extends AuthPublicShareController {
 			$folder->assign('isPublic', true);
 			$folder->assign('hideFileList', $hideFileList);
 			$folder->assign('publicUploadEnabled', 'no');
+			$folder->assign('showgridview', true);
 			$folder->assign('uploadMaxFilesize', $maxUploadFilesize);
 			$folder->assign('uploadMaxHumanFilesize', \OCP\Util::humanFileSize($maxUploadFilesize));
 			$folder->assign('freeSpace', $freeSpace);

From ec05e5d0484f8293ecfb0304aacee07e49c24bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 08:54:09 +0200
Subject: [PATCH 36/42] Fix public background override
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files_sharing/css/public.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 1423705ffc..44b7e53d20 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -1,5 +1,4 @@
 #preview {
-	background: var(--color-main-background);
 	text-align: center;
 }
 

From bf6a1650cefab86c1199a550eb32aedf6ea93362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 08:59:34 +0200
Subject: [PATCH 37/42] Use preview-x & preview-y on public pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files_sharing/js/public.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index 2b7cea8d0d..1dd9f5af6c 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -229,10 +229,10 @@ OCA.Sharing.PublicApp = {
 			this.fileList.generatePreviewUrl = function (urlSpec) {
 				urlSpec = urlSpec || {};
 				if (!urlSpec.x) {
-					urlSpec.x = 32;
+					urlSpec.x = this.$table.data('preview-x') || 32;
 				}
 				if (!urlSpec.y) {
-					urlSpec.y = 32;
+					urlSpec.y = this.$table.data('preview-y') || 32;
 				}
 				urlSpec.x *= window.devicePixelRatio;
 				urlSpec.y *= window.devicePixelRatio;

From c039bd2bd115afd23b4f24578f62b50fe87d48b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 10:04:03 +0200
Subject: [PATCH 38/42] Filepicker grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/styles.scss  | 48 +++++++++++++++++++++++++++++++++++++++++--
 core/js/oc-dialogs.js |  2 ++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/core/css/styles.scss b/core/css/styles.scss
index 612fd779fc..b5968015d6 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -697,7 +697,6 @@ code {
 }
 
 /* ---- DIALOGS ---- */
-
 #oc-dialog-filepicker-content {
 	.dirtree {
 		width: 96%;
@@ -771,9 +770,54 @@ code {
 		.filesize {
 			text-align: right;
 		}
+		&.view-grid {
+			$grid-size: 120px;
+			$grid-pad: 10px;
+			$name-height: 20px;
+			display: flex;
+			flex-direction: column;
+
+			tbody {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, $grid-size);
+				justify-content: space-around;
+				row-gap: 15px;
+				margin: 15px 0;
+
+				tr {
+					display: block;
+					position: relative;
+					border-radius: var(--border-radius);
+					padding: $grid-pad;
+					display: flex;
+					flex-direction: column;
+					width: $grid-size - 2 * $grid-pad;
+
+					td {
+						border: none;
+						padding: 0;
+
+						&.filename {
+							padding: #{$grid-size - 2 * $grid-pad} 0 0 0;
+							background-position: center top;
+							background-size: contain;
+							line-height: $name-height;
+							height: $name-height;
+						}
+						&.filesize {
+							line-height: $name-height;
+							text-align: left;
+						}
+						&.date {
+							display: none;
+						}
+					}
+				}
+			}
+		}
 	}
 	.filepicker_element_selected {
-		background-color: lightblue;
+		background-color: var(--color-background-darker);
 	}
 }
 
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 7369298b8d..c42b35ddcf 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -899,6 +899,8 @@ var OCdialogs = {
 				if (entry.type === 'file') {
 					var urlSpec = {
 						file: dir + '/' + entry.name,
+						x: 100,
+						y: 100
 					};
 					var img = new Image();
 					var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);

From 26ca7a0e2f86cb76726073f2d73fd5cb8a1e09d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 10:38:00 +0200
Subject: [PATCH 39/42] Add filepicker toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/appinfo/routes.php               |  5 ++++
 apps/files/lib/Controller/ApiController.php | 11 ++++++++
 core/css/styles.scss                        | 24 +++++++++++++++-
 core/js/oc-dialogs.js                       | 31 +++++++++++++++++++++
 core/templates/filepicker.html              |  2 ++
 5 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/apps/files/appinfo/routes.php b/apps/files/appinfo/routes.php
index 61bc1d99a5..ef648bf285 100644
--- a/apps/files/appinfo/routes.php
+++ b/apps/files/appinfo/routes.php
@@ -66,6 +66,11 @@ $application->registerRoutes(
 				'url' => '/api/v1/showgridview',
 				'verb' => 'POST'
 			],
+			[
+				'name' => 'API#getGridView',
+				'url' => '/api/v1/showgridview',
+				'verb' => 'GET'
+			],
 			[
 				'name' => 'view#index',
 				'url' => '/',
diff --git a/apps/files/lib/Controller/ApiController.php b/apps/files/lib/Controller/ApiController.php
index 3c1eb6e43f..e70f34bd1a 100644
--- a/apps/files/lib/Controller/ApiController.php
+++ b/apps/files/lib/Controller/ApiController.php
@@ -38,6 +38,7 @@ use OCP\Files\NotFoundException;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\FileDisplayResponse;
 use OCP\AppFramework\Http\Response;
 use OCA\Files\Service\TagService;
@@ -279,6 +280,16 @@ class ApiController extends Controller {
 		return new Response();
 	}
 
+	/**
+	 * Get default settings for the grid view
+	 *
+	 * @NoAdminRequired
+	 */
+	public function getGridView() {
+		$status = $this->config->getUserValue($this->userSession->getUser()->getUID(), 'files', 'show_grid', '1') === '1';
+		return new JSONResponse(['gridview' => $status]);
+	}
+
 	/**
 	 * Toggle default for showing/hiding xxx folder
 	 *
diff --git a/core/css/styles.scss b/core/css/styles.scss
index b5968015d6..d9c0d7c6e4 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -698,10 +698,14 @@ code {
 
 /* ---- DIALOGS ---- */
 #oc-dialog-filepicker-content {
+	position: relative;
+
 	.dirtree {
-		width: 96%;
+		width: 100%;
 		flex-wrap: wrap;
 		padding-left: 12px;
+		padding-right: 44px;
+		box-sizing: border-box;
 
 		div:first-child a {
 			background-image: url('../img/places/home.svg?v=1');
@@ -721,6 +725,24 @@ code {
 			}
 		}
 	}
+
+	/* Grid view toggle */
+	#picker-view-toggle {
+		position: absolute;
+		background-color: transparent;
+		border: none;
+		margin: 0;
+		padding: 22px;
+		opacity: .5;
+		right: 0;
+		top: 0;
+
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+	}
+
 	.filelist-container {
 		box-sizing: border-box;
 		display: inline-block;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index c42b35ddcf..5231a94f33 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -208,6 +208,7 @@ var OCdialogs = {
 
 		this.filepicker.loading = true;
 		this.filepicker.filesClient = (OCA.Sharing && OCA.Sharing.PublicApp && OCA.Sharing.PublicApp.fileList)? OCA.Sharing.PublicApp.fileList.filesClient: OC.Files.getClient();
+
 		$.when(this._getFilePickerTemplate()).then(function($tmpl) {
 			self.filepicker.loading = false;
 			var dialogName = 'oc-dialog-filepicker-content';
@@ -237,6 +238,11 @@ var OCdialogs = {
 
 			$('body').append(self.$filePicker);
 
+			self.$showGridView = $('input#picker-showgridview');
+			self.$showGridView.on('change', _.bind(self._onGridviewChange, self));
+
+			self._getGridSettings();
+
 			self.$filePicker.ready(function() {
 				self.$filelist = self.$filePicker.find('.filelist tbody');
 				self.$dirTree = self.$filePicker.find('.dirtree');
@@ -779,6 +785,31 @@ var OCdialogs = {
 		//}
 		return dialogDeferred.promise();
 	},
+	// get the gridview setting and set the input accordingly
+	_getGridSettings: function() {
+		var self = this;
+		$.get(OC.generateUrl('/apps/files/api/v1/showgridview'), function(response) {
+			self.$showGridView.checked = response.gridview;
+			self.$showGridView.next('#picker-view-toggle')
+				.removeClass('icon-toggle-filelist icon-toggle-pictures')
+				.addClass(response.gridview ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
+			$('.list-container').toggleClass('view-grid', response.gridview);
+		});
+	},
+	_onGridviewChange: function() {
+		var show = this.$showGridView.is(':checked');
+		// only save state if user is logged in
+		if (OC.currentUser) {
+			$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
+				show: show
+			});
+		}
+		this.$showGridView.next('#picker-view-toggle')
+			.removeClass('icon-toggle-filelist icon-toggle-pictures')
+			.addClass(show ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
+			
+		$('.list-container').toggleClass('view-grid', show);
+	},
 	_getFilePickerTemplate: function() {
 		var defer = $.Deferred();
 		if(!this.$filePickerTemplate) {
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 8b33b87908..53daf4111b 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,5 +1,7 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb"></span>
+	<input type="checkbox" class="hidden" id="picker-showgridview" checked="checked" />
+	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist" tabindex="0"></label>
 	<div class="filelist-container">
 		<div class="emptycontent">
 			<div class="icon-folder"></div>

From cf57df6e734b57638480451e92bf22cebda70f26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 16:46:45 +0200
Subject: [PATCH 40/42] Restore table head
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/js/filelist.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 75cef4afec..3ccc2b866a 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -2804,6 +2804,7 @@
 			this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
 			this.$el.find('#emptycontent .uploadmessage').toggleClass('hidden', !isCreatable || !this.isEmpty);
 			this.$el.find('#filestable').toggleClass('hidden', this.isEmpty);
+			this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty);
 		},
 		/**
 		 * Shows the loading mask.

From 8013dab044e7dabb2b61c2aa7e0d47d095ad8e40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 16:49:56 +0200
Subject: [PATCH 41/42] Allow focus on input with keyboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss      | 3 ++-
 apps/files/templates/list.php  | 5 +++--
 core/css/styles.scss           | 4 ++++
 core/templates/filepicker.html | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index cca8585f43..002a09213d 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -973,7 +973,8 @@ table.dragshadow td.size {
 	opacity: .5;
 
 	&:hover,
-	&:focus {
+	&:focus,
+	#showgridview:focus + & {
 		opacity: 1;
 	}
 }
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 19e93e17ec..2740359436 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -24,9 +24,10 @@
 	<?php endif;?>
 	<input type="hidden" class="max_human_file_size"
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
-	<input type="checkbox" class="hidden" id="showgridview"
+	<input type="checkbox" class="hidden-visually" id="showgridview"
 		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>" title="<?php p($l->t('Toggle grid view'))?>" tabindex="0"></label>
+	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
+		   title="<?php p($l->t('Toggle grid view'))?>"></label>
 </div>
 
 <div id="emptycontent" class="hidden">
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0927687fc7..5f68a0d08e 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -742,6 +742,10 @@ code {
 			opacity: 1;
 		}
 	}
+	// keyboard focus
+	#picker-showgridview:focus + #picker-view-toggle {
+		opacity: 1;
+	}
 
 	.filelist-container {
 		box-sizing: border-box;
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 53daf4111b..4c66dfc707 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,7 +1,7 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb"></span>
-	<input type="checkbox" class="hidden" id="picker-showgridview" checked="checked" />
-	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist" tabindex="0"></label>
+	<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
+	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
 	<div class="filelist-container">
 		<div class="emptycontent">
 			<div class="icon-folder"></div>

From ede6472e52ab019c377640eb37ca3499d51ad8be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 18:07:15 +0200
Subject: [PATCH 42/42] Fix FF performance and recals issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 002a09213d..a643cb6258 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -733,8 +733,6 @@ table.dragshadow td.size {
 #filestable.view-grid:not(.hidden) {
 	$grid-size: 160px;
 	$grid-pad: 14px;
-	display: flex;
-	flex-direction: column;
 
 	/* HEADER and MULTISELECT */
 	thead {