Standardized file/image/document viewer #12382
Description
WIP in https://github.com/nextcloud/viewer
Problem
The current image viewer is part of Gallery and not well-maintained, and we should take the move to Vue as an opportunity to make it more snappy and follow our guidelines. We need to improve the experience of our file viewing.
Proposal
It should be a generalized viewer, not only usable by Files but also others like
- Mail: attachments, or clicking on inline images
- Contacts: profile pictures
- Social: any posted pictures
- Talk: files posted in chat
- Deck: attachments of a task
- Files shared via link
- etc.
We will initially start with images, but should also allow other viewers to hook in. When you go through the slideshow of a folder, people expect to see images but also videos for example.
Filetypes we need to support:
- Pixel graphics like: jpg, png, gif, tiff, bmp
- Vector graphics like: svg
- Special formats like: heic & heif (iOS live)
- …
We could also let apps like the PDF viewer and texteditor hook into it to use the same interface.
Design
The interface should focus on viewing the content, so the image should be displayed as large as possible, but shrink to fit the view and not displayed larger. Zooming needs to be possible via mouse scrolling or pinch/spread on touch interfaces or touchpad.
The background visible next to images #000 black. The background immediately behind images themselves needs to have a slightly checkered white/grey background so png and svg with transparency are still properly visible.
There should only be the necessary interface:
- Top left a back arrow to exit the view
- Top centered the filename
- Top right a share action with "Share" label and a 3-dot menu (with further actions, all which are available in Files too) right next to it (mirroring the actions in the list and grid view).
Additionally:
- Tapping/clicking on the right side should advance to the next image (will also have an arrow on the center right)
- Tapping/clicking on the left side goes to the previous image (will also have an arrow on the center left)
- Next/previous should honor the sorting selected in the Files view, or whatwver sorting of the app.
- There should be a play/pause function for the slideshow directly below the right arrow (not on the bottom right)
All of the interface elements should slowly fade out after 3-5 seconds of no mouse or finger move events. As soon as there is a moise move or finger move event they should quickly fade back in.
If actions like sharing or details are used, the sidebar should appear from the right, shrinking the image. Just like in Files. We probably need to adjust the style, maybe using a dark style in the viewer by default because otherwise the light/dark change is too jarring.