Unified header

[juliusknorr]

• [ ] Combine viewer header and the text formatting menubar (similar to how it is done in Nextcloud Office now)
• [ ] Combine the Share icon and the avatars into one overlapped thing. When we have avatars, we don’t need a share icon at all, and they don’t need individual clickable area – all can open the sidebar. (Mockup in the works)
• [ ] For Shared links, even put the controls in the blue header bar – see Dropbox Paper. (Mockup in the works)

Here are the mockups:

Unified bar Viewer + Text when logged in

We should also combine the Share icon and the avatars into one overlapped thing. When we have avatars, we don’t need a share icon at all, and they don’t need individual clickable area – all can open the sidebar.

For Shared links, even put the controls in the blue header bar

Desktop Mobile

Smaller polishing before the rename (already done):

• [x] Flash of half-transparent black at the beginning of viewer open should be white instead. https://github.com/nextcloud/text/pull/1907
• [x] Title and icons on top right shouldn’t fade out

[jancborchardt]

Here are the mockups:

Unified bar Viewer + Text when logged in

We should also combine the Share icon and the avatars into one overlapped thing. When we have avatars, we don’t need a share icon at all, and they don’t need individual clickable area – all can open the sidebar.

For Shared links, even put the controls in the blue header bar

Desktop Mobile

[jancborchardt]

cc @skjnldsv as well regarding the Viewer app ^

[juliusknorr]

I've moved the mockups to the first post and clarified the scope a bit since the original ticket was containing multiple things. Now this is purely about the unified header as the rest is already addressed.

[szaimen]

I wonder how the unified header would work on mobile?

[jancborchardt]

For the share link view, it would look even a bit nicer if we do it similar like in Nextcloud Office where there is only a thin primary line on the top, and the header "bar" is white. Then it’s not that huge of a contrast with a blue menu bar which is a bit uncommon. :)

[luka-nextcloud]

@juliushaertl I have some technical questions:

• How can I get shared by and download link from the text app since they exist in server app? How can we pass those values to text app?
• How can we trigger the event to open the sidebar from the text app?

[juliusknorr]

I'm wondering if we should actually rebuild the already existing UI or the option I would prefer is to find a way to inject the menubar and the avatars into the existing header.

Not yet sure if that is technically feasible but maybe we could somehow trick the component to render into divs outside of the main text container.

@vinicius73 Maybe you have a creative idea or can tell if that is a stupid idea :D

One potential library for that I've found would be https://portal-vue.linusb.org

[luka-nextcloud]

@juliushaertl I did some research based on your suggestion: First, we need to put a portal target on our header. And then we need to wrap the menubar into the <Portal> component. That means we need to modify the nexcloud-vue library. We need to modify both the text app and the nexcloud-vue. Since the nextcloud-vue is a library, I don't think we can modify it and it seems not feasible...

[juliusknorr]

As just discussed in the call, I think we may dynamically insert an element to the div.header-left and then render the portal target into it similar to https://github.com/LinusBorg/portal-vue/issues/114#issuecomment-371116768