Add "Crop image previews" setting to files

[nina-py]

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.

[nina-py]

It's funny that the "Node / build" check is failing because I did check in the compiled files and running make build-js-production produces nothing. Could the bot help? (Did a soft reset, restored the /dist/ files, generated them again, committed everything and force-pushed the commit and it's still failing.)

Also, please note that I added a test on the backend for the new setting but I haven't found a way to add a working test for the frontend code. If I add a test in filelistSpec.js with the following:

var image = new FileInfo({
   id: 123,
   name: 'a-photo.jpeg',
   mimetype: 'image/jpeg',
   size: 1234,
   etag: 'a01234c',
   mtime: 123456
});
var $tr = fileList.add(image);
console.log($tr.find('.thumbnail').css('background-image'));

...the output I get back is:

url("http://localhost/core/img/filetypes/image.svg")

...which is not very helfpul if I want to test changes to preview image URLs. On closer look I see that the generatePreviewUrl method doesn't seem to have any existing tests. Should there be any? Or is it all going to be scrapped and replaced with Vue code soon so it's not really a worry?

[nina-py]

Hi @kesselb, could I try running that compile command you executed in my first PR, but for apps/files/js to see if helps with the build test? Or do I have to be a member of Nextcloud to be able to do that?

[nina-py]

Here is a GIF of the new setting in action, by the way. It reloads the current file list immediately and sends an API call to save the setting to the database after a 1.2 sec delay.

[ChristophWurst]

I can't explain that build diff tbh but could it be related to the node env? Right now some of a newer node/npm and others have the slightly older one. It could be a mismatch there. IIRC there is also an issue with the latest npm due to missing or incompatible peer deps in our dependency tree.

Run actions/setup-node@v1
/opt/hostedtoolcache/node/12.20.0/x64/bin/node --version
v12.20.0
/opt/hostedtoolcache/node/12.20.0/x64/bin/npm --version
6.14.8

^ that is what the Github action builds with.

[nina-py]

Thank you @ChristophWurst, I thought that might be the case. I have Node 14 installed locally, and my npm version is just a couple of minor updates newer than what the bot is using (6.14.10). I have successfully checked in compiled assets before (#24970), but that was a much smaller chunk of work.

[skjnldsv]

Code looks good! Great work!!

[ChristophWurst]

Reading jquery code makes me cringe but it's a solid PR until we have a Vue rewrite 😜

[nina-py]

Thank you @skjnldsv!

@ChristophWurst, I haven't written any jQuery code for quite a while so it was a bit of time travel for me :). Looking forward to getting into Vue!

[ChristophWurst]

/compile amend /

[juliushaertl]

Very nice 👍