Rich workspaces: move formatting bar in front of breadcrumbs

[ya-d]

Is your feature request related to a problem? Please describe.
The rich workspaces feature adds a lot of unnecessary whitespace in the Files app as it reserves a vertical bar for formatting options – even if editing isn’t active or even if there is no readme at all.

If you enter the rich text area the whitespace is used to show the formatting bar. Which is again faded out if you exit text editing.

Describe the solution you'd like
As the formatting bar is only displayed if you actively click into the rich text area, I propose to move the formatting bar in front of folder breadcrumbs. Additionally a close button could be shown where the view switch is located.

If you exit the editing mode by clicking anywhere or using the close button, breadcrumbs are back there to navigate folders.

Describe alternatives you've considered
You can completely turn off rich workspaces but that strips the feature entirely not only the whitespace.

Quick mockups
Current:


Proposal:

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

[juliusknorr]

Might be tricky to implement properly from a technical perspective, as currently the styling is quite simple with being limited to the container div, but UI wise let's see what @nimishavijay and @jancborchardt think.

[juliusknorr]

@jancborchardt Any feedback on this one?

[juliusknorr]

🏓 @nextcloud/designers

[marcoambrosini]

I think we should use a formatting bar here (and everywhere else) like notion does

nextcloud-libraries/nextcloud-vue#4355

[juliusknorr]

We had a floating menu in the past for inserting links / updating links but it was not discoverable to lots of users and caused major troubles with mobile devices, especially on conflicting with native mobile browser dialogs on selected text, so this is something I would not re-introduce in text.

[nimishavijay]

Agreed with Julius, a floating formatting bar works in theory, but there were many issues even just for formatting links.

Since the problem is about the extra whitespace (which I agree with), what if we have the following behavior:

• when the rich workspace is not focused, remove that whitespace (so the height of that area will be lesser than it is currently)
• on focus there is an increase in height of the rich workspace area and the formatting bar is shown
• a transition/animation to smooth out the change