Remember toggle and events handler

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

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' => '/',

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);
 		},
 
 		/**

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
 	 *

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

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">

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