From d939be4a435658bef6e4518d3bd61b848b8b25ae Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 14 Sep 2022 12:03:13 +0200
Subject: [PATCH] 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>
---
 apps/files/js/app.js      | 43 ++++++++++++++++++++++++++++++++++++++-
 apps/files/js/filelist.js | 30 ++-------------------------
 2 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/apps/files/js/app.js b/apps/files/js/app.js
index f7863de09be..26a0ed9c084 100644
--- a/apps/files/js/app.js
+++ b/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);
+			}
+		},
+
 	};
 })();
 
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 77f67c64ed7..ee596dd417e 100644
--- a/apps/files/js/filelist.js
+++ b/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
-- 
2.39.5