🖼️ Add persistent per-view layout modes (table / tiles / gallery)

[Rello]

Motivation

• Implement optional gallery and tile views, as available in SharePoint
• Both views are using the first column to get the picture url for the preview
• Tile is only showing the picture plus its title from the 2nd column. Use case: Index pages
• Gallery view is showing all additional columns from the current view. Use case: Product catalogue or inventory
• Provide persistent, per-view layout modes so users can choose between table, tiles and gallery and have that preference stored with the view.
• Expose layout selection in the View settings modal and apply the persisted layout automatically when a view is opened, while keeping backward compatibility (missing/old values => table).

Implementation

Source data

Tile View

Gallery View

Settings modal

Sharepoint reference

[Rello]

@jancborchardt as new layouts will be relevant for your opinion

[jancborchardt]

@marcoambrosini one for you, check it out. :)

@Rello do you have reference screenshots from Sharepoint as you mention?
List and Gallery view currently also look very similar (with Gallery in need of some design improvement).

[Rello]

@marcoambrosini can you please have a look now? the PR was now implemented and tested on the branch and I added the actual screenshots from the working app

[marcoambrosini]

Hi @Rello, apologies for the late review

I think this is a nice addition, a few comments from the design perspective:

• I don't think we should map the cards backgrounds and titles to the first columns of the table. Instead we could provide two select element in the settings below the view selection radio: "Background source" and " Title source", with the ability to select the right columns from there

• Also in settings: instead of these radio buttons, let’s use our Nextcloud component NcRadioGroup

  So this:

Instead of this:

• The aspect ratio of the cards in gallery view is not very graceful visually, and they just grow uncontrolled if we adding many fields to them. We cannot make them scrollable because they are already within a scroll container, the page, and that would result in nested scrolling. To solve this I think we should remove the column names and limit the aspect ratio of the image to a 3:2 landscape orientation instead of 1:1. We would get something like this:

• In gallery view, I would left align the title so that it matches the alignment of the text underneath

• I’m not sure if it’s my screen, but it looks like the text in gallery view is blue. Let’s make sure it’s --color-main-text

[Rello]

@marcoambrosini