diff --git a/images/ui/drop_down/dropdown.png b/images/ui/drop_down/dropdown.png new file mode 100644 index 000000000..d2e8bd613 Binary files /dev/null and b/images/ui/drop_down/dropdown.png differ diff --git a/images/ui/drop_down/dropdown_dark.png b/images/ui/drop_down/dropdown_dark.png new file mode 100644 index 000000000..21d183d4e Binary files /dev/null and b/images/ui/drop_down/dropdown_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_1.png b/images/ui/drop_down/dropdown_how_to_1.png new file mode 100644 index 000000000..4292f8a27 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_1.png differ diff --git a/images/ui/drop_down/dropdown_how_to_10_correct.png b/images/ui/drop_down/dropdown_how_to_10_correct.png new file mode 100644 index 000000000..afdaa6686 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_10_correct.png differ diff --git a/images/ui/drop_down/dropdown_how_to_10_correct_dark.png b/images/ui/drop_down/dropdown_how_to_10_correct_dark.png new file mode 100644 index 000000000..1dc1d5f00 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_10_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_10_incorrect.png b/images/ui/drop_down/dropdown_how_to_10_incorrect.png new file mode 100644 index 000000000..416f4f134 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_10_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_how_to_10_incorrect_dark.png b/images/ui/drop_down/dropdown_how_to_10_incorrect_dark.png new file mode 100644 index 000000000..fc95eb3c1 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_10_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_11_correct.png b/images/ui/drop_down/dropdown_how_to_11_correct.png new file mode 100644 index 000000000..822fed103 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_11_correct.png differ diff --git a/images/ui/drop_down/dropdown_how_to_11_correct_dark.png b/images/ui/drop_down/dropdown_how_to_11_correct_dark.png new file mode 100644 index 000000000..49d077c44 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_11_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_11_incorrect.png b/images/ui/drop_down/dropdown_how_to_11_incorrect.png new file mode 100644 index 000000000..91ecdd739 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_11_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_how_to_11_incorrect_dark.png b/images/ui/drop_down/dropdown_how_to_11_incorrect_dark.png new file mode 100644 index 000000000..cdff766dd Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_11_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_12_1.png b/images/ui/drop_down/dropdown_how_to_12_1.png new file mode 100644 index 000000000..57b95372f Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_12_1.png differ diff --git a/images/ui/drop_down/dropdown_how_to_12_1_dark.png b/images/ui/drop_down/dropdown_how_to_12_1_dark.png new file mode 100644 index 000000000..4c106663e Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_12_1_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_12_2.png b/images/ui/drop_down/dropdown_how_to_12_2.png new file mode 100644 index 000000000..d2c4ff093 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_12_2.png differ diff --git a/images/ui/drop_down/dropdown_how_to_12_2_dark.png b/images/ui/drop_down/dropdown_how_to_12_2_dark.png new file mode 100644 index 000000000..055574a48 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_12_2_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_13_1.png b/images/ui/drop_down/dropdown_how_to_13_1.png new file mode 100644 index 000000000..a10095e07 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_13_1.png differ diff --git a/images/ui/drop_down/dropdown_how_to_13_1_dark.png b/images/ui/drop_down/dropdown_how_to_13_1_dark.png new file mode 100644 index 000000000..32c15804d Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_13_1_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_13_2.png b/images/ui/drop_down/dropdown_how_to_13_2.png new file mode 100644 index 000000000..38bd995fd Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_13_2.png differ diff --git a/images/ui/drop_down/dropdown_how_to_13_2_dark.png b/images/ui/drop_down/dropdown_how_to_13_2_dark.png new file mode 100644 index 000000000..f9f7a60d3 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_13_2_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_14.png b/images/ui/drop_down/dropdown_how_to_14.png new file mode 100644 index 000000000..88deee726 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_14.png differ diff --git a/images/ui/drop_down/dropdown_how_to_14_dark.png b/images/ui/drop_down/dropdown_how_to_14_dark.png new file mode 100644 index 000000000..c7604c754 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_14_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_1_dark.png b/images/ui/drop_down/dropdown_how_to_1_dark.png new file mode 100644 index 000000000..0ddef556d Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_1_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_2.png b/images/ui/drop_down/dropdown_how_to_2.png new file mode 100644 index 000000000..f4ba3848f Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_2.png differ diff --git a/images/ui/drop_down/dropdown_how_to_2_dark.png b/images/ui/drop_down/dropdown_how_to_2_dark.png new file mode 100644 index 000000000..02795826a Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_2_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_3_correct.png b/images/ui/drop_down/dropdown_how_to_3_correct.png new file mode 100644 index 000000000..e125fc3c8 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_3_correct.png differ diff --git a/images/ui/drop_down/dropdown_how_to_3_correct_dark.png b/images/ui/drop_down/dropdown_how_to_3_correct_dark.png new file mode 100644 index 000000000..11e6a9593 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_3_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_3_incorrect.png b/images/ui/drop_down/dropdown_how_to_3_incorrect.png new file mode 100644 index 000000000..fec68f088 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_3_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_how_to_3_incorrect_dark.png b/images/ui/drop_down/dropdown_how_to_3_incorrect_dark.png new file mode 100644 index 000000000..c139f17ec Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_3_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_4_correct.png b/images/ui/drop_down/dropdown_how_to_4_correct.png new file mode 100644 index 000000000..1a6e43183 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_4_correct.png differ diff --git a/images/ui/drop_down/dropdown_how_to_4_correct_dark.png b/images/ui/drop_down/dropdown_how_to_4_correct_dark.png new file mode 100644 index 000000000..860081274 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_4_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_4_incorrect.png b/images/ui/drop_down/dropdown_how_to_4_incorrect.png new file mode 100644 index 000000000..4650a1070 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_4_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_how_to_4_incorrect_dark.png b/images/ui/drop_down/dropdown_how_to_4_incorrect_dark.png new file mode 100644 index 000000000..91d4bc877 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_4_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_5_correct.png b/images/ui/drop_down/dropdown_how_to_5_correct.png new file mode 100644 index 000000000..79a5a5ecf Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_5_correct.png differ diff --git a/images/ui/drop_down/dropdown_how_to_5_correct_dark.png b/images/ui/drop_down/dropdown_how_to_5_correct_dark.png new file mode 100644 index 000000000..cd00abc1f Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_5_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_5_incorrect.png b/images/ui/drop_down/dropdown_how_to_5_incorrect.png new file mode 100644 index 000000000..b7509cab3 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_5_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_how_to_5_incorrect_dark.png b/images/ui/drop_down/dropdown_how_to_5_incorrect_dark.png new file mode 100644 index 000000000..232daf5da Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_5_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_6_1.png b/images/ui/drop_down/dropdown_how_to_6_1.png new file mode 100644 index 000000000..46760ff60 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_6_1.png differ diff --git a/images/ui/drop_down/dropdown_how_to_6_1_dark.png b/images/ui/drop_down/dropdown_how_to_6_1_dark.png new file mode 100644 index 000000000..6755790d0 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_6_1_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_6_2.png b/images/ui/drop_down/dropdown_how_to_6_2.png new file mode 100644 index 000000000..113c9a937 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_6_2.png differ diff --git a/images/ui/drop_down/dropdown_how_to_6_2_dark.png b/images/ui/drop_down/dropdown_how_to_6_2_dark.png new file mode 100644 index 000000000..84485217e Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_6_2_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_6_3.png b/images/ui/drop_down/dropdown_how_to_6_3.png new file mode 100644 index 000000000..3a41a29e4 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_6_3.png differ diff --git a/images/ui/drop_down/dropdown_how_to_6_3_dark.png b/images/ui/drop_down/dropdown_how_to_6_3_dark.png new file mode 100644 index 000000000..92ce9af84 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_6_3_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_7.png b/images/ui/drop_down/dropdown_how_to_7.png new file mode 100644 index 000000000..3ba98d968 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_7.png differ diff --git a/images/ui/drop_down/dropdown_how_to_7_1.png b/images/ui/drop_down/dropdown_how_to_7_1.png new file mode 100644 index 000000000..64d910cdb Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_7_1.png differ diff --git a/images/ui/drop_down/dropdown_how_to_7_1_dark.png b/images/ui/drop_down/dropdown_how_to_7_1_dark.png new file mode 100644 index 000000000..452b62a55 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_7_1_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_7_2.png b/images/ui/drop_down/dropdown_how_to_7_2.png new file mode 100644 index 000000000..dbd6826fd Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_7_2.png differ diff --git a/images/ui/drop_down/dropdown_how_to_7_2_dark.png b/images/ui/drop_down/dropdown_how_to_7_2_dark.png new file mode 100644 index 000000000..235ee61e2 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_7_2_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_7_dark.png b/images/ui/drop_down/dropdown_how_to_7_dark.png new file mode 100644 index 000000000..1d30d8971 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_7_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_8.png b/images/ui/drop_down/dropdown_how_to_8.png new file mode 100644 index 000000000..49f597eb4 Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_8.png differ diff --git a/images/ui/drop_down/dropdown_how_to_8_dark.png b/images/ui/drop_down/dropdown_how_to_8_dark.png new file mode 100644 index 000000000..d7adbe22b Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_8_dark.png differ diff --git a/images/ui/drop_down/dropdown_how_to_9.png b/images/ui/drop_down/dropdown_how_to_9.png new file mode 100644 index 000000000..dec53d4ea Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_9.png differ diff --git a/images/ui/drop_down/dropdown_how_to_9_dark.png b/images/ui/drop_down/dropdown_how_to_9_dark.png new file mode 100644 index 000000000..f30f1401d Binary files /dev/null and b/images/ui/drop_down/dropdown_how_to_9_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_1_correct.png b/images/ui/drop_down/dropdown_when_not_to_1_correct.png new file mode 100644 index 000000000..5b01fb30f Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_1_correct.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_1_correct_dark.png b/images/ui/drop_down/dropdown_when_not_to_1_correct_dark.png new file mode 100644 index 000000000..cc4f97f5f Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_1_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_1_incorrect.png b/images/ui/drop_down/dropdown_when_not_to_1_incorrect.png new file mode 100644 index 000000000..805526337 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_1_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_1_incorrect_dark.png b/images/ui/drop_down/dropdown_when_not_to_1_incorrect_dark.png new file mode 100644 index 000000000..63f2b6fdd Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_1_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_2_correct.png b/images/ui/drop_down/dropdown_when_not_to_2_correct.png new file mode 100644 index 000000000..aa57568f5 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_2_correct.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_2_correct_dark.png b/images/ui/drop_down/dropdown_when_not_to_2_correct_dark.png new file mode 100644 index 000000000..dd2b31a36 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_2_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_2_incorrect.png b/images/ui/drop_down/dropdown_when_not_to_2_incorrect.png new file mode 100644 index 000000000..620b2130b Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_2_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_2_incorrect_dark.png b/images/ui/drop_down/dropdown_when_not_to_2_incorrect_dark.png new file mode 100644 index 000000000..f88da4af2 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_2_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_3_correct.png b/images/ui/drop_down/dropdown_when_not_to_3_correct.png new file mode 100644 index 000000000..053f7a04e Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_3_correct.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_3_correct_dark.png b/images/ui/drop_down/dropdown_when_not_to_3_correct_dark.png new file mode 100644 index 000000000..049e88801 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_3_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_3_incorrect.png b/images/ui/drop_down/dropdown_when_not_to_3_incorrect.png new file mode 100644 index 000000000..a27a3c02a Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_3_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_3_incorrect_dark.png b/images/ui/drop_down/dropdown_when_not_to_3_incorrect_dark.png new file mode 100644 index 000000000..60b8d5b6b Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_3_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_4_correct.png b/images/ui/drop_down/dropdown_when_not_to_4_correct.png new file mode 100644 index 000000000..3d2d5a2e1 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_4_correct.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_4_correct_dark.png b/images/ui/drop_down/dropdown_when_not_to_4_correct_dark.png new file mode 100644 index 000000000..9a2a5a1f0 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_4_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_4_incorrect.png b/images/ui/drop_down/dropdown_when_not_to_4_incorrect.png new file mode 100644 index 000000000..383da095e Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_4_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_4_incorrect_dark.png b/images/ui/drop_down/dropdown_when_not_to_4_incorrect_dark.png new file mode 100644 index 000000000..2cc9f5b5d Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_4_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_5_correct.png b/images/ui/drop_down/dropdown_when_not_to_5_correct.png new file mode 100644 index 000000000..5af6f0014 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_5_correct.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_5_correct_dark.png b/images/ui/drop_down/dropdown_when_not_to_5_correct_dark.png new file mode 100644 index 000000000..54b53fdfe Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_5_correct_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_5_incorrect.png b/images/ui/drop_down/dropdown_when_not_to_5_incorrect.png new file mode 100644 index 000000000..bd02f6f1c Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_5_incorrect.png differ diff --git a/images/ui/drop_down/dropdown_when_not_to_5_incorrect_dark.png b/images/ui/drop_down/dropdown_when_not_to_5_incorrect_dark.png new file mode 100644 index 000000000..a263dcaed Binary files /dev/null and b/images/ui/drop_down/dropdown_when_not_to_5_incorrect_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_to_1.png b/images/ui/drop_down/dropdown_when_to_1.png new file mode 100644 index 000000000..4a49792a2 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_1.png differ diff --git a/images/ui/drop_down/dropdown_when_to_1_dark.png b/images/ui/drop_down/dropdown_when_to_1_dark.png new file mode 100644 index 000000000..e29ef3f9f Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_1_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_to_2.png b/images/ui/drop_down/dropdown_when_to_2.png new file mode 100644 index 000000000..2ca5c837d Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_2.png differ diff --git a/images/ui/drop_down/dropdown_when_to_2_dark.png b/images/ui/drop_down/dropdown_when_to_2_dark.png new file mode 100644 index 000000000..437d53dc9 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_2_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_to_3.png b/images/ui/drop_down/dropdown_when_to_3.png new file mode 100644 index 000000000..82a923975 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_3.png differ diff --git a/images/ui/drop_down/dropdown_when_to_3_dark.png b/images/ui/drop_down/dropdown_when_to_3_dark.png new file mode 100644 index 000000000..282a3e81b Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_3_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_to_4.png b/images/ui/drop_down/dropdown_when_to_4.png new file mode 100644 index 000000000..10df69be3 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_4.png differ diff --git a/images/ui/drop_down/dropdown_when_to_4_dark.png b/images/ui/drop_down/dropdown_when_to_4_dark.png new file mode 100644 index 000000000..eb143e182 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_4_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_to_5.png b/images/ui/drop_down/dropdown_when_to_5.png new file mode 100644 index 000000000..50ca5be22 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_5.png differ diff --git a/images/ui/drop_down/dropdown_when_to_5_dark.png b/images/ui/drop_down/dropdown_when_to_5_dark.png new file mode 100644 index 000000000..3602b7b5f Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_5_dark.png differ diff --git a/images/ui/drop_down/dropdown_when_to_6.png b/images/ui/drop_down/dropdown_when_to_6.png new file mode 100644 index 000000000..faeef907c Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_6.png differ diff --git a/images/ui/drop_down/dropdown_when_to_6_dark.png b/images/ui/drop_down/dropdown_when_to_6_dark.png new file mode 100644 index 000000000..dea44c6e1 Binary files /dev/null and b/images/ui/drop_down/dropdown_when_to_6_dark.png differ diff --git a/images/ui/link/inpsections_link_dark.png b/images/ui/link/inpsections_link_dark.png new file mode 100644 index 000000000..872ebe22b Binary files /dev/null and b/images/ui/link/inpsections_link_dark.png differ diff --git a/images/ui/radiobutton/old/dropdown.png b/images/ui/radiobutton/old/dropdown.png deleted file mode 100644 index e0f8d42bd..000000000 Binary files a/images/ui/radiobutton/old/dropdown.png and /dev/null differ diff --git a/topics/ui/controls/drop_down.md b/topics/ui/controls/drop_down.md index a039e1e80..b6f6c93dd 100644 --- a/topics/ui/controls/drop_down.md +++ b/topics/ui/controls/drop_down.md @@ -10,55 +10,146 @@ -A drop-down list is a type of button that appears in dialogs. It shows a list of choices on clicking it and allows selecting one option. +A drop-down list is a control that displays a list of choices on click and allows selecting one option. -![](drop_down_example.png){width=134} +![Example of a Theme drop-down with options: Light (selected in light), Dark (selected in dark), Light with Light Header, High Contrast, Darcula, and an option to get more themes](dropdown.png){width=706} ## When to use -Use a drop-down list if: +### Single option -A single option should be selected. +Use when a single option should be selected. + +![Interface language drop-down with options: English (selected), German, Dutch, Chinese (Simplified), and an option to get more languages](dropdown_when_to_1.png){width="706"} + +When multiple selections are possible, use [checkboxes](checkbox.topic). + +### Options are objects or states The possible choices are objects or states. -![](output_level.png){width=182} +![Output level drop-down with options: Debug, Info (selected), Warn, Error, and Warning](dropdown_when_to_2.png){width=706} -The number of choices is more than 4. +When options are actions, use a menu or a [split button](split_button.md). -The screen space is limited, so there is not enough room for radio buttons. +### More than four options -The default value is recommended for the most users. A drop-down is a good way to hide unpopular alternatives. +The number of options is more than four. -![](antialiasing.png){width=228} +![Regions drop-down with options: Africa, Americas, Asia except China Mainland, Europe (selected), Middle East, Oceania](dropdown_when_to_3.png){width="706"} -*"Subpixels" is the best choice for most users.* +When there are four options or fewer, use [radio buttons](radio_button.md). -If there are other drop-downs in the same window and these options are not more important than others. A list of radio buttons is more noticeable than the drop-down. +### Space is limited -If a layout combines various UI elements for one setting, use a drop-down even if there are 4 options or fewer: +The screen space is limited, so there is not enough room for [radio buttons](radio_button.md). -![](complex_layout.png){width=523} +![Settings | Appearence dialog that has a complex layout with multiple drop-downs: Theme, Zoom, and Custom font](dropdown_when_to_4.png){width="706"} -### When not to use +### Default value is the most used -If multiple selections are possible, use checkboxes. +The default value is recommended for most users. A drop-down is a good way to hide unpopular alternatives. -If there is a list of actions, use a menu or a split button: +In the example bellow a drop-down is used because Subpixels is the most popular choice. Using [radio-buttons](radio_button.md) puts all options on the same level of importance or popularity. -![](drop_down_menu_button.png){width=136} +![Antialiasing drop-down with options: Subpixels (selected), Greyscale, Not antialiasing](dropdown_when_to_5.png){width=706} -If there are 4 options or fewer, use radio buttons. +### Combined controls -![](radio_buttons.png){width=255} +If a control combines various UI elements as one setting, use a drop-down even if there are four options or fewer: -If users may need to enter a value not currently in the list, use a combo box. +![Combined control with a checkbox 'Automatically check updated for' and a drop-down with 'Early access program' selected, following by a button 'Check now'](dropdown_when_to_6.png){width=706} -![](combo_box_font_size.png){width=165} +## When not to use + +### Four or less options + +If there are four options or fewer, use [radio buttons](radio_button.md). + + + + + + +
+ Correct + 'Open project in' radio group with options: 'New window', 'Current window', and 'Ask' + + Incorrect + 'Open project in' drop-down with options: 'New window' (selected), 'Current window', and 'Ask' +
+ +### Multiple selection + +If multiple selection is possible, use [checkboxes](checkbox.topic). + + + + + + +
+ Correct + 'UI Options' checkbox group with options: 'Smooth scrolling' (checked), 'Display icons in menu items' (checked), and 'Enable mnemonics in menu' + + Incorrect + 'UI Options' drop-down with options: 'Smooth scrolling' (checked), 'Display icons in menu items' (checked), and 'Enable mnemonics in menu' +
+ +For a [single selection](drop_down.md#single-option) use a drop-down. + +### List of actions + +If there is a list of actions, use a menu or a [split button](split_button.md). + + + + + + +
+ Correct + Split-button 'Commit' and options: 'Commit and Push', 'Commit and Push Silently' (focused), and 'Create Patch' + + Incorrect + Drop-down 'Commit' with options: 'Commit' (focused), 'Commit and Push', 'Commit and Push Silently', and 'Create Patch' +
+ +For a list of [objects or states](drop_down.md#options-are-objects-or-states), use a drop-down. + +### Adding values + +If users may need to enter a value not currently in the list, use a [combo box](combo_box.md). + + + + + + +
+ Correct + A combo box for selecting font size and entering a custom value is open, displaying options ranging from 20 to 72. The current selection is 20 + + Incorrect + A dropdown menu for selecting font size is open, displaying options ranging from 20 to 72. The current selection is 20 +
+ +### On a toolbar If a drop-down appears on a toolbar, use [toolbar drop-down](toolbar_drop_down.md) instead. -![](toolbar_main.png){width=209} + + + + + +
+ Correct + Run/debug widget in the main toolbar with multiple icon buttons, and a toolbar drop-down with selected 'StandAlone' option + + Incorrect + Run/debug widget in the main toolbar with multiple icon buttons, and a drop-down with selected 'StandAlone' option +
## How to use @@ -66,155 +157,232 @@ If a drop-down appears on a toolbar, use [toolbar drop-down](toolbar_drop_down.m Follow the rules for the [input field](input_field.md#label). -![](labels.png){width=490} +![Drop-down menu labeled 'Placement' with the selected option set to 'Left'.](dropdown_how_to_1.png){width=706} ### Default value -Select the most likely or the safest value by default. +Select the most likely or the safest value by default. In the xample bellow the safest value is Ask, the behavior will not be unexpected to users: -![](imports.png){width=298 style=block} -*The safest value is "Ask", the behavior will not be unexpected to the user.* +![Drop-down menu labeled 'Insert imports on paste' with options 'All', 'Ask', and 'None'. The selected option set to 'Ask'.](dropdown_how_to_2.png){width=706} -Do **not** use an empty value as the default value. If no values are added to a drop-down yet, replace it with a button to add values. +Do not use an empty value as the default value. If no values are added to a drop-down yet, replace it with a button to add values. - - - - - - - - - +
IncorrectCorrect
+ + + +
+ Correct + Secondary button 'Add Settings Repository' which opens a dialog + + Incorrect + Drop-down 'Repository' with no selected option +
-## Menu {id="menu_1"} - -### Control - -A drop-down menu opens on clicking the drop-down button anywhere or pressing the Down key when the drop-down is -focused. -The menu opens down by default. If there is not enough space, the menu opens up. - -When the menu opens, the default option (displayed when the menu is closed) is selected. - -Move the selection in the menu by pressing Up and Down arrows when an item is hovered. On hovering the cursor over the item just move selection and do not update the value. - - - -The menu remains opened until the user selects an item, clicks outside the menu, presses the Esc key or -switches to another app. - -Allow single-click activation using mouse: click on a drop-down, the drop-down opens, select an item by hovering, close the drop-down with the new item selected by releasing the mouse button. - ### Menu items -Use sentence-style capitalization for each menu item. +#### Capitalization -![](browser.png){width=251} +Use [sentence-style capitalization](capitalization.md#sentence) for each menu item. + + + + + + +
+ Correct + Drop-down menu labeled 'Default browser' with options 'System default', 'First listed', and 'Custom path'. The selected option set to 'System default' + + Incorrect + Drop-down menu labeled 'Default browser' with options 'System Default', 'First Listed', and 'Custom Path'. The selected option set to 'System Default' +
+ +#### No repeated words in items Avoid repeating words in drop-down list items. Move repeating words to the label or after the drop-down. -![](refresh_changes.png){width=274} + + + + + +
+ Correct + Drop-down menu labeled 'Refresh every [selection] minutes' with options '10', '15', and '30'. The selected option set to '10' + + Incorrect + Drop-down menu labeled 'Refresh every' with options '10 minutes', '15 minutes', and '30 minutes'. The selected option set to '10 minutes' +
+ +#### Sorting items Sort items in one of the following orders: -* Logical order, for example, in a spatial relationship: + + + + + + + + + + + + + +
+ Drop-down menu labeled 'Placement' with options 'Left', 'Top', 'Right', and 'Bottom'. The selected option set to 'Top' + +

Logical order, for example, in a spatial relationship.

+
+ Drop-down menu labeled 'Global SQL dialect' with options '<None>', '<Generic SQL>', 'ClickHouse', 'DB2', 'Derby', 'Exasol', and other options available when scrolling. The selected option set to '<None>' + +

Alphabetical or numeric order if the options are equivalent to make it easier to find items.

+
+ Drop-down menu labeled 'Global encoding' with multiple options grouped in two groups and divided: popular options and the rest + +

Place the most common options first. If there are more than 10 options, separate the most popular options with a line.

+

Sort the remaining items in alphabetical or numeric order.

+
- ![](order_logical.png){width=172} +#### Grouping -* Alphabetical or numeric order if the options are equivalent to make it easier to find items: +Group related items using separators. Add group headers if possible. - ![](order_alphabetical.png){width=267} - -* Place the most common options first. If there are more than 10 options, separate the most popular options with a line: - - ![](order_popular.png){width=254} - -Group related options, add a separator and group header if possible: - -![](drop_down_group.png){width=216} - -If there are actions related to the drop-down, put them under the gear icon on the right: - -![](scheme.png){width=336} - -Enclose meta-options in pointy brackets and place meta-options at the beginning or at the end if they are secondary. - -![](run_tests.png){width=263} - -*<Choose per test> is a meta-options because it’s not a real runner.* - -Do **not** assign special meanings to numeric or string values, use meta-options instead. It can be unclear that either 0 or an empty string are used to disable an option. - - +
- - - - - - + +
IncorrectCorrect
+ With dividers + Drop-down menu labeled 'Version' with options ranging from 1.5 to 1.9, and a meta-option 'Same as language version' + + With a divider and group headers + Drop-down menu labeled 'Scheme' with two groups of options that have group titles and divided by a divider' +
-

In the incorrect example an empty string is used to set <Same - as language level>, which is unclear.

-

Replace the <None> option with a checkbox if it does not make the layout more complex:

+#### Actions related to a drop-down -Incorrect +If there are actions related to the drop-down, put them under the gear icon on the right: -![](none_incorrect.png){width=288} - -Correct - -![](none_correct.png){width=277} - -Preview list items with images if they are associated with well-known icons. Use formatting for a list of fonts. It will help users make a choice. - -![](preview.png){width=609} - -Use **bold** font to show default values, blue font for values changed from the default, -and grey font to add a hint. - -![](blue_text.png){width=188 style=block} -*Default and Darcula are bundled schemes, Default is blue because it’s customized.* - -![](grey_text.png){width=529} - -Submenus are not supported for the drop-down list. Use a tree view instead: - -![](hierarchy.png){width=169} - -## Sizes and placement - -### Width - -A drop-down width is fixed and does not change depending on the selected value. - -![](drop_down_width.png){width=133} - -A drop-down width should be enough to fit the longest option plus 20px, but not less than 72px. - -![](width_sizes.png){width=157} - -### Menu - -The width of a drop-down menu can either equal the drop-down control width, or be wider to fit longer items. - -![](menu_width.png){width=100} - -Choose a list length that eliminates unnecessary vertical scrolling. The minimum height of the list with scrolling is 200px. Expand the list to 600px if space is not constrained and the list does not hide meaningful information under it, e.g., the information that can be important to make a choice. - -![](menu_height.png){width=225} - -[//]: # (TODO: For sizes inside the menu list see [Menu list](menu_list.md).) - -### Placement - -Follow the rules for the [input field](#placement). +![Drop-down menu 'Color Scheme' followed by a Settings icon-button related to the drop-down](dropdown_how_to_8.png){width=706} +#### Meta-options + +Meta-option is a special choice that controls how selections behave rather than being a specific value. + +Enclose meta-options in pointy brackets and place them at the beginning of the list when they're important or popular options. In other cases, place them at the end of the list. + +![Drop-down menu labeled 'Run tests with' with options 'Platform test runner', 'Gradle test runner', and ''. The selected option set to ''](dropdown_how_to_9.png){width=706} + +Do not assign special meanings to numeric or string values, use meta-options instead. It can be unclear that either 0 or an empty string are used to disable an option. + + + + + + +
+ Correct + Drop-down menu labeled 'Version' with options ranging from 1.5 to 1.9, and a meta-option 'Same as language version' + + Incorrect + Drop-down menu labeled 'Version' with options ranging from 1.5 to 1.9, and an option '0' +
+ +#### 'None' in simple layouts + +Replace the <None> option with a checkbox if it doesn't make the layout more complex. + + + + + + +
+ Correct + Checkbox 'Show close button at' followed by two radio buttons 'Right' and 'Left' + + Incorrect + Drop-down 'Close button position' with options 'Left', 'Right', '<None>'. The selected options is '<None>' +
+ +#### Use icons and font formatting + + + + + + + + + + +
+ Drop-down 'Run on' with multiple options that have icons related to their meanings + +

Add icons to the values if they're well-known.

+
+ Drop-down 'Font' with multiple options that are showed in different fonts + +

Use font formatting for a list of fonts. It will help users make a choice.

+
+ +#### Default and changed values + + + + + + +
+ Drop-down 'Editor color scheme' with multiple options. Option 'Light (Theme default)' has 'Light' in blue color and 'Theme default' in grey color + +
    +
  • Use a blue font for values changed from the default.
    • +
  • Use a secondary text to mark an option as default.
    • +
+
+ +#### Submenus are not supported + +Submenus are not supported for the drop-down list. Use a tree view instead + +![Drop-down 'Keymap' with multiple options in a tree view showing dependencies in options](dropdown_how_to_14.png){width=706} + +## Built-in behaviour + +#### Opening the menu + +A drop-down menu opens on clicking the drop-down button anywhere or pressing the Down key when the drop-down is +focused. + +The menu opens down by default. If there is not enough space, the menu opens up. + +#### Selected value + +When the menu opens, the default option (displayed when the menu is closed) is selected. + +#### Moving the selection + +Selection in the menu is moved by pressing Up and Down keys when an item is hovered. Selection is moved as well when hovering the cursor over an item but it doesn't update the value. + +#### Closing the menu + +The menu remains opened until the user selects an item, clicks outside the menu, presses the Esc key, or switches to another app. + +#### Single-click activation + +A dropdown should work with a single mouse click: +1. Clicking to open a drop-down. +2. Hover over an item to select it. +3. Release the mouse to confirm the selection and close the dropdown. + +## How to layout + +Follow the [labeled input controls](layout.md#labeled-input-controls) guideline. diff --git a/topics/ui/controls/toolbar_drop_down.md b/topics/ui/controls/toolbar_drop_down.md index 3e0fcb641..29d00b445 100644 --- a/topics/ui/controls/toolbar_drop_down.md +++ b/topics/ui/controls/toolbar_drop_down.md @@ -118,4 +118,4 @@ The width changes depending on the selected value to save space if the value is ![](toolbar_dropdown_width.png){width=169} -For menu sizes see [Drop-down menu](drop_down.md#menu_1). +For menu sizes see [Drop-down menu](drop_down.md#menu-items).