WIP: Implement file selector

[Mikescops]

Add file selection to the grid and open sidebar when selecting a new file.

[Mikescops]

I wanted to use a Set to keep track of selected files. It's very performant for such usage. But VueJS does not support Set and Map collections as reactive.
This indeed implies issues when updating the view.

Let me know if you have ideas on how we can improve this. I'm really not into using an array here tbh.

[Mikescops]

@skjnldsv done with the new changes

@jancborchardt I'd like advices on the design part

[jakobroehrl]

@Mikescops
Could this be used for a multiselect actions?
#83

[jancborchardt]

Cool! Here’s some design feedback:

• The select icons look good, but don’t we want to use the Nextcloud-native ones? We can use them in monochrome (so not blue), but still the form could/should be the same?
• It’s not possible to select items using keyboard only
• The icon-checkmark shouldn’t be a span but a button, to be semantically correct?
• The checkmark should be 44*44px clickable area as per our guidelines
• For better feedback, it also should have cursor:pointer
• Possibly a border (e.g. color-primary) around the pictures is better for highlighting than tinting it, since the tint actually makes the pictures less focused/visible.
• I couldn’t see any change initially until I saw the selection bar on the bottom. The selection bar would be better at the top, just like we do it for Files and Mail too. :)
• Of course we need some actions there, if we have a primary button it will also be more visible then.
• Style-wise the selection bar should not be a hard bar, but floating buttons/text with a gradient of white to transparency down (just like the header in Mail)
• Sometimes when clicking on the checkbox, the sidebar of the file opened? Not sure how exactly or why, can’t consistently reproduce

[Mikescops]

@jancborchardt I will answer a few remarks first.

Yes the sidebar open when you click on files (I know it may not be wanted but I was looking for a simple way to open the sidebar and it just felt like the preview sidebar on Windows or Linux that is opened when you click on an image)

I first displayed the select bar at the bottom because if it's at the top it is hiding the navigation bar in the folders, so I don't know how you want to handle that.

[Mikescops]

@jakobroehrl yes goal is to later add some action buttons, but one thing at the time.

[jancborchardt]

Yes the sidebar open when you click on files (I know it may not be wanted but I was looking for a simple way to open the sidebar and it just felt like the preview sidebar on Windows or Linux that is opened when you click on an image)

Hm, since our focus is Photos and not "a photos view of files", clicking on an image should always open the image. We could discuss that it should also always open the sidebar, but I think that having the sidebar open without also having the viewer open is not really necessary.
(Also, in the case of the sidebar we should work on the possibility to not show the preview in the sidebar, as here it’s duplication of what is shown in the viewer.)

I first displayed the select bar at the bottom because if it's at the top it is hiding the navigation bar in the folders, so I don't know how you want to handle that.

It’s totally fine to replace the navigation bar as well, kind of like Android does. Full focus on the task at hand, which then is selection.

[skjnldsv]

Implemented