Add filepicker toggle

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

5 files changed, 72 insertions, 1 deletions

diff --git a/apps/files/appinfo/routes.php b/apps/files/appinfo/routes.php
index 61bc1d99a5d..ef648bf2850 100644
--- a/apps/files/appinfo/routes.php
+++ b/apps/files/appinfo/routes.php
@@ -67,6 +67,11 @@ $application->registerRoutes(
 				'verb' => 'POST'
 			],
 			[
+				'name' => 'API#getGridView',
+				'url' => '/api/v1/showgridview',
+				'verb' => 'GET'
+			],
+			[
 				'name' => 'view#index',
 				'url' => '/',
 				'verb' => 'GET',
diff --git a/apps/files/lib/Controller/ApiController.php b/apps/files/lib/Controller/ApiController.php
index 3c1eb6e43fb..e70f34bd1a4 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;
@@ -280,6 +281,16 @@ class ApiController extends Controller {
 	}
 
 	/**
+	 * 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
 	 *
 	 * @NoAdminRequired
diff --git a/core/css/styles.scss b/core/css/styles.scss
index b5968015d6f..d9c0d7c6e4c 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 c42b35ddcff..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) {
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 8b33b879085..53daf4111b4 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>