Added button to files app that opens the current folder in the photos app

[cnmicha]

Closes #566

This implementation provides the following UI:

Please note the following things:

• We are hooking into the files app using CSS selectors. I did not find an API from the files app that allows custom UI controls being inserted at this place.
• Tooltips do not have the Nextcloud styling yet and are currently missing localization.

[skjnldsv]

cc @jancborchardt

[cnmicha]

@skjnldsv Is there an easy way to edit l10n? I see you have both .js and .json files

[skjnldsv]

@skjnldsv Is there an easy way to edit l10n? I see you have both .js and .json files

They are managed automatically from the transifex website

[cnmicha]

To implement the tooltip, I switched to the ActionButton Vue component that is also used in other parts of the photos app. It looks like this:

But the tooltips from the files app button beneath looks like the following:

Please note that the tooltips have different font sizes and positions and that the photos button has a grey circular background.

The files app is not using the ActionButton component, instead they seem to use jQuery tooltips... (see here and here)

I think this does not look very appealing, but we would either a) need to change the files app to use the ActionButton component as well (which would be a lot of effort because they are not using Vue right now), b) add jQuery as a dependency to the photos app or c) create our own variant of the ActionButton component which would add more maintenance work... Or we just accept the difference in design.

@skjnldsv What do you think?

[cnmicha]

Looking at the diffs, it seems as if webpack compiles the files differently on my machine resulting in the "Node / node12.x (pull request)" checks failing. But I have no idea what causes the issue. I am using the default configuration.

Here is the output of the compile command and git status: https://pastebin.com/yyH93f0c

[skjnldsv]

But the tooltips from the files app button beneath looks like the following:

It's fine! It's because Files isn't using the vue library yet. It will change later on :)

But I have no idea what causes the issue

If you click on the ci check results, you will see that compiled files are missing: "Uncommited changes in webpack build" You can ignore until this pr is approved, we'll use the compile bot to add the compiled files to this pr. Can you rebase and squash into one commit please? :)

[aredey]

Hi All. Looking forward to this feature in the Photos application, when is it likely to be released for production (or potentially for 3rd party texting)?

Will this view be exposed as default for non-logged-in users if the folder is publicly shared? Many thanks, Akos

[cnmicha]

@aredey I will implement the change requested by @skjnldsv today, afterwards I think merging the pull is up to him.

[Mikescops]

@cnmicha nice PR, thanks :)

[cnmicha]

It seems that I can't test the photos app (fork of the master branch) because it forces me to use NC 22, which is not released yet. I didn't find a prerelease available on https://download.nextcloud.com/server/prereleases/. So I will wait until a beta version of NC 22 is released?

[Mikescops]

@cnmicha just git clone the nextcloud/server and you'll have the latest dev version :)

[cnmicha]

@cnmicha just git clone the nextcloud/server and you'll have the latest dev version :)

@Mikescops I just did that, ran git submodule update --init and cloned the latest master of the photos app into the apps directory. Unfortunately, after enabling the app, I'm getting an Internal Server Error when opening the app with the following error message in the NC log:

{"reqId":"yFTuLCt5rIGWcjkpWxdM","level":3,"time":"2021-04-04T19:12:06+00:00","remoteAddr":"192.168.33.1","user":"admin","app":"index","method":"GET","url":"/index.php/apps/photos/","message":{"Exception":"Exception","Message":"Class 'OCA\\Viewer\\Event\\LoadViewer' not found","Code":0,"Trace":[{"file":"/var/www/html/lib/private/AppFramework/App.php","line":157,"function":"dispatch","class":"OC\\AppFramework\\Http\\Dispatcher","type":"->"},{"file":"/var/www/html/lib/private/Route/Router.php","line":302,"function":"main","class":"OC\\AppFramework\\App","type":"::"},{"file":"/var/www/html/lib/base.php","line":998,"function":"match","class":"OC\\Route\\Router","type":"->"},{"file":"/var/www/html/index.php","line":37,"function":"handleRequest","class":"OC","type":"::"}],"File":"/var/www/html/lib/private/AppFramework/Http/Dispatcher.php","Line":159,"Previous":{"Exception":"Error","Message":"Class 'OCA\\Viewer\\Event\\LoadViewer' not found","Code":0,"Trace":[{"file":"/var/www/html/lib/private/AppFramework/Http/Dispatcher.php","line":218,"function":"index","class":"OCA\\Photos\\Controller\\PageController","type":"->"},{"file":"/var/www/html/lib/private/AppFramework/Http/Dispatcher.php","line":127,"function":"executeController","class":"OC\\AppFramework\\Http\\Dispatcher","type":"->"},{"file":"/var/www/html/lib/private/AppFramework/App.php","line":157,"function":"dispatch","class":"OC\\AppFramework\\Http\\Dispatcher","type":"->"},{"file":"/var/www/html/lib/private/Route/Router.php","line":302,"function":"main","class":"OC\\AppFramework\\App","type":"::"},{"file":"/var/www/html/lib/base.php","line":998,"function":"match","class":"OC\\Route\\Router","type":"->"},{"file":"/var/www/html/index.php","line":37,"function":"handleRequest","class":"OC","type":"::"}],"File":"/var/www/html/apps/photos/lib/Controller/PageController.php","Line":84},"CustomMessage":"--"},"userAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36","version":"22.0.0.2"}

It seems as if some autoloader is not generated correctly. The occ:upgrade command says I'm up to date. Any hints?

Thank you!

[Mikescops]

You have to clone nextcloud/viewer project in your apps folder. The error says it needs it.