Fix grid view toggle

Move grid view logic to the files app itself because the button does not
belong to any specific file list.

Then inject the grid view state when switching file lists.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

Author: PVince81

apps/files/js/app.js

@@ -61,6 +61,11 @@
 			var cropImagePreviews = $('#cropImagePreviews').val() === "1";
 			this.$cropImagePreviews.prop('checked', cropImagePreviews);
 
+			// Toggle for grid view
+			this.$showGridView = $('input#showgridview');
+			this.$showGridView.on('change', _.bind(this._onGridviewChange, this));
+			$('#view-toggle').tooltip({placement: 'bottom', trigger: 'hover'});
+
 			if ($('#fileNotFound').val() === "1") {
 				OC.Notification.show(t('files', 'File could not be found'), {type: 'error'});
 			}
@@ -190,7 +195,16 @@
 		 * @param {OCA.Files.FileList} newFileList -
 		 */
 		updateCurrentFileList: function(newFileList) {
+			if (this.currentFileList === newFileList) {
+				return
+			}
+
 			this.currentFileList = newFileList;
+			if (this.currentFileList !== null) {
+				// update grid view to the current value
+				const isGridView = this.$showGridView.is(':checked');
+				this.currentFileList.setGridView(isGridView);
+			}
 		},
 
 		/**
@@ -394,7 +408,34 @@
 			} else {
 				OC.Util.History.pushState(this._makeUrlParams(params));
 			}
-		}
+		},
+
+		/**
+		 * Toggle showing gridview by default or not
+		 *
+		 * @returns {undefined}
+		 */
+		_onGridviewChange: function() {
+			const isGridView = this.$showGridView.is(':checked');
+			// only save state if user is logged in
+			if (OC.currentUser) {
+				$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
+					show: isGridView,
+				});
+			}
+			this.$showGridView.next('#view-toggle')
+				.removeClass('icon-toggle-filelist icon-toggle-pictures')
+				.addClass(isGridView ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
+			this.$showGridView.next('#view-toggle').attr(
+				'data-original-title',
+				isGridView ? t('files', 'Show list view') : t('files', 'Show grid view'),
+			)
+
+			if (this.currentFileList) {
+				this.currentFileList.setGridView(isGridView);
+			}
+		},
+
 	};
 })();
 

apps/files/js/filelist.js

@@ -105,7 +105,7 @@
 		 * @return {number} page size
 		 */
 		pageSize: function() {
-			var isGridView = this.$showGridView.is(':checked');
+			var isGridView = this.$table.hasClass('view-grid');
 			var columns = 1;
 			var rows = Math.ceil(this.$container.height() / 50);
 			if (isGridView) {
@@ -368,12 +368,6 @@
 
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
-			// Toggle for grid view, only register once
-			this.$showGridView = $('input#showgridview:not(.registered)');
-			this.$showGridView.on('change', _.bind(this._onGridviewChange, this));
-			this.$showGridView.addClass('registered');
-			$('#view-toggle').tooltip({placement: 'bottom', trigger: 'hover'});
-
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);
 			$(window).resize(this._onResize);
@@ -747,27 +741,7 @@
 			this.breadcrumb._resize();
 		},
 
-		/**
-		 * Toggle showing gridview by default or not
-		 *
-		 * @returns {undefined}
-		 */
-		_onGridviewChange: function() {
-			const isGridView = this.$showGridView.is(':checked');
-			// only save state if user is logged in
-			if (OC.currentUser) {
-				$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
-					show: isGridView,
-				});
-			}
-			this.$showGridView.next('#view-toggle')
-				.removeClass('icon-toggle-filelist icon-toggle-pictures')
-				.addClass(isGridView ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
-			this.$showGridView.next('#view-toggle').attr(
-				'data-original-title',
-				isGridView ? t('files', 'Show list view') : t('files', 'Show grid view'),
-			)
-
+		setGridView: function(isGridView) {
 			this.$table.toggleClass('view-grid', isGridView);
 			if (isGridView) {
 				// If switching into grid view from list view, too few files might be displayed