Viewer integration

[juliusknorr]

The goal is to migrate the files app integration to https://github.com/nextcloud/viewer so that collabora can be used in the same standardized way across apps, e.g. for opening office documents in talk as well.

There are two blocking parts currently where I'd like to get some input:

Viewer integration

We currently show a list of avatars in the Nextcloud header bar while editing documents.

Right now there is no way to hook into the viewer header from the mimetype component. I was thinking about ways to allow the component to expose a custom component to the modal header, however I don't have a proper solution for this yet. One idea would be to allow registering a second component that would then be just mounted into the viewer actions slot. Does that sound like a good idea or can you think of a different solution @skjnldsv ?

Viewer design

@jancborchardt The second part is the design. Just integrating collabora in viewer looks like this but this d

We have some mockups for editing files with text in viewer at nextcloud/text#82 (comment)

However they don't apply to Collabora since we cannot change how the Collabora app looks nor move parts of that out to the header bar, so that design approach only works for text. Since we also try to standardize the viewer as much as possible I'm really against having a different kind of look for each app so my suggestion would be the following in two steps as the basic integration should be there with Nextcloud 19:

• Integrate viewer as it is shown in the second screenshot for Nextcloud 19 (next richdocuments release)

  • No editing avatars yet
  • Editing works from within talk

• Have a editor mode in viewer that (Nextcloud 20+)

  • Uses a modal with a white background
  • Allow injecting a custom component in the header for the avatar list

[juliusknorr]

Quick and dirty mockup of the "editor mode"

[jancborchardt]

Quick and dirty mockup of the "editor mode"

Looks good, great proposal, fully agree! :) Only one thing, we now use icon-menu-sidebar in the other apps, would be good to have consistency there.

That’s a good basis we can go from, and see how we deal with e.g. the title being duplicated.
I’d say for proper integrated look, we should also not on principle exclude the possibility of customizations per app in the viewer, especially when it comes to Collabora and Text.

A possibility could of course be to move the Collabora Online view to the top, and overlap our controls which are only on the top right. This could be either via CSS or possibly by injecting, which would have to be made possible by Collabora Online. → But that’s for the future. :)

[juliusknorr]

Looks good, great proposal, fully agree! :) Only one thing, we now use icon-menu-sidebar in the other apps, would be good to have consistency there.

Yes, I just didn't have those in figma yet when building the mockup. The close/sidebar icon will come from viewer then.

A possibility could of course be to move the Collabora Online view to the top, and overlap our controls which are only on the top right. This could be either via CSS or possibly by injecting, which would have to be made possible by Collabora Online. → But that’s for the future. :)

Not a fan, since that is basically going against all standardization approach we are currently aiming for and will of course break again whenever we change something on viewer.

That’s a good basis we can go from, and see how we deal with e.g. the title being duplicated.
I’d say for proper integrated look, we should also not on principle exclude the possibility of customizations per app in the viewer, especially when it comes to Collabora and Text.

Yes, but we need to find a proper way of doing that then 😉

[jancborchardt]

@juliushaertl what of this is outstanding after the merge of #979? :)

[juliusknorr]

I mainly kept this open for the viewer design enhancements that would also be nice for text so I'll hopefully tackle that with the text work for 21.