[full-ci] Implement long breadcrumb strategy

[lookacat]

Description

Breadcrumb should not line-break. This is a new strategy to deal with long breadcrumbs and long folder names.
See #6731

Maybe this helps

Screenshots

Before (old):

After (new):

Related Issue

• Fixes Long breadcrumb: truncate and add drop menu #6731

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:

Open tasks:

• Fix ... button
• vertical alignment of breadcrumb items is off. The last breadcrumb item has a lower baseline as all the other elements. More precisely, the breadcrumb items (except the last one) have slightly moved up. You can see that when you compare to the old state and watch the distance between text baseline and the chevron right icon.
• The breadcrumbs are truncated far too early. See video. There is a lot of space left but the breadcrumbs already get shrinked down to a minimum. That feels wrong.

[update-docs]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[ownclouders]

Results for e2e-tests oCIS https://drone.owncloud.com/owncloud/web/35587/12/1

💥 To see the trace, please open the link in the console ...

npx playwright show-trace https://cache.owncloud.com/public/owncloud/web/35587/tracing/deny-and-grant-access-alice-2023-5-10-01-54-52.zip

[ownclouders]

Results for acceptance oC10 https://drone.owncloud.com/owncloud/web/35580/20/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUIPreview-mediaPreview_feature-L143.png

[JammingBen]

Haven't looked into the code yet, but what I've noticed testing this:

• Breadcrumb items get "cut" when exceeding a specific length. See for example "a folder with a very long name" -> "a folder with a":

• Clicking on the ... doesn't render a drop menu with the omitted items, but just goes one level up. Is that intentional?
• The mobile navigation looks broken:

[lookacat]

Clicking on the ... doesn't render a drop menu with the omitted items, but just goes one level up. Is that intentional?

yes, it should navigate to the previous hidden folder, so when you e.g. only have one folder in the breadcrumb you can navigate one up.

Will look into mobile, and the long folder name

[JammingBen]

You are obviously much deeper into the topic, but one thing got me wondering: Do you really need to pass calculateBreadcrumbMaxWidth as a method to OcBreadcrumb? Couldn't you just pass a number property (e.g. availableWidth) to the component? You'd simply need to watch this value and re-evaluate the breadcrumb on change. Also, it would make the resize observer obsolete (we already have one in Appbar.vue).

[lookacat]

i think that should be possible

[kulmann]

Didn't look into the code, yet. Just tried it out. Two things that caught my eye:

1. vertical alignment of breadcrumb items is off. The last breadcrumb item has a lower baseline as all the other elements. More precisely, the breadcrumb items (except the last one) have slightly moved up. You can see that when you compare to the old state and watch the distance between text baseline and the chevron right icon. See two screenshots:

before

after

2. The breadcrumbs are truncated far too early. See video. There is a lot of space left but the breadcrumbs already get shrinked down to a minimum. That feels wrong.

Screen.Recording.2023-05-17.at.14.57.13.mov

[kulmann]

Probably looks like a wall of text (sorry for that) but all of these comments are small stuff and should be easy to fix... Great work, love it! UX feels really good.

[kulmann]

Please introduce a param for the offset. Don't forget to use it when inserting the ... element to the correct position. Use 2 as default for the offset param. But then set 3 for breadcrumbs in project spaces. That way you get Spaces > SpaceName > ... > trölölö for project spaces. Otherwise the space name will always be cut off.

[lookacat]

i like the idea very much and i implemented it BUT, as soon as i navigate into a space im no longer in a project space but in a generic space, the same as personal

[kulmann]

But you do have a space object via prop in the generic space view. And on that space object you can use the type guard isProjectSpaceResource(props.space) to identify if it's a project space or not. I think you also need the same with isShareSpaceResource(props.space) because a share breadcrumb also has an overview item and a share root item in the breadcrumbs (Shared with me > some share name > ... > subfolder).

[kulmann]

[kulmann]

🥳

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

87.8% Coverage
0.0% Duplication