Grid view: Improve readability of filenames

[oparoz]

There is simply not enough space below the thumbnail to show enough information about the name of a file.

Some suggestions:

1. Show the name in an overlay, on top of the thumbnail (see Gallery)
2. Expand the name when rolling over it (see Gallery)
3. Introduce extension overlays for all media types. These can be automatically generated. A JPG image would have a little JPG added to the top corner of the thumbnail

cc @nextcloud/designers

[nextcloud-bot]

GitMate.io thinks possibly related issues are #3351 (Grid view not working as expected), #3504 (showNotification closes Gallery view (probably others too)), #7416 (Public shared gallery in grid view, IE can`t scroll), #2731 (Switching from gallery view to list view not possible), and #11050 ([WIP] Grid view for files).

[MorrisJobke]

3. Introduce extension overlays for all media types. These can be automatically generated. A JPG image would have a little JPG added to the top corner of the thumbnail

Is it really necessary to show the extension in the grid view? Because when I use the grid view I want to actually see the content. For details like filename or extension I would use the list view. 🤔 Or is this a too naive approach.

[skjnldsv]

Yeah, I would say grid view is more centred on the content of the files (thumbnails) than the filename.
Otherwise the list view is for you :)

[juliusknorr]

Maybe we can just add a tooltip for the full filename. That would allow users to get the full name if needed, but not disturb the whole grid layout to much.

[jancborchardt]

@juliushaertl yeah, that seems like an ok solution. I’m also still not super happy with how it looks like, but then at least people on desktop can see the whole name on hover (screenreaders can already read it).

And yes, agree with @MorrisJobke that the extension is not interesting. Plus, we already have enough things floating on top of the image. ;)

[skjnldsv]

screenreaders can already read it

That is really awesome, I did not thought about it

[oparoz]

Is it really necessary to show the extension in the grid view? Because when I use the grid view I want to actually see the content. For details like filename or extension I would use the list view. 🤔 Or is this a too naive approach.

I think it won't be necessary to show the extension if there is a quick and easy way to see the full name of the file.
The goal of the grid view is not to replace something like Gallery, but to give an alternative view on your content, with access to all the usual files operations.
To view or work on content, users can use the apps which focus on that content (Gallery, office editing, DCOM viewer, etc.)

[MorrisJobke]

Something to think about once grid view is made the default -> moving to 16 as we are running out of time.

[jancborchardt]

Had some more design thoughts about this:

• Currently the biggest factor taking space from the filename is the share indicator. We can move the "Share" option into the first place of the 3-dot menu to alleviate this. As share indicator we could modify the 3-dot icon in some way, but not add a separate indicator. Similar with comments, a red dot (like we do for the notification bell) is enough.
• The checkboxes are overlaying all the previews all the time. But multiselect is not used all the time. So we should also move the "Select" option into the 3-dot menu. Then as soon as the first file is selected, we can switch into multiselection and show the select boxes on all the files.
• Additionally, when you hover the filename and it’s longer than what is displayed, we can either show a tooltip, or expand it to multiple lines (above) somehow to display all of it.

What do you think?

[skjnldsv]

So we should also move the "Select" option into the 3-dot menu

I think we need to stop putting everything into menus. I feel like we're losing grasp of ease of use just to cleanup the view. I'm not saying there isn't an issue, but having to click multiple time for each action is starting to inconvenience my nextcloud usage 🤔

[jancborchardt]

I think we need to stop putting everything into menus. I feel like we're losing grasp of ease of use just to cleanup the view. I'm not saying there isn't an issue, but having to click multiple time for each action is starting to inconvenience my nextcloud usage thinking

Yes, that’s a valid point. However, overlaying so many icons on top of the previews (like we also do in the mobile apps) obscures the number 1 use case: Just viewing your stuff. Everything other than viewing and opening needs to take a second place, and that includes sharing, and especially multiselect.

I know it’s harsh, but I’m simply making proposals to fix the situation where filenames can’t even be read properly. In other software the grid views are also pared down to the essentials. For example in Google Drive they have only either right-click, or a menu in the top bar when you click the item once (very confusing as it’s far away from the file):

Similar in iCloud drive:

In fact no other regular file manager overlays so much stuff. Yes it’s a bit hidden, but it also does not obscure the core part: The files themselves.

So we need to walk the line here, and please understand that I’m trying to balance all the input I get from all sides, and what people are used to from competitors out there.

[skjnldsv]

Then, let's drop totally the idea of a compromise between the two and go full mosaic display? 🐊

Maybe we should talk about supporting long-press on mobile view? 🤔

[skjnldsv]

So we need to walk the line here, and please understand that I’m trying to balance all the input I get from all sides, and what people are used to from competitors out there.

Of course! That's why we are discussing this, because we want to find the sweet spot here :)

I think we're getting in a tough situation because we want to have everything. Grid view and menu and such are not really compatible because of too many options.
The mosaic view have always been synonym of simplicity. In the opposite of detailed view, which was, erhm, well, detailed :p
Let's drop the idea of having everything on a menu, only the big lines like checkbox, and favorite?

[jancborchardt]

Then, let's drop totally the idea of a compromise between the two and go full mosaic display?

What do you mean there? Why drop the 3-dot icon, and how will people reach the options? And the checkbox is still there?

Maybe we should talk about supporting long-press on mobile view? 🤔

No, as long-press is very difficult to discover. Just like keyboard shortcuts this can only ever be an additional way of doing it, but not the only one. This is also why we have the 3-dot menu in the mobile apps – people had no idea how to reach the action menu there.

