Files grid view

[skjnldsv]

Supersedes #11050, fixes #6

Still todo:

• The grid view is not responsive, while the list view is. See horizontal scrollbar in the view.
• The link share view does not use the grid view by default, but should.
• The link share page uses low-resolution previews still, even though the parameters data-preview-x="250" are set in the table.
• There’s a grey line in empty content view because of thead tr border-bottom. Table should probably get class="hidden" here?
• When you click on the view switcher, the tooltip stays after.
• z-index: -1; on the .thumbnail-wrapper did not work for clickability cause it resulted in the thumbnail vanishing in certain cases (see inline discussion)
• Should be used by file picker dialog (used in Move/Copy, Mail app for attachments, or personal settings for image)

Separate server issues not to be solved here:

• Fix rename view layout (File renaming should not vanish the filetype icon / preview) File renaming should not vanish the filetype icon / preview #11901
• In grid view, file type icons are too big compared to image previews In grid view, file type icons are too big compared to image previews #11902
• Comment indicator only shown on list entries without avatar (owned by you) Comment icon is not shown on shared folder #10877
• Comment indicator display improvements Comment indicator display improvements #11904

Done:

• Clicking folders/files does not open them, but the sidebar – probably cause the action to open is on the filename and not on the thumbnail.
  @skjnldsv
• Add a toggle for grid/list view. We can use the icons the Gallery app used because it will replace the toggle: icon-toggle-pictures and icon-toggle-filelist
  @jancborchardt
  • Switch title and icon when toggled
    @skjnldsv
  • Enable tooltip() for icon
    @skjnldsv
  • Make sure the choice is remembered per-user
    @skjnldsv
• Change to higher resolution previews
  @jancborchardt
• Fix multiselect bar not showing
  @skjnldsv
• Sorting not available – we should use a simple popover like in the Android app, just an icon next to the grid/list toggle.
  @skjnldsv
• Should also be used in other views (favorites, recent etc)
  @jancborchardt
• Test on mobile – there should always be at least 2 columns (or even 3?)
  @jancborchardt
• Test public sharing page
  @jancborchardt
• Center the tr class="summary" in the footer @jancborchardt
• Fix footer showing in empty folders @jancborchardt
• Overlay the comment icon on top of the sharing icon if there's comments, cause comments can only happen on shares anyway. @jancborchardt
• Show the avatar part instead of the share icon if available, looks nicer (not both, limited space) @jancborchardt

[jancborchardt]

Adjusted the design! 🎉 Added TODOs to the original post.
An issue might be that not so much of the filename is shown. We could discuss if we don’t want to show the share icon directly, but then we don’t have an indicator either.

[skjnldsv]

Be careful with your selectors @jancborchardt
You need to be more precise, this one is conflicting with others popovermenus ;)

[skjnldsv]

Test on mobile – there should always be at least 2 columns (or even 3?)

We should then reduce the total size.
Minimum mobile (rare, but still) is 320px.
Which means two columns require max 160px width (we use 180px)

[skjnldsv]

@jancborchardt Ok, I added a simple var you can change and should adjust the full design automatically.
In case we need to tune the size. 😉
It also now automatically adjusts itself internally with flex. So even with 3 icons it decent. Though we need to decide, should we hide the comment icon then? :)

[skjnldsv]

Discuss if the filename display is fine or we move the Share action somewhere (like into the menu)

Not really possible. We cannot try to change the js. This is a risk we should avoid if we don't want to add regressions. let's be careful and tune the design only ;)

Discuss whether to make the favorite icon interactive as here we have enough space

Same discussion as above. We can add this later for 16. 🤔

There is one more indicator once there are unread comments

I'm fine with hiding completely or leaving it. Either we lose text information on the file name or the comment information. And we also have the notifications as a second way to warn the user there was a comment, so I think it's ok! :)

---

On a side note, I think I prefer 160px as a default:

160	180

[jancborchardt]

Good stuff all around @skjnldsv

• Regarding favs and filename display: yes, let's postpone that discussion
• I thought about overlaying the comment icon on top of the sharing icon if there's comments, cause comments can only happen on shares anyway.
• We should show the avatar part instead of the share icon if available, looks nicer (not both, limited space)

[jancborchardt]

Edited the top post and added @-assignments to the checklist so we don't do double work. :) Is the split ok @skjnldsv?

[skjnldsv]

Edited the top post and added @-assignments to the checklist so we don't do double work. :) Is the split ok @skjnldsv?

Ah yes!
I checked what I already done on the OP ;)

[skjnldsv]

I changed quite a lot in the design. For a better visual, the grid is not really square, (not by much though) I think it's really better that way and it allowed me to fix the default action handler properly.

I checked some file browsers I use and all of them favour a square icon/preview and the text under than a square element. ;)

[skjnldsv]

That's the only way to have back the default handler on the click, if you remove this, the default will be the sidebar again :)
The thumbnail was showing properly on my setup, what was the issue here? 🤔
@jancborchardt

[jancborchardt]

Sorry, meant to comment before:

When logged in, and you opened the sidebar of a file, and then did not hover the file anymore, the thumbnail vanished:

It also resulted in thumbnails not showing on the public share page at all:

Very strange – let me know if you have an idea. It seems we have to do this via JS.

[skjnldsv]

No worries! :)
Yes, this is a tricky one! I'm guessing there is a conflicting css rule here. No need for js! ;)

Basically the hack is to put the thumbnail behind (leaving the default click to the a and therefore the file/folder) and change the background on hover/focus/active to be on children/siblings of the thumbnail and not on parents (otherwise the background will be above the thumbnail, tricky hack, but rather clean on css, we don'te xploit anything, this is a standard css behavior) :)

Could you revert your change? I will fix the public page and the active (seems like something like that) when back from vac ;)

[skjnldsv]

Also, please only work on your parts of the pr, and not revert any other changes I made on purpose, otherwise it's confusing for me and I have to get back to what you edited to figure what's going on 🤗

[jancborchardt]

Yes – my bad, sorry about that. Reverted the commit and also rebased onto master. :)

[skjnldsv]

Don't be sorry! This was a tricky one ;)

[jancborchardt]

• @skjnldsv the screenshot is from Firefox, and there it’s indeed not responsive. Just tested again, error persists. Can you check with Firefox?
• The sorting bar seems missing now?
• The toggle is not usable with keyboard. It is tab-selectable, but pressing Enter does not trigger it.
• This issue with the filepicker? Should we force regeneration of previews?
  

Please also review @nextcloud/designers :)

[skjnldsv]

Picker is fine here (chromium & ff)

[skjnldsv]

All fixed aside from the ff issue.
I need ot investigate but if the loading state is ok but resizing is bugged, this is often a browser issue.
Maybe there is a conflicting rule or a misbehaving rule cohabitation that ff doesn't like.

[skjnldsv]

Maybe there is a conflicting rule or a misbehaving rule cohabitation that ff doesn't like.

BAM right in the bullseye! :D
FIXED!

[MorrisJobke]

Looks awesome and works nicely 👍

[rullzer]

Looks great. 🚬-test did not do 💥

Lets get it in now and fix issues (I'm sure we'll find them) later.

[MorrisJobke]

CI failures are unrelated -> merge

[jancborchardt]

Yeah @skjnldsv great teamwork! 🎉 😃

[maprambo]

You could make the icons stack on the right, which each one just a few pixels more to the left. On mouseover (or touch on mobile), the icons expand. That way there is more place for the file‘s Name by default and no icon really hidden.