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
[ ] 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.
Summary
Currently, toolbar dropdowns in
Some users have found these dropdowns initially unintuitive (e.g. discovering that they exist) and their design differs significantly from that of other apps.
js-draw
look the same on all platforms. This is the current appearance (and can be seen here):The redesign will likely have different dropdown layouts for different platforms (e.g. small screen width vs large screen width).
To-dos
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:![screenshot: pan tool dropdown: A list of buttons with icons](https://user-images.githubusercontent.com/46334387/249520484-479bc34f-1ee9-4c85-a25f-9492c4c6f147.png)
The "page" dropdown looks like this:![screenshot: page tool dropdown](https://user-images.githubusercontent.com/46334387/249520635-c910de13-5e9e-40d6-9351-7d404bc1959e.png)
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.