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>

diff --git a/apps/files/js/app.js b/apps/files/js/app.js
index f7863de09bea312d94c40973a83d22e9efe5e452..26a0ed9c084527c13b70ebbef3759f23241f8f34 100644 (file)
--- 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 77f67c64ed7dc5442553be801e9d61517c0e1ad6..ee596dd417ecf30c00f24c3d5b86c1366499eb47 100644 (file)
--- 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