Filetype filters on top of the files list (doc, pdf, jpg, ...)

[artonge]

@nextcloud/designers for mockups

[szaimen]

Example from google drive:

[jospoortvliet]

@marcoambrosini wanted, in general, to also look at the search bar, but this brings in a whole 'what to do with search' discussion. Best that design comes up with a complete concept.

[artonge]

@nextcloud/designers can we have some proper mockups for that?

[marcoambrosini]

Kickoff call outcome @AndyScherzinger @artonge @susnux @szaimen

• We start with filters but with taking into account that in the future we might add a search bar
• More than just file type: also add "people" and "modified" like google
• We keep the filters just above the files list and below all rich documents and recommended files
  Open question: do these filters only filter the current folder or are they recursive?
  E.g. when I filter for "documents" in a folder, do I see all documents in the whole folder tree or just the ones present in the current folder? From a UX perspective I think the former is the most beneficial, but it's much more difficult to achieve technically. It's also what our competitors do when using these filters. @susnux suggested that there could be a switch between current folder and all subfolder filtering.
  From a visual design perspective little will change regardless of what we choose so we go ahead with the mockups

Also cc @karlitschek and @jancborchardt

Current rough idea of the worst case scenario (Recommended files in root folder + rich workspaces enabled)

Current rough idea of the best case scenario (subfolder with no rich workspaces)

[jancborchardt]

@marcoambrosini seems good, some feedback:

• Can we just call it "Type" instead of "File type", much nicer and compact.
• The dropdowns have some uniform width which looks off with the extra whitespace between text and down arrow. Would look nicer if it’s only as wide as needed.
• How does it look when the dropdowns are opened? I assume either like in Google Drive or in our search, but would be good to clarify.

Open question: do these filters only filter the current folder or are they recursive?
E.g. when I filter for "documents" in a folder, do I see all documents in the whole folder tree or just the ones present in the current folder? From a UX perspective I think the former is the most beneficial, but it's much more difficult to achieve technically. It's also what our competitors do when using these filters. @susnux suggested that there could be a switch between current folder and all subfolder filtering.

I would first go with what is doable technically in a nice way, we can always improve on that. But no to a switch between modes here, that would needlessly complicate it.

[susnux]

susnux suggested that there could be a switch between current folder and all subfolder filtering.

I would first go with what is doable technically in a nice way, we can always improve on that. But no to a switch between modes here, that would needlessly complicate it.

To clarify for me it is about having two options:

1. Filter the current folder (e.g. if there are a lot of file, I know the folder but I just want to filter)
2. Search for something (e.g. search for a PDF somewhere in the file tree

[susnux]

Questions:
What file type filters do we use?
All types we found in the list? Or a generic list like

• folders
• documents (like office, spreadsheets and presentations)
• Images
• Videos
• Audio

(this list would be easy to implement)

Or more like specific files? (PDF, JPG...)

What does "Modified" filter? "yesterday" "last week"?

People: Should this only filter the owner?

[jancborchardt]

@susnux for all of these, I would follow Google Drive’s lead since that’s the solution spearheading this. cc @marcoambrosini

[susnux]

I started implementing it, but have a question:
The mock up is using a drop down, shall we use it or go with actions?
Especially for user filtering a drop down would be a completely new component to allow two menu levels (1. user 2. "shared the file", "owned the file", etc)

With a drop down it looks like this:

Screencast_20240605_223801.webm

[marcoambrosini]

Hi @susnux, I think we should go with actions like in the global search. The different look is because of the smaller border radii but I was thinking about the actions component.

[susnux]

@marcoambrosini with actions it could look like this:

out.mp4

[jancborchardt]

@susnux nice! Could "Clear filter" go to the bottom of the action menu so the entries don’t all jump one down?

[susnux]

Could "Clear filter" go to the bottom of the action menu

Sure but then you need to scroll fully down to clear, is that ok?

[sorbaugh]

The related PR: #45708