cool header area content arrangement

[Andreas-Kainz]

The header area of cool contains the following elements

• document-logo
• menubar (classic mode)
• shortcutsbar
• notebookbar tabbs (notebookbar mode)
• document-titlebar
• last-modified
• collaboration
• NC integration (if available, also with sidebar toggle)
• sidebar (notebookbar mode)
• close button

So there are differences between classic/notebookbar mode, desktop/mobile/tablet and cloud integration y/n.

[Andreas-Kainz]

If we go one step back and make it more simple there are the following sections needed for the header area

• left section
• center section (center, center align)
• right section

[Andreas-Kainz]

So maybe we can first define this 3 sections, than add the different command and if there is less width, define which elements has to be hidden one after the other.

[Andreas-Kainz]

This left / center / right section arrangement can not only be usefull for the header area, also fot the toolbar it maybe can offer some options for improvements #3871.

[Andreas-Kainz]

Invite @pedropintosilva @juliushaertl @eszkadev for discussion.

[Andreas-Kainz]

For example last-mod #4070 was missing in notebookbar mode and also on tablet mode.
In Readonly mode there is missing the document-title in mobile mode.

Menubars, Toolbars, ... offer an easy way to define within the codebase which commands should be shown. This simple way would be nice for the header area also where you can offer the sections which should be shown and an dynamic expander to define where the commands should be arranged. This dynamic expander would be nice for the toolbar too #3871.

[juliusknorr]

If we go one step back and make it more simple there are the following sections needed for the header area

• left section
• center section (center, center align)
• right section

I think this is a good step forward. With that the actual positioning of the elements inline can be done through a flex layout.

The only thing I'm unsure about is the mobile/tablet handling and how to hide the elements then in a clean way. My usual take there would be media queries, but I know @pedropintosilva has strong feelings against them ;)

[juliusknorr]

For example last-mod #4070 was missing in notebookbar mode and also on tablet mode.

That would also be cleaner then for that to not render it as part of the menu bar itself, but as a separate container within the right section of the header:

https://github.com/CollaboraOnline/online/blob/master/browser/src/control/Control.Menubar.js#L310

This could probably just become a regular div within the html template next to avatars/closebutton https://github.com/CollaboraOnline/online/blob/master/browser/html/cool.html.m4#L196-L203 which is then just shown or hidden in https://github.com/CollaboraOnline/online/blob/master/browser/src/map/Map.js#L380-L404 based on the available screen space.

[Andreas-Kainz]

we also have issues when you make the window in the desktop mode that small, that the menubar for example didn't has enough space.

[juliusknorr]

we also have issues when you make the window in the desktop mode that small, that the menubar for example didn't has enough space.

@pedropintosilva Do you have any pattern already in use for this or would that be a case where media queries would still be suitable?

[pedropintosilva]

I agree that using more flex box layout would be beneficial. My plan was (I already have a local branch WIP) to make use of that and starting with top toollbar. So I would maybe wait until I push that PR (which does not change nothing just reduces the changes between with/without integrator) and then @Andreas-Kainz you can add your PRs on top :)

I would like to avoid #3871 the center alignment even though looks good at 1st sight is an headache for users (increase mouse travelling, increase time between scanning and detecting), plus it adds extra corner cases with extra problems (what to do when the screen is to small and there is a mix of alignment with not so much difference between them, what to do with NB [it's even harder for user if we center the tabs; if we don't we end up with one UI mode with different alignment

[pedropintosilva]

For example last-mod #4070 was missing in notebookbar mode and also on tablet mode.

I think this is a problem from NC branding itself

[Andreas-Kainz]

For example last-mod #4070 was missing in notebookbar mode and also on tablet mode.

I think this is a problem from NC branding itself

No last-mod was ONLY available in classic mode. everywhere else there is no last-mod.

[pedropintosilva]

I think this is a good step forward. With that the actual positioning of the elements inline can be done through a flex layout.

The only thing I'm unsure about is the mobile/tablet handling and how to hide the elements then in a clean way. My usual take there would be media queries, but I know @pedropintosilva has strong feelings against them ;)

ehe I'm not emotionally invested on having or not having media queries but I would like to avoid multiplying similar solutions for the same problem. So right now we have tried to avoid to have multiple extra maintenance and extra media queries in different files by loading the respective -mobile only file, -tablet only file or -desktop only file on top of the bundle.css (all normal css files) just when we need them: https://github.com/CollaboraOnline/online/blob/master/browser/Makefile.am#L470 https://github.com/CollaboraOnline/online/blob/master/browser/html/cool.html.m4#L348

[pedropintosilva]

ONLY available in classic mode. everywhere else there is no last-mod.

@Andreas-Kainz locally: image you are right

At the same time I think it's important to keep in mind that @gmasei11 had a very compelling idea on moving the last modified timestamp to the bottom (at least as an on/off option #4531 ). I that can be a very good way to free the top (specially on the notebookbar mode) from yet another element and move it that timestamp status to the status bar. We can then even make it as default only for CODE or (even CODE beta) and let people test it out, auscultate the feedback

[Andreas-Kainz]

my suggestion is to harmonize the header area cause there is no difference between toolbar and notebookbar layout or between desktop and tablet. Sure mobile is different. But everything else can be the same.

[pedropintosilva]

I'm all for make the things more uniformly implemented

[Andreas-Kainz]

when we move the last-mod to the statusbar #4531, can we have the Sidebar show/hide or in impress all the sidebar show/hide commands in the header area?

Anyhow this issue isn't about which element should be located where. It's about a simple header structure where you can than dynamically (depend on the window width) add commands left, center, right. Which should be the first step. Second step where which command should be arranged.