Tiles view for file list

[exalate-issue-sync]

• needs split will be split into multiple stories fro a better digestion in the sprint:

  1. Tiles-view switch + Tiles
  2. Slider
  3. Sorting

• not a gallery-app: Note the difference between a "gallery-app" and the "tiles view": The tiles view shows the plain file listing in a grid. It shows all files, regardless of their mime type, and does not add specific functionality for certain file types.

Description

User Stories

• As a user I want to switch to a Tiles view so that I get an overview of all files of a folder without having to rely on filenames.

Value

• improve files navigation & organisation
• "Tiles" will be reused for the visual representation of "recent files" and "Spaces overview"

Acceptance Criteria

• tiles-view switch Add a switch to switch to a tilesview (from list view)
  • persistence: the current selection of the switch [condensed] [Normal] [Tiles] is persisted through different view (meaning: the viewmode only changes, if the user selects another viewmode)
  • the 3 viewmodes are in the first step only available in (to keep it simple)
    • "Personal"
    • Every single Space
• tiles-view switch: if tiles-switch is active, a slider appears
  • mobile: slider is not available on smartphone-screens because of missing real estate
  • mobile: only 1 button (not a group of 2-3 buttons), that toggles between standard-list and tiles
• Slider: (e.g. https://vuetifyjs.com/en/components/sliders/#icons)
• Slider: the user can move the slider from "-" to "+"
• Slider: the slider in-/decreases the size of the tiles
• Slider: the slider provides 6 steps from the smallest to the biggest view
• Tiles consist of 2 parts
  • Preview: Contains the file-preview or icon and the checkbox
  • Footer: Contains the filetype-icon, file/folder name (evtl. truncated), 3-dots menu. attention: the 3-dots menu in the tiles-view contains the option "select" which triggers the checkbox to be a11y-compliant. update: other than in the design, we decided to NOT have the line with modified date within a tile.
• Tiles: There are 3 preview types
  1. Images: jpg, png, gif etc. image fits into the preview-container as object-fit: cover
  2. Document-preview: if supported, show a preview of the document. document-preview fits into the preview-container as object-fit: scale-down
  3. Icon: it not-previewable filetype: show only the Icon
• Tiles-interaction: click on preview performs the standard-action; click on checkbox checks, 3-dots opens the context menu.
• Slider Tiles-Sizes: the following width refers to the width of a single tile (width = 12 rem; width += 12rem):
  • Ratio: 10:9 (eg. 192 x 172,5 px)
  • Step 1: width: 12 rem (default)
  • Step 2: width: 24 rem
  • Step 3: width: 36 rem
  • Step 4: width: 48 rem
  • Step 5: width: 60 rem
  • Step 6: width: 72 rem
  • Steps are not available, if they dont fit into the content area.
• Sorting: Tiles can be sorted by a click on "Sort by: A-Z". Click opens a drop-menu with these options:
  • Name: "A-Z"
  • Name: "Z-A"
  • Modified: "Newest"
  • Modified: "Oldest"
  • Size: "Largest"
  • Size: "Smallest"
• Pagination: the tiles should not leave "blank" space at the end of the page
  (https://en.wikipedia.org/wiki/Widows_and_orphans)
  • idea: set the default pagination page size to 1.000

Definition of done

• Functional requirements
  [ ] functionality described in the user story works
  [ ] acceptance criteria are fulfilled
• Quality
  [ ] code review happened
  [ ] CI is green
  [ ] critical code received unit tests by the developer
  [ ] automated tests passed (if automated tests are not available, this test needs to be created and passed
• Non-functional requirements
  [ ] no sonar cloud issues

Screenshots (wip)Status 13.12.2021

Small (Default)

Medium

Large

Small: Selected

Selected / Hover

static states:

Sorting Dropmenu:

Mobile: switch list <-> tile view

screen-20211214-155402.mp4

Related issues

#2585
#3341

[tbsbdr]

maybe we can build upon: https://www.lightgalleryjs.com/ - needs evaluation if this plugin would be helpful
CC @kulmann - will bring it up within our next meeting.

[MuchDevSuchCode]

This is Sexy AF - I fully support this. Can't get it fast enough.

[pascalwengerter]

@tbsbdr would you want the "mini icon" next to the filename if the icon/preview is being rendered above already? :)

[kulmann]

@tbsbdr would you want the "mini icon" next to the filename if the icon/preview is being rendered above already? :)

Yes. :-) But never the preview. The preview should only be shown in the main tile area (if available). Basically:

• icon+filename when the file has a preview above makes sense for being able to recognize the file type also by the icon (if we have previews for e.g. PDF and image files it might become hard to see at a glance which file type you're dealing with)
• icon+filename when the file has no preview above feels a little bit verbose, but otherwise the layout would be very jumpy. So let's keep it there as well.

[pascalwengerter]

@tbsbdr @kulmann I've played around with the resizing a bit now and it feels a bit clunky to be honest. Feel free to run #7991 locally, both options are in the code (one commented out in ODS+web)

How about using the "resize" option to switch from showing one (maximum zoom level) up to 2 (small), 4 (medium) or 8 (large) or 12 (very large screen) tiles?
Also, please try out the sorting (it works but needs polishing) to check whether you actually like using it - esp. the A - Z ⬇️ seems somewhat unintuitive to me, but further user testing might be necessary!

I'll focus on the actual tiles in the meantime, they need cosmetical love 😄

[tbsbdr]

Resizing

@pascalwengerter yep, i get the clunkyness 🗿 MS and Apple solved this via stretching the gaps between the items: #7991 (comment) <- I suggest to stand on the shoulders of giants

[tbsbdr]

update / refinemed initial issue:

• persistence: the current selection of the switch [condensed] [Normal] [Tiles] is persisted through different view (meaning: the viewmode only changes, if the user selects another viewmode)

the 3 viewmodes are in the first step only available in (to keep it simple)
"Personal"
Every single Space

and

other than in the design, we decided to NOT have the line with modified date within a tile.

[pascalwengerter]

After #7991 has introduced a basic tiles view + tiles switch, the remaining functionality from this more epic-like issue could be addressed in smaller iterations in

• [Tiles view] Add selection model #8365
• [Tiles view] Fix mobile display of tiles grid #8367
• [Tiles view] Resize tiles #8368
• [Tiles view] Enable drag&drop, including OcGhostElement #8369
• [Tiles view] Add sorting #8370
• [Tiles view] Quickactions #8371

[JammingBen]

Closing here as the basic tiles view has been implemented. We have open issues for additional improvements for the future:

• [Tiles view] Quickactions #8371
• [Tiles view] keyboard interaction #8429