Let's drop the idea of having everything on a menu, only the big lines like checkbox, and favorite?

How will this improve the situation? As said, checkbox is not needed all that often, and can be relegated to the menu.

---

The proposal I wrote up above at #12135 (comment) would basically look like this in the first step (possibly we have to improve the placement of the favorite star indicator):

And with the menu open:

Yes, there are a lot of entries in that menu. But:

• We do need a nice default view which does not overwhelm people. That is top priority. Just because we have lots of stuff in the menu we can’t allow it to spread all over.
• We already have some nice solutions like combining the "Move or copy". I’m sure we can come up with other things there.

[Cinerar]

Can i suggest Details tab to stay opened while allowing to change current selected file.
It can solve this issue for cases when filename is really needed.

[jancborchardt]

@Cinerar that is a separate issue tracked at Automatically open sidebar for current folder if the screen size allows it #7138. But this here has to work on any screen size, also small ones where the sidebar is not displayed alongside the files view. My proposal above still stands.

[jospoortvliet]

Some ideas, ignore if stupid:

• make renaming possible in the details sidebar (with a pen icon over the name there). That cleans up an item from the menu.
• replace the ... with a share icon when the file is shared. Doesn't take more space and shows when a file is shared, which is certainly important information.
• consider going two lines, like both g-drive and iCloud do. Show nr of files in a folder or size of a file on the 2nd row together with the menu on the right. leaves more space for the name - I still think the main issue of our grid view is the short names. Yes, in some situations that's fine, in others the name is still useful and you don't want to switch between the two all the time...

[jancborchardt]

Really good stuff @juliushaertl! 🚀 Thanks for going ahead with removing the share avatar in #12173 – really is much cleaner.

Can we put the share action (with avatar, if present) into the menu then though? :) And then the only thing left is moving select there too.

[MorrisJobke]

@jancborchardt Any news regarding the grid view?

[skjnldsv]

@MorrisJobke we will do a pass and bugfixes of the grid view with Jan during the week :)

[gessel]

The grid view is nice for graphics as is, but kinda useless for text files. It's a nice default view and I do like organization overall, however I find the name field somewhat uselessly short. It's just CSS and seems like a very reasonable option to allow multi line filenames that break usefully - something like "grid view file name rows: [1]" as a default, up to whatever the user wants - if greater than one compute spacing and set breaks to something useful.

class="ui-droppable"
#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) {
    display: block;
    position: relative;
    height: 210px;
    border-radius: var(--border-radius);
}

class="innernametext"
#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
    display: inline-block;
    text-align: center;
    word-wrap: break-word;
    overflow: auto;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
}

#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext {
    display: flex;
    height: 90px;
    margin-top: 144px;
    text-align: center;
    line-height: 15px;
    padding: 0;
}

Tool tips would also be very helpful with the full file name, file size, mod date.

also, being able to see the whole filename in the info bar, as difficult as that is to get to (...->select file by file, no way to navigate through the directory) is helpful and there's plenty of room in the side bar

.app-sidebar .app-sidebar-header__desc .app-sidebar-header__title-container .app-sidebar-header__subtitle[data-v-60fb5aa3] {
    padding: 0;
    opacity: .7;
    font-size: var(--default-font-size);
}
.app-sidebar .app-sidebar-header__desc .app-sidebar-header__title-container .app-sidebar-header__maintitle[data-v-60fb5aa3], .app-sidebar .app-sidebar-header__desc .app-sidebar-header__title-container .app-sidebar-header__subtitle[data-v-60fb5aa3] {
    overflow: visible;
    width: 100%;
    margin: ;
    white-space: normal;
}

This, to me is much, much better:

[gessel]

A little twiddling and I'm happy - using the custom CSS plugin and the below CSS mods I get multi-line file names in grid view and the info box, which look nice (to me) and provide enough extra context to disambiguate files with long names or that start the same, something that bugged me before.

The grid CSS changes show up to 4 lines of filename text with the interesting artifact that for names that do not wrap, the name line runs over the 3 dot menu, not an intended outcome, but also not a bad one:

The sidebar CSS change yields multi-line file names so the full filename is visible without resorting to a tool tip, a good thing I'd think:

While thumbnail-less files also get a fairly well formatted infobox view:

If anyone else wants multi-line filenames in grid view, this seems to do it, at least in NC23.

.app-sidebar .app-sidebar-header__desc .app-sidebar-header__title-container .app-sidebar-header__maintitle-container .app-sidebar-header__maintitle[data-v-60fb5aa3] {
    padding: 0;
    min-height: 30px;
    font-size: 20px;
    line-height: 30px;
    white-space: normal;
}

#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
    display: inline-block;
    text-align: start;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext {
    display: flex;
    height: 74px;
    margin-top: 146px;
    text-align: center;
    line-height: 16px;
    padding: 0;
}

#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) {
    display: block;
    position: relative;
    height: 210px;
    border-radius: var(--border-radius);
}

[nekohayo]

While waiting for the perfect designed solution, in the meantime as a stopgap could you folks consider using the title="the_filename" HTML attribute over the elements, so that the browser can at least show the full folder/file name in a native tooltip? That would help me on a day to day basis.

Update: actually seems to be implemented in #32964 ?

[jancborchardt]

@nekohayo yep, this is in Nextcloud 25 which was just released:

Yes we do need to improve the grid view, however before any improvements there we want to first port Files to Vue #28063

[skjnldsv]

@jancborchardt any improvements you still see then ?
Or shall we close?