Add "Crop image previews" setting to files

Added a new user setting that toggles cropping on image previews
in grid view.

True (default value): crops each image to a square. False: keep original
aspect ratio.

Signed-off-by: Nina Pypchenko <22447785+nina-py@users.noreply.github.com>

Closes #18439.

Signed-off-by: npmbuildbot-nextcloud[bot] <npmbuildbot-nextcloud[bot]@users.noreply.github.com>

1 files changed, 31 insertions, 1 deletions

diff --git a/apps/files/js/app.js b/apps/files/js/app.js
index 09468205279..8015f395b74 100644
--- a/apps/files/js/app.js
+++ b/apps/files/js/app.js
@@ -56,13 +56,18 @@
 			var showHidden = $('#showHiddenFiles').val() === "1";
 			this.$showHiddenFiles.prop('checked', showHidden);
 
+			// crop image previews
+			this.$cropImagePreviews = $('input#cropimagepreviewsToggle');
+			var cropImagePreviews = $('#cropImagePreviews').val() === "1";
+			this.$cropImagePreviews.prop('checked', cropImagePreviews);
 
 			if ($('#fileNotFound').val() === "1") {
 				OC.Notification.show(t('files', 'File could not be found'), {type: 'error'});
 			}
 
 			this._filesConfig = new OC.Backbone.Model({
-				showhidden: showHidden
+				showhidden: showHidden,
+				cropimagepreviews: cropImagePreviews,
 			});
 
 			var urlParams = OC.Util.History.parseUrlQuery();
@@ -132,6 +137,7 @@
 			});
 
 			this._debouncedPersistShowHiddenFilesState = _.debounce(this._persistShowHiddenFilesState, 1200);
+			this._debouncedPersistCropImagePreviewsState = _.debounce(this._persistCropImagePreviewsState, 1200);
 
 			if (sessionStorage.getItem('WhatsNewServerCheck') < (Date.now() - 3600*1000)) {
 				OCP.WhatsNew.query(); // for Nextcloud server
@@ -231,6 +237,7 @@
 
 			$('#app-navigation').on('itemChanged', _.bind(this._onNavigationChanged, this));
 			this.$showHiddenFiles.on('change', _.bind(this._onShowHiddenFilesChange, this));
+			this.$cropImagePreviews.on('change', _.bind(this._onCropImagePreviewsChange, this));
 		},
 
 		/**
@@ -257,6 +264,29 @@
 		},
 
 		/**
+		 * Toggle cropping image previews according to the settings checkbox
+		 *
+		 * @returns void
+		 */
+		_onCropImagePreviewsChange: function() {
+			var crop = this.$cropImagePreviews.is(':checked');
+			this._filesConfig.set('cropimagepreviews', crop);
+			this._debouncedPersistCropImagePreviewsState();
+		},
+
+		/**
+		 * Persist crop image previews preference on the server
+		 *
+		 * @returns void
+		 */
+		_persistCropImagePreviewsState: function() {
+			var crop = this._filesConfig.get('cropimagepreviews');
+			$.post(OC.generateUrl('/apps/files/api/v1/cropimagepreviews'), {
+				crop: crop
+			});
+		},
+
+		/**
 		 * Event handler for when the current navigation item has changed
 		 */
 		_onNavigationChanged: function(e) {