Merge pull request #11573 from nextcloud/gridview-table

Files grid view

6 files changed, 113 insertions, 5 deletions

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 2f3e8aa648c..a2946672294 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/icons.scss b/core/css/icons.scss
index ca2a179d48f..5b96d1223a7 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);
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 6f65f00df19..5f68a0d08e0 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;
@@ -697,12 +697,15 @@ 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');
@@ -722,6 +725,28 @@ 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;
+		}
+	}
+	// keyboard focus
+	#picker-showgridview:focus + #picker-view-toggle {
+		opacity: 1;
+	}
+
 	.filelist-container {
 		box-sizing: border-box;
 		display: inline-block;
@@ -771,9 +796,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/css/variables.scss b/core/css/variables.scss
index 5a25f07bc34..dffd6403471 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -33,6 +33,7 @@
 // DEPRECATED, please use CSS4 vars
 $color-main-text: #222 !default; // Not #000 for better readability
 $color-main-background: #fff !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;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 7369298b8d5..5231a94f333 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) {
@@ -899,6 +930,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);
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 215311348cb..4c66dfc707b 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,11 +1,13 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb"></span>
+	<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>
 			<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"