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>

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