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:
  • [x] Undo
  • [x] Redo
  • [x] Formatting
    • [ ] Title, heading, subheading, body
    • [ ] bold, italic, underline, strikethrough
    • [x] Lists: ordered, unordered, checklist (in future: indent & un-indent)
  • [ ] Link
  • [ ] Add: Upload file, add from Nextcloud, Link to file, possibly Emoji
  • [x] "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:
  • [x] Blockquote and code block go into the callouts menu
  • [x] Heading menu left of bold
  • [ ] Space between groups (Undo/redo SPACE headings & formatting SPACE lists SPACE all the rest)
• [x] 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)
• [x] Change icon of headings option to https://fonts.google.com/icons?selected=Material Icons%3Aformat_size%3A

Accessibility

• [x] Contrast for selected formatting option is not enough
  • [x] Go back to dot or a rounded bar on the bottom
  • [x] 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