Improve design implementation accuracy of dropdown menus

rerun-io / rerun

Visualize streams of multimodal data. Fast, easy to use, and simple to integrate. Built in Rust using egui.

https://rerun.io/

Apache License 2.0

5.85k stars 264 forks source link

Improve design implementation accuracy of dropdown menus #2734

Open martenbjork opened 1 year ago

martenbjork commented 1 year ago

Implementation:

Design system:

Figma link

Behind the scenes:

TODO

[ ] Reduce the padding around the list items to 4px horizontally and 8px vertically
[ ] Increase the padding around individual list items to 6px horizontally
[ ] Set the height of each list item to 20px
[ ] Use the tickmark icon to signify the current selection
[ ] Use the down arrow icon in Figma for the closed state
[ ] click down on the menu opens it, click up on an item selects it

abey79 commented 1 year ago

@martenbjork The usual "egui" way of doing this is to use checkboxes instead of regular buttons as it's currently done. This is visible, e.g., in the rerun menu:

What immediately stands out is:

the "v" check mark shapes (which comes from egui) is different from that of sigma
the default background of the checkbox is ever so slightly different of the menu's background, so we can see it

How do you feel about (1)? Note that this is the same checkmark for regular, non-menu checkbox:

As for (2), I'll fix the checkbox color to match the menu, let me know if I should go the other way round.

martenbjork commented 1 year ago

I think having consistent iconography across the UI is pretty important. Using the icons from Figma will ensure that.
I find the EGUI way of doing "checkable menu items" not great. As a rule, when hovering an interactive item, the entire item should respond as one big interactive surface. That feels predictable and reliable. In constrast, when you hover one thing and another thing changes visually, the UI feels very finicky and unreliable. (What should I click? The menu item? The checkbox? Will clicking the checkbox close the menu?)

Rerun:

https://github.com/rerun-io/rerun/assets/875708/bf19e53b-fb45-4142-aadc-20f4957402ba

Mac OS:

https://github.com/rerun-io/rerun/assets/875708/c5cb61be-fc1c-4792-90aa-f09967f79b97

Figma:

https://github.com/rerun-io/rerun/assets/875708/eaf63a23-c5d9-4e90-8bfc-38ce12f03272

martenbjork commented 1 year ago

An example from Rerun getting this right. Look how big, trustworthy and predictable this toggle feels. Super solid! (Especially when we get rid of the scaling of the arrow, then it will just be one big hover area reacting predictably.)

https://github.com/rerun-io/rerun/assets/875708/04bf929e-780c-40da-8e19-8533f05e1797