ColaboraOnline UI Layout

[Andreas-Kainz]

Colabora Online is a great product but I don't understood the need of an tabbed UI in the online release. I would prefer to have an layout that follow the UX guidelines of the software Colabora Online was used (Nextcloud, ...).

The idea is to use the UX guidelines of Nextcloud. There markdown editor has one smale toolbar and as everywhere in Nextcloud you can open and close an Sidebar. Here is the layout of the build-in markdown editor:

ColaboraOnline layout mockup

• menubar where in the markdown editor the filename is.
• one toolbar where you have commands that are not available with the sidebar (default toolbar stuff from LibO)
• sidebar open by default where you have all the contextual commands for formating, image, ...

[Andreas-Kainz]

As I wrote also an LOOL bug report there is additional information: https://bugs.documentfoundation.org/show_bug.cgi?id=137176

[mmeeks]

Hah - so, that's a bit silly, thanks FarkknightAK =) Let me paste my response here; it's a nice mockup.

Interesting idea =) To confirm - you want a simplified toolbar, and to move the menu in Nextcloud up over the header ?

If you fire up online and play with F12 in the browser - you can see how the iframe interacts with the Nextcloud surround; unfortunately it's really tough to get much outside the iframe - so possibly we'd need to do our own surround - but then the PHP/JS code re-use is harder; so a bit tricky.

Any ideas for things inside the frame ? (and do have a poke at it).

[pedropintosilva]

Thanks @DarkknightAK ! As @mmeeks pointed out it's kinda hard to achieve that from within the app iframe.

I also think that even if it was possible/easy other issues start to appear (depending on how many NC apps you have or if you have the default hub etc): lack of space/doesn't fit; how to control that in a dynamic way (which is outside of the app, it comes from storage solution); where to draw the line in terms of what is crucial etc:

Nevertheless your mockup made me wonder... if making the NC top bar collapsible wouldn't be advantageous for someone working with complex documents or simply for someone wanting a more immersive experience. I think that would be really cool : ) what do you think?

notes:

• the previous layout didn't got deleted and it's actually the default on NC
• the notebookbar layout is just a somewhat requested feature and now the users use to on other tools have no excuse to avoid migrating : p
• the notebookbar is also collapsible (just tab on the tab again and it will work as a toggle)

[Andreas-Kainz]

Nevertheless your mockup made me wonder... if making the NC top bar collapsible wouldn't be advantageous for someone working with complex documents or simply for someone wanting a more immersive experience. I think that would be really cool : ) what do you think?

I don't understood, cause the toolbar + menubar layout is collapsible (menubar was shown/hidden).

[Andreas-Kainz]

However I would like to discuss about the default layouts of COOL (I know there is notebookbar too).

As long as the sidebar isn't a native html element #164 I'm not sure to show the sidebar at least for writer I don't see the big benefit.

In LibO I made an tabbed compact and a contextual toolbar layout which was really the fastest layout I have ever done for LibO. The reason is simple. Tabbed compact and contextual toolbar are nearly the same

• tabbed compact has tabs and one toolbar row
• contextual toolbar has menubar + one toolbar row the contextual toolbar's are the same in tabbed compact and contextual.

[Andreas-Kainz]

tabbed compact layout contextual single layout

compare to the ribbon like UI which was done, an tabbed compact layout has the great advantage, that you don't have to care about the layout it's always one "toolbar" within a tab. You only can play with show/hide label.

[Andreas-Kainz]

tabbed compact layout - image context contextual single layout - image context

The context toolbar can be shared between tabbed or non tabbed layout. Less dev work (specific style previews, ONLY for ribbon UI, can be used in tabbed compact AND toolbar layout), less UI work and the user can choose between toolbar + menubar or tabbs.

[Andreas-Kainz]

The biggest problem of notebookbar implementation in LibO is that you edit .ui files compare to xml files which are way easier to edit and within LibO the only layout where the user can customize the layout. If you have in COOL also two different implementations, it will cause you a lot of issues at a long run. COOL (and also LibO) didn't has that much features, that it need a two row tabbed UI.

[Andreas-Kainz]

@eszkadev you know best the maintenance problem of different UI's.

[juliushaertl]

FIY we are currently working on an modified viewer mode design for file editors in Nextcloud (https://github.com/nextcloud/text/issues/82 for the previous design discussion), to make the general look and feel similar between different apps like Text and Collabora. Here is a current mockup of what our designer @jancborchardt proposed.

This of course still has some minor issues:

• The header bar takes quite some space and is otherwise empty
• The title is kind of duplicate with the rename input in COOL

I see the technical limitation, that there is probably no easy way to move the menu bar (or other components of Collabora Online outside of the iframe into the header.

We could of course consider to just show the COOL iframe, but then we would lack the quick and easy access to current editor avatars and the sharing sidebar:

[Andreas-Kainz]

yes it would be nice to have on top the menubar, in addition there would be enough space for the quick and easy access to sharing sidebar, but I also understood that if there is some limitation (iframe), it shouldn't be that a problem.

[Andreas-Kainz]

Ok I'll play around a bit with notebookbar and classic layout.

I don't think that Collabora should go that direction and the reason is simple, cause you have to maintain two different layouts with two different coding backends. Please keep your codebase as small and simple as possible. You have to maintain all that stuff, fix bugs, ...

So my proposal is to streamline the code as much as possible and have the flexibility of choise.

[Andreas-Kainz]

1. Classic and tabbed layout look very similar

Classic layout and tabbed layout look the same, the tabs in tabbed layout are the same than menubar menues.

1. "Titlebar" with the filename
2. Menubar or Tabbar
3. Toolbar

2. Menubar transform to Toolbar

Menubar JS Array can be shown as Menubar drop down widget or within a tab of the tabbed toolbar

1. Menubar contain of .uno: commands
2. Export .uno: command contains subcommands
3. File Menubar can be reused in, writer, calc, impress, ...
4. File Menubar can be reused in File Tab of tabbed layout
   • Menubar is a drop down widget
   • Notebookbar tab show the menubar items horizontal
   • separator in menubar = separator in tabbedbar

3. Resizing depend on the window width

1. .uno: commands with subcommands can be collapsed to a drop-down button

3. Configure

1. .uno: command can be shown as
   • Icon
   • Icon + Label left
   • Icon + Label bottom
   • Label only

Icon only view is needed for classic layout and home tab of tabbed layout (maybe for small devices) Icon + Label left is needed for tabbed layout everywhere excl. Home tab

4. Pro

• Simple UI, cause only one toolbar row.
• Layout similar to google docs
• Everything is JS, classic and notebookbar use the same backend, less code maintanance
• In the code you define arrays with .uno: commands which can be reused in tabbs, menubars, ... -> less code maintanance

5. Con

• It didn't look like MS Office 365 -> simplyfied ribbons

[Andreas-Kainz]

@eszkadev I tested context: ['Table'] which is ok to add context related command to an toolbar. The problem is that Control.TopToolbar.js will become very very complex and non maintable if you add everything content related that way.

I suggest to separate context stuff like it was done with Control.Menubar.js so that it is possible to have an getToolItems: function() { } separated into sections for the different apps (text, spreadsheet, presentation) and context maybe also separate sections for mobile, ... Now getToolItems: function() { } is really difficult to read.

Maybe we can define specific "arrays" and mix them in getToolItems: function() { } with apps and context specific stuff. I'm for simple maintenance as always.

[Andreas-Kainz]

the notebookbar.js files are easy to maintain and work well and the UI in general was updated with every release. So I can close the issue.