Review UI

[marinofaggiana]

Hi,
with the opportunity to implement the Trash (API) I’m reviewing the UI, after 2 years need a modernization … this is the first draft with finally the possibility of switch very quickly the view (List / Grid), this is totally in swift and it will require a lot to be implemented in all views (several are in old object-c) but this is the start !

[In this trash view are 2 image : restore and more for delete the item]

List :

Grid :

What's do you thing @tobiasKaminsky @MorrisJobke @nextcloud/designers

[tobiasKaminsky]

• in second line we have "size, relative/absolute time", eg: 29KB, Jan 9"
  • if time is < 60s, we use "seconds ago", which is shorter
• the revert button has a very large gap.
• in grid view (on regular files) we hide the buttons, they are only available via long click (which is a common UI pattern on Android). This allows bigger previews.
  • I am unsure what to do on Trashbin (we do not yet have gridview on Trashbin)
• is it possible to move the list vs grid change button to header on top right? Otherwise space is "wasted".

For comparison:

[marinofaggiana]

News :

@tobiasKaminsky : (is it possible to move the list vs grid change button to header on top right? Otherwise space is "wasted"), this is the news, I want use the space on Navigation Controller for "Program menu") :-)

[tobiasKaminsky]

Looks very good.
Cross-posting to nextcloud/server#11902 (comment)
@jancborchardt

[jancborchardt]

Some more feedback – based on that we should use this view for all other views (not only deleted files) going forward, right?

• The view switching should not take one full row. Remember people are on mobile and content should have most screen space. Instead, on the top right there should be a 3-dot-menu, and possibly one of the entries outside of it (the most used one). The entries are:

  • List view (or "Grid view" if in list view currently)
  • Sort (→ which then opens a menu like this: https://twitter.com/jancborchardt/status/1046778096500834304 )
  • Restore all files
  • Remove deleted files (we never ever call it "trash")

• For images, showing the filename usually makes no sense as it’s something with IMG_29841 or 12-10-18-14-18-… or so. That’s why we should do it like on Android and images should get the full space, without title below.

• In Grid view, there’s generally a bit too much space around everything, creating large white gaps. The elements can be a bit closer together.

• In the List view, every row seems to have more whitespace to the top than to the bottom of the text. It should be visually equal.

• Much like in the web interface, in the grid view the controls of a file should not be below the filename, but right next to it.

See the web interface for comparison (it’s not done yet, but we should try to keep things consistent, also with Android – so thanks for starting the discussion! :)

(An important difference to note is that in the web interface we do show file names for images. We are not set on anything there yet – but for sure on mobile people are used to big images, so we should not show the title below.)

[marinofaggiana]

Move in server discussion nextcloud/server#11902