Ensure filename is possibly centered below file icons in grid view

[jancborchardt]

This was already intended in the pull request, not sure where this got lost. We do use the text-align: right; for the text already, but the element of the text didn’t take full width so stayed on the left. 😉

This is also to make it in line with what we do in the file picker #12154

Currently left-aligned, looks strange and the names float away from the preview/icon and actions:

Now really right-aligned, sticking to the actions and the preview:

Please review @nextcloud/designers

[MorrisJobke]

Tested and works 👍

[juliusknorr]

This looks a bit odd to me. I think we should either center it in the real middle of the preview (which won't work because of the actions) or keep it left aligned. There should be a visual connection between the preview and the name. With the semi-center alignment, this connection is lost.

[skjnldsv]

I agree with @juliushaertl .
Centering on an unknown width is worse. It is too inconsistent :)
I would rather make sure the folder icons are aligned with the text like the thumbnails.

[jancborchardt]

Look at the grid view in the file picker:

The text is center-aligned below the icon because the icons themselves are centered too.

Furthermore we can’t view a file in isolation as in the example @juliushaertl. Check this out:

Also in my screenshots in the original post: Some file/folder names like "Notes" or "Bahn" are visually much closer to the action icons of other elements than their own. This breaks the Gestalt Law of Proximity.

With the semi-center alignment, this connection is lost.

How so? The name is literally closer to most of the image when it’s to the right, and as close to the related actions.

@skjnldsv in your screenshot, the folder and the middle one of the images miss their Share icon – that’s not right?

Also – all of your screenshots show thumbnails. ;) What about all the different filetype icons, of which none fill the whole preview area or are square?

[skjnldsv]

Look at the grid view in the file picker:

I'm fine with the filepicker like that, it looks ok. ;)

@skjnldsv in your screenshot, the folder and the middle one of the images miss their Share icon – that’s not right?

Share can be disabled :)

Also – all of your screenshots show thumbnails. ;) What about all the different filetype icons, of which none fill the whole preview area or are square?

Exactly, most of the files should have thumbnails or so.
I will suggest we tune the filetypes icons, which should be the only one not filling up the whole square, to match the alignement on the left 👍

I would rather make sure the folder icons are aligned with the text like the thumbnails.

[pixelipo]

A "no" from me.

Centering on the filepicker looks great because everything is centered. Having icons aligned to one edge and the title not aligned to any edge doesn't make sense to me.

Also, in all those screenshots - icons are way to far from each other! Why is that? Why not give them their normal area (44px width) and place them right next to each other. Icons are buttons - hence they need to be close enough to minimize mouse movement yet far enough to give good accessibility. Predefined size makes sure the latter is achieved.

[skjnldsv]

Also, in all those screenshots - icons are way to far from each other! Why is that?

They are 44px appart :)
If we make them closer, we need to space them, or use margin hack, but then they will have a margin conflict between them :(

[jancborchardt]

I will suggest we tune the filetypes icons, which should be the only one not filling up the whole square, to match the alignement on the left +1

Aligning the icons to the left? They should absolutely be centered in the clickable area.

Anyhow, I’ll close this then.

[skjnldsv]

Aligning the icons to the left? They should absolutely be centered in the clickable area.

No, making them bigger so they match the same size as any thumbnail :)

[jancborchardt]

Actually reopening because the current state looks even worse on the link sharing page:

Here’s another proposal of centering, which looks much more balanced, no? (Manual mockup as it needs to be centered, take as much space as possible, and need to take into account the width of the 3-dot menu):

@pixelipo @skjnldsv @juliushaertl what are your alternative suggestions – with mockups please? Or do you think the current state is the best?

No, making them bigger so they match the same size as any thumbnail :)

@skjnldsv This is exactly the opposite of what looks good though, and we discussed at 'In grid view, file type icons are too big compared to image previews' #11902. Feel free to try out making the folder icons and the other filetype icons even bigger – it looks very unbalanced.

[raimund-schluessler]

I would leave it left aligned. Having it centered looks weird to me, since it cannot always be centered due to the share/action icons and then the name ends up being left aligned anyway. This then just looks like no alignment at all (short names are really centered, very long ones are left aligned and medium length names are neither of both).

Also in my screenshots in the original post: Some file/folder names like "Notes" or "Bahn" are visually much closer to the action icons of other elements than their own. This breaks the Gestalt Law of Proximity.

This is a matter of perspective. The action icons do not belong to the name, but to the folder/file in general. So the name and the action icons need to be closer to their own folder icon/thumbnail than to the others, but this is the case already.

Maybe it would look less weird to you, if the folder icon would not have so much white-space around but would look similar in size to a file preview image. I saw that was neglected already, maybe moving the file type icon a bit down would do better then?

[skjnldsv]

I still maintain my position. The tiny shift on the left is not as dramatic as it sound.
It's still far better than the center I think.
I would leave it like that.

No, making them bigger so they match the same size as any thumbnail :)

@skjnldsv This is exactly the opposite of what looks good though, and we discussed at In grid view, file type icons are too big compared to image previews #11902.

Yup I agree :)

---

EDIT: one thing we could do is lower the size of non-generated previews. This looks further away of the filename and lower the feeling of misalignment.

[jancborchardt]

@skjnldsv so when we look at the file picker, it looks great centered below, right?
Now just adding one action icon (in share link) results in the text needing to go to the left? That doesn’t seem quite right and not consistent.

Everyone who comments and suggests stuff: Please make sure to look at all the places the view is used:

• Files app (with share icon and 3-dot icon): currently left-aligned
• Shared folder (with only 3-dot icon): currently left-aligned
• File picker (no icons): currently centered

We should find something that works nicely and consistently.

[raimund-schluessler]

My point here is that even if you center the name in the Files app, it is not really always centered, because long names have to move to the left to make space for the share icon. So it is not even consistent within the same view anymore. I think this is worse than having an inconsistency between different views.

[MorrisJobke]

Moved to 16. If there is a bugfix then we can backport this.

[jancborchardt]

As discussed in #12135 and in the design meeting at the Contributor Week we will simplify the Grid view, which will ensure that the focus is on the filetype icon/preview and the filename.

[rullzer]

So what is the status here?

[juliusknorr]

@jancborchardt I had a look at this and moved the filename to a proper centering related to the icon. The share indicators are also removed now as discussed in #12135

Looks much cleaner and properly aligned to me now. So 👍 from my side.

[juliusknorr]

Fine by me now 😉

[skjnldsv]

Very nice! This is a nice solution!
Thanks both of you!