Menu bar redesign

[juliusknorr]

Notes from the design review call at 23.08.2022

Overall

• Formatting bar too wide, especially on mobile.
  • Maybe show only a "Formatting" button on the bottom and on clicking have a bottom sheet style with all the formatting options like on iOS notes on mobile.
  • Grouping:
    • Undo
    • Redo
    • Formatting
      • Title, heading, subheading, body
      • bold, italic, underline, strikethrough
      • Lists: ordered, unordered, checklist (in future: indent & un-indent)
    • Link
    • Add: Upload file, add from Nextcloud, Link to file, possibly Emoji
    • "Insert block" --> Callouts, blockquote, table, code block
    • Emojis: Either separate entry, or put into "Insert images"
    • Formatting help: Either put on top, or separate entry, or into formatting
  • On desktop:
    • Blockquote and code block go into the callouts menu
    • Heading menu left of bold
    • Space between groups (Undo/redo SPACE headings & formatting SPACE lists SPACE all the rest)
• Replace "Saved" indicator with an icon
• Check if emoji picker can be put in a submenu (of the "Add" menu)
• Add a separate item in the heading menu "Body text" as the first item (but still only show dot indicator when any heading level is selected)
• Change icon of headings option to https://fonts.google.com/icons?selected=Material Icons%3Aformat_size%3A

Accessibility

• Contrast for selected formatting option is not enough
  • Go back to dot or a rounded bar on the bottom
  • Icon needs to be black as well

[mejo-]

Discussion with @marcoambrosini:

• Always group block elements (blockquote, code block, callouts), use CardText MDI icon
• Group text marks (bold, italic, underscore, strikethrough) on mobile, use FormatTextVariant (or FormatText?) icon