Notebook bar design refresh

[juliusknorr]

Notes from our design review call:

See Microsoft Office design refresh for reference
Ref CollaboraOnline/online#3741

• Color to regular page background
  • Align similar boxed layout like MS Office, with rounded corners
  • Possibly align with Nextcloud Sidebar hover/focus feedback (like list item in talk)
• No app specific colors (blue, green, orange), just use primary for theming
• Tabs
  • Separate sections like MS Office without indication at the bottom
  • Align to new tabs design like for sidebar tabs
• Header bar
  • Fullscreen -> View menu
  • Save -> Give feedback in top right, as in normal view
  • Undo/Redo -> Home, first block on left
  • Save button possibly in same group as undo redo, definitely on Home tab
  • Menu entries need to move elsewhere, should only show on mobile
    • Select all → Should be same group as cut copy paste?
    • Fullscreen → Already in Layout tab
    • Show ruler → Already in Layout tab
    • Track changes → Already in Review tab
    • Find and replace → Already in Home tab
    • Repair → Already in File tab
    • Tools (spelling, word count) → Already in Review tab
• Sidebar
  • Background color should be same as document background
  • Dividing border can be much lighter
  • Little bit of vertical whitespace between sections
• Font style selector
  • Borders are too dark
  • Active font style should use our default active state (and hover/focus should use the default hover/focus states)
  • Box should have rounded corners
  • Scrollbar is strange– instead should use scroll buttons
  • Doesn’t need to show "Heading 1" etc twice, just show "AaBbCc" in formatted way and title below. Or directly "Heading 1" formatted, like Apple Pages does
    • If we use 2 lines: Line height between the 2 lines are too much

[pedropintosilva]

Generally I like it and it shares many things that I already liked from @Andreas-Kainz 's CollaboraOnline/online#3741 and goes a bit beyond.

• The shortcuts parent (that has save, full-screen, undo and redo): hiding it makes sense if we have other way to show the some actions:
  • As discussed with @jancborchardt I think moving undo/redo to home tab is fine. Sure, now the user cannot access those icons at all times and that's an disadvantage (plus an extra click) but if we are ok with that it should be fine (specially when those actions are very commonly triggered via keyboard shortcut)
    • We could also add undo and redo icons to the right click context menu (so to provide a way to wherever the tab is the user can simply right click the document and undo the change)
• Hamburger: I think, and as discussed with @Andreas-Kainz, we can hide it provided that all icons are present within the notebookbar (and maybe one or two should be duplicated to be also present in the home tab, I need to check that)
• I like this floating direction : )
  • Wonder about contrast for the active tab (probably easily solvable by experimenting with a bit of color)
  • The sidebar: I wonder, if the floating concept is to be kept, how to solve this:
    • The way the left bezel end abruptly doesn't look so good
      • Maybe the bezel can keep going up under the floating element
      • Or maybe we could somehow combine statusbar and sidebar ..hm.. this is what it comes to my mind (draft, we would need to think what we want to be visible in that mini status bar as well )
        

[Andreas-Kainz]

I would like to bring in mind the mockups from here to discuss with, cause I think with tricky alignment we maybe can group our toolbars full with commands CollaboraOnline/online#3871

[Andreas-Kainz]

for me the bigger question is the layout and behaviour of the sidebar (which could be a separate issue).

would it be possible to combine the NC sidebar with the COOL sidebar? I'm thinking of have the NC sidebar (if cool run within a NC) where you have in general defferent tabs and add there one tab for office properties.

[pedropintosilva]

would it be possible to combine the NC sidebar with the COOL sidebar? I'm thinking of have the NC sidebar (if cool run within a NC) where you have in general defferent tabs and add there one tab for office properties.

That's exactly what I want as well to avoid having too many sidebars (ideally just one that changes its content when NC stuff is needed) I already discussed with @eszkadev and @juliushaertl some time ago and very recently with @jancborchardt

Probably the best would be to use JSON thing and postmessages for events (less iframes and sizing problems) and then working on trying to keep everything unified style-wise etc. So yes that would be the direction to take : )

Also there are a couple of things that are not really needed from the NC sidebar (even if it ends up in one unique sidebar). Example: while the user is in the document, and as @jancborchardt have pointed out, document preview, document name, etc are not really needed there and occupy quite a lot of space

[Andreas-Kainz]

When the sidebar color use the page background color to be less focused, the select color is different than for the toolbar/notebookbar.

What if use for the notebookbar and sidebar the background color of the page (light gray) AND the area of the commands will have white background with box-shadow, ... So we have the same design language for the toolbar/notebookbar and the sidebar.

[jancborchardt]

Additional points from our design review call:

Menu bar

• "Save" action doesn’t need to be in the menu bar

Toolbar

• "Save" action should also be in "Home" section, on the far left
• Active icon (e.g. Bold) is not black
• If you hover over actions like "Save", "Save as" or "Print" (or the others too), the icon only turns black when you hover over the icon itself, but should already do that if you hover/focus anywhere on the action area
• Share icon in the "File" tab uses the non-filled one, should be this: https://fonts.google.com/icons?selected=Material%20Icons%3Ashare%3A
• In "View" section, the ruler and status bar icons are permanently black
• Lighter color for the paragraph styles box → use actual color-border, #ededed
• Table tab needs some icons: https://materialdesignicons.com/ → search for "table", Text also has those icons
• "Accessibility check" needs Material Design icon: https://fonts.google.com/icons?selected=Material%20Icons%3Aaccessibility_new%3A

Right sidebar

• Possibly remove horizontal line below Style/Character/Paragraph headings as it splits headings from content and is barely visible anyway

[juliusknorr]

Moving to smaller tickets to have a better overview and making it more easy to tackle individual items:

• Missing material icons #2331
• Icon opacity is different on some icons #2332