Long breadcrumb: truncate and add drop menu

[tbsbdr]

Steps to reproduce

1. login on web.owncloud.com, switch to new design
2. create many folders and open them until the breadcrumb line-breaks

Expected behaviour

Breadcrumb should not line-break

Actual behaviour

Breadcrumb Line-breaks:

Proposal

• truncate the breadcrumb with ... on the left, so that it does not line-break
• click on ... opens a drop menu with only the remaining i.e. truncated (hidden) folders.
• click on item navigates to the respective folder
• root elements are not truncated, i.e. Personal, Spaces > Mars stays visible, truncation starts after that

Scribble:

[fschade]

maybe the easiest solution

<div id="parent">
  <ul id="child" class="breadcrumb">...</ul>
</div>

#parent -> overflow-x: hidden
#child -> whitespace: nowrap
#child.li -> max-width: xrem; ... text-overflow: ellipsis;

window.onResize: #child.outerWitdh >= #parent.outerWitdh => child.li -> pop

[lookacat]

Would propose doing it like flo said, I tried to find another solution but I'm not sure if the three dots menu is possible that easy :/

[kulmann]

Would propose doing it like flo said, I tried to find another solution but I'm not sure if the three dots menu is possible that easy :/

You could have a look at what the classic ui in oc10 does. That has the truncation like we want to have it (not the three dots menu though, but that could be solved in a separate PR). The click behaviour on the truncated part feels non-deterministic in oc10 classic ui, so I'd propose to just not react at all on a click on the ... in the first iteration.

[hurradieweltgehtunter]

depending issue: creating a new folder in a deep nested folder with line-breaking breadcrumb results in this:

Gets resolved on changeing the windows width or reloading the page.

[elizavetaRa]

We are facing the problem (also tested on ocis.ocis-traefik.latest.owncloud.works) that the line break is not happening for long breadcrumbs and as a result the breadcrumb keeps the width for the web-app-files. It makes the sidebar unusable.

[lookacat]

We've would go for a solution similar to that of dropbox. If the breadcrumbs total length is greater than the available size, we remove items from the front but leaving personal and showing a dropdown for the hidden items. (e.g. Personal > ... > someFolder > subFolder)

Very small technical PoC (without the dropdown yet)
236193597-a0a198c5-891c-4709-8c21-41289ef01080.webm

[hurradieweltgehtunter]

Very small technical PoC (without the dropdown yet) 236193597-a0a198c5-891c-4709-8c21-41289ef01080.webm

yes! i like that

[lookacat]

We've committed to don't build an dropdown for the ... item because its confusing, the ... will be clickable and direct you to the last hidden folder.
We also want to address smaller screen sizes in the future because even with this change on some viewports there is not enough space and it will result in horizontal scrolling which is a nogo.

[hurradieweltgehtunter]

We've committed to don't build an dropdown for the ... item because its confusing, the ... will be clickable and direct you to the last hidden folder. We also want to address smaller screen sizes in the future because even with this change on some viewports there is not enough space and it will result in horizontal scrolling which is a nogo.

Please don't.
The ... solution can be done including supporting small screens, that's not the point.
Check google drive or onedrive. They all go with the … solution, so it has to work. Going back to the last folder is confusing since … does not clearly state this action. … stands for "more context" or "more options".
Imagine you are in a deeply nested folder and want to navigate x folders back.
Dropdown: Just select the folder
goBackSolution: Click, wait till view loaded, click, wait till view loaded, click ...

[kulmann]

We've committed to don't build an dropdown for the ... item because its confusing, the ... will be clickable and direct you to the last hidden folder. We also want to address smaller screen sizes in the future because even with this change on some viewports there is not enough space and it will result in horizontal scrolling which is a nogo.

Please don't. The ... solution can be done including supporting small screens, that's not the point. Check google drive or onedrive. They all go with the … solution, so it has to work. Going back to the last folder is confusing since … does not clearly state this action. … stands for "more context" or "more options". Imagine you are in a deeply nested folder and want to navigate x folders back. Dropdown: Just select the folder goBackSolution: Click, wait till view loaded, click, wait till view loaded, click ...

... or go back to the top and then down again :-P

The mobile viewports don't use this breadcrumb design anyway, so we're talking about ipad size or larger.
In my opinion a good first iteration to interpret click on ... like @lookacat described, check user feedback and then build a dropdown only if really needed. The dropdown has its own quirks. E.g. it's always confusing if the hierarchy in the dropdown has to be interpreted from top to bottom or from bottom to top.

Heard your voice as a first indicator that ... without dropdown might not be sufficient as a solution. But let's please see this in action and then iterate further. Dropdown would be a pure addon behaviour anyway.

[tbsbdr]

relates to 7abee7a

[tbsbdr]

Question to @elizavetaRa
does the current implementation suit your needs regarding:

• Fix multiline breadcrumb
• Option for max length of breadcrumb item

you can check the current implementation here: (admin:admin)
https://ocis.ocis-web.latest.owncloud.works/

(admin:admin)