Show the child folders in the breadcrumb menu when on a parent entry.

[paierlep]

Previously, clicking on an menu item in the breadcrumb menu removed the
child entries of the path, i.e.:
Clicking on the "to" entry in "/path/to/some/folder" changed the
breadcrumb menu to show only the "/path/to" entries.
With this change the breadcrumb menu changes this behaviour as the full
path is still visible (and usable) but with the "to" entry beeing
highlighted.

Closes #1079
cc @nextcloud/designers @nextcloud/javascript @jancborchardt @szaimen

Signed-off-by: Christian Paier hallo+git@cpaier.com

[nimishavijay]

Sounds great! Would it be possible to post screenshots of the before/after to make it easier to see the design changes? :)

[paierlep]

Yes sure:
The breadcrumb renders as usually when viewing a folder:

Clicking on one of the parent folders gives a slightly different behavior:

[nimishavijay]

🚀

[szaimen]

Would it be possible to adjust the gaps so that the gaps in before and after look the same?

[nimishavijay]

There is a new breadcrumbs component, this would just be integrated with that, correct?

[artonge]

There is a new breadcrumbs component, this would just be integrated with that, correct?

No, the new breadcrumbs component is in vue, and this touches legacy code :(.

[paierlep]

Would it be possible to adjust the gaps so that the gaps in before and after look the same?

No problem - I've changed the scss file accordingly:

[artonge]

Need a rebase on master to make the continuous-integration/drone/pr work

git rebase origin/master

[szaimen]

No problem - I've changed the scss file accordingly:

Thanks! looks much better to me now :)

[szaimen]

tested and works 👍
(but didn't review the code)

[paierlep]

Need a rebase on master to make the continuous-integration/drone/pr work

Rebasing did not help with sqlite-php7.4-samba-non-native (No code coverage driver is available)

[welcome]

Thanks for your first pull request and welcome to the community! Feel free to keep them coming! If you are looking for issues to tackle then have a look at this selection: https://github.com/nextcloud/server/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22

[artonge]

Thanks for the PR @paierlep !

[raimund-schluessler]

There is a new breadcrumbs component, this would just be integrated with that, correct?

No, the nextcloud/vue breadcrumb component does not support this. If this is really desired, we would need to modify it.

But I have to admit, I find the behavior confusing. It takes more attention to figure out, which folder is currently open. And while this is a personal feeling that might change when getting used to it, there is also an objective usability problem with this solution.

See this screenshot. Which folder is currently open?

The currently open folder is hidden, because the breadcrumb bar is to long. So it is not possible to see which folder is open.

And even clicking the three-dots menu does not give a hint, because the currently open folder ("Even more folders" in this case) is not bold.

The second point can be fixed by making the folder that is open bold in the three-dots menu. For the first issue, I don't see a solution using this approach, to be honest.
@jancborchardt How does Nautilus handle this?

[paierlep]

Thank you for reviewing @artonge, @szaimen, @nimishavijay!

@raimund-schluessler nautilus seems to omit the first folders of the path, for a nested set of folders from a to z the outcome on the folder "u" only shows the folders "f" to "u":

Therefore getting to the root folder is only possible by clicking on the "f" folder first.
To add my 2 cents:
I prefer the dropdown menu from the vue screenshot above. Additionally I think it could look something like this:

Home > ... > Active Folder > ... > Deepest Child Folder

With the ... being one of those placeholders with dropdown menu from the screenshot. Best solution would be of course if there is a lot more space to expand this to, i.e.:

Home > ... > Parent Folder > Active Folder > Child Folder > ... > Deepest Child Folder

[raimund-schluessler]

To add my 2 cents: I prefer the dropdown menu from the vue screenshot above. Additionally I think it could look something like this:

Home > ... > Active Folder > ... > Deepest Child Folder

This only works if there is enough space. But if there is enough space, this issue won't appear. So what you propose makes it a bit better, yes. But it is no real solution, in my opinion.

Especially on mobile, there is often only enough space to show one, maybe two levels. This is iPhone 8 for example:

If you navigate up on such a device, you will always have to click on the three dots menu to see your active folder.

[jancborchardt]

So @nimishavijay and I checked back on how it’s done elsewhere. Since I initially opened the issue #1079 because Nautilus did it, checking with it now, they don’t do it anymore. Neither does e.g. Google Drive or Dropbox.

Hence considering all the issues and possible confusion this brings, it’s probably best to not do this after all – @paierlep sorry about that, we should have kept the issue up to date. :\

@raimund-schluessler what do you think?

[paierlep]

(deleting my previous comment, as I've been stupid and did my comparison wrong ;) )

@jancborchardt Don't worry - I should have mentioned it earlier that I'm working on it ;)

[szaimen]

So should thid be reverted?