Rework toolbar dropdowns

[personalizedrefrigerator]

Summary

Currently, toolbar dropdowns in js-draw look the same on all platforms. This is the current appearance (and can be seen here): Some users have found these dropdowns initially unintuitive (e.g. discovering that they exist) and their design differs significantly from that of other apps.

The redesign will likely have different dropdown layouts for different platforms (e.g. small screen width vs large screen width).

To-dos

• [x] Redesign dropdowns/toolbar on small-width screens
• [x] Redesign dropdowns/toolbar on large-width screens
• [x] Implement draft versions of designs (branch)
  • [ ] Refactoring to allow multiple different types of toolbar layouts (without significantly changing API).
  • [ ] Implement redesign possibilities (see below)
• [x] Receive and implement feedback on drafts

Design drafts

Note: The below sketches don't include the exact icons/colors/theming I plan to use.

Redesign possibility 1: Sidebars

On large screens, one option is to display tool options in a sidebar, rather than a dropdown. For example,

While this is a closer experience to many other applications and may be easier to navigate to, it is unclear whether the pan tool/page dropdown should have a similar sidebar or a completely different design.

At present, the "pan" dropdown looks like this:

The "page" dropdown looks like this:

The pan dropdown might, with a sidebar, look like this:

Redesign possibility 2: Drawer-like menu from the bottom of the screen

On narrow-width screens, it may make sense to use a menu that comes up from the bottom of the screen:

Tapping on a tool twice or long-pressing could show the dropdown.

[personalizedrefrigerator]

Closing for now: Possibility 2 has been implemented for quite some time.