Merge pull request #34071 from nextcloud/bug/33847/fix-grid-view-toggle

Fix grid view toggle
This commit is contained in:
Vincent Petry 2022-09-14 20:20:50 +02:00 committed by GitHub
commit af35ea308b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 29 deletions

View file

@ -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);
}
},
};
})();

View file

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