diff --git a/images/ui/toolbar/chevron.png b/images/ui/toolbar/chevron.png deleted file mode 100644 index 7a00b707c..000000000 Binary files a/images/ui/toolbar/chevron.png and /dev/null differ diff --git a/images/ui/toolbar/hide.png b/images/ui/toolbar/hide.png deleted file mode 100644 index a61b106b1..000000000 Binary files a/images/ui/toolbar/hide.png and /dev/null differ diff --git a/images/ui/toolbar/items.png b/images/ui/toolbar/items.png deleted file mode 100644 index 9ed62b06c..000000000 Binary files a/images/ui/toolbar/items.png and /dev/null differ diff --git a/images/ui/toolbar/more_toolbars_correct.png b/images/ui/toolbar/more_toolbars_correct.png new file mode 100644 index 000000000..4656b035f Binary files /dev/null and b/images/ui/toolbar/more_toolbars_correct.png differ diff --git a/images/ui/toolbar/more_toolbars_correct_dark.png b/images/ui/toolbar/more_toolbars_correct_dark.png new file mode 100644 index 000000000..a119bb8f2 Binary files /dev/null and b/images/ui/toolbar/more_toolbars_correct_dark.png differ diff --git a/images/ui/toolbar/more_toolbars_incorrect.png b/images/ui/toolbar/more_toolbars_incorrect.png new file mode 100644 index 000000000..7bc7794c9 Binary files /dev/null and b/images/ui/toolbar/more_toolbars_incorrect.png differ diff --git a/images/ui/toolbar/more_toolbars_incorrect_dark.png b/images/ui/toolbar/more_toolbars_incorrect_dark.png new file mode 100644 index 000000000..670108bc1 Binary files /dev/null and b/images/ui/toolbar/more_toolbars_incorrect_dark.png differ diff --git a/images/ui/toolbar/placement.png b/images/ui/toolbar/placement.png deleted file mode 100644 index 1df1aaea9..000000000 Binary files a/images/ui/toolbar/placement.png and /dev/null differ diff --git a/images/ui/toolbar/placement_left.png b/images/ui/toolbar/placement_left.png deleted file mode 100644 index 6bcc179c6..000000000 Binary files a/images/ui/toolbar/placement_left.png and /dev/null differ diff --git a/images/ui/toolbar/placement_right.png b/images/ui/toolbar/placement_right.png deleted file mode 100644 index 1ec45e299..000000000 Binary files a/images/ui/toolbar/placement_right.png and /dev/null differ diff --git a/images/ui/toolbar/placement_top.png b/images/ui/toolbar/placement_top.png deleted file mode 100644 index 35dabfa18..000000000 Binary files a/images/ui/toolbar/placement_top.png and /dev/null differ diff --git a/images/ui/toolbar/reveal.png b/images/ui/toolbar/reveal.png deleted file mode 100644 index 6ef51dfbc..000000000 Binary files a/images/ui/toolbar/reveal.png and /dev/null differ diff --git a/images/ui/toolbar/right_aligned.png b/images/ui/toolbar/right_aligned.png deleted file mode 100644 index 19312ed6a..000000000 Binary files a/images/ui/toolbar/right_aligned.png and /dev/null differ diff --git a/images/ui/toolbar/sizes_under_list.png b/images/ui/toolbar/sizes_under_list.png deleted file mode 100644 index dcae302ef..000000000 Binary files a/images/ui/toolbar/sizes_under_list.png and /dev/null differ diff --git a/images/ui/toolbar/style.png b/images/ui/toolbar/style.png deleted file mode 100644 index aab847802..000000000 Binary files a/images/ui/toolbar/style.png and /dev/null differ diff --git a/images/ui/toolbar/style_correct.png b/images/ui/toolbar/style_correct.png deleted file mode 100644 index 6d3f57d4f..000000000 Binary files a/images/ui/toolbar/style_correct.png and /dev/null differ diff --git a/images/ui/toolbar/style_incorrect.png b/images/ui/toolbar/style_incorrect.png deleted file mode 100644 index ec831cd87..000000000 Binary files a/images/ui/toolbar/style_incorrect.png and /dev/null differ diff --git a/images/ui/toolbar/table_mac.png b/images/ui/toolbar/table_mac.png deleted file mode 100644 index 1cb82e875..000000000 Binary files a/images/ui/toolbar/table_mac.png and /dev/null differ diff --git a/images/ui/toolbar/table_win.png b/images/ui/toolbar/table_win.png deleted file mode 100644 index 377a2c3e5..000000000 Binary files a/images/ui/toolbar/table_win.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar.png b/images/ui/toolbar/toolbar.png new file mode 100644 index 000000000..a44c5373c Binary files /dev/null and b/images/ui/toolbar/toolbar.png differ diff --git a/images/ui/toolbar/toolbar_customize.png b/images/ui/toolbar/toolbar_customize.png deleted file mode 100644 index fa3981061..000000000 Binary files a/images/ui/toolbar/toolbar_customize.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar_dark.png b/images/ui/toolbar/toolbar_dark.png new file mode 100644 index 000000000..85ce2b2fa Binary files /dev/null and b/images/ui/toolbar/toolbar_dark.png differ diff --git a/images/ui/toolbar/toolbar_dialogs_horizontal.png b/images/ui/toolbar/toolbar_dialogs_horizontal.png new file mode 100644 index 000000000..660a6c5ec Binary files /dev/null and b/images/ui/toolbar/toolbar_dialogs_horizontal.png differ diff --git a/images/ui/toolbar/toolbar_dialogs_horizontal_dark.png b/images/ui/toolbar/toolbar_dialogs_horizontal_dark.png new file mode 100644 index 000000000..0384b6a56 Binary files /dev/null and b/images/ui/toolbar/toolbar_dialogs_horizontal_dark.png differ diff --git a/images/ui/toolbar/toolbar_example.png b/images/ui/toolbar/toolbar_example.png deleted file mode 100644 index 59c01b5d5..000000000 Binary files a/images/ui/toolbar/toolbar_example.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar_font_size.png b/images/ui/toolbar/toolbar_font_size.png deleted file mode 100644 index 60330df72..000000000 Binary files a/images/ui/toolbar/toolbar_font_size.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar_group.png b/images/ui/toolbar/toolbar_group.png deleted file mode 100644 index 43fbe8f64..000000000 Binary files a/images/ui/toolbar/toolbar_group.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window.png b/images/ui/toolbar/toolbar_horizontal_tool_window.png new file mode 100644 index 000000000..ac56eb737 Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_at_right.png b/images/ui/toolbar/toolbar_horizontal_tool_window_at_right.png new file mode 100644 index 000000000..4a3704a02 Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_at_right.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_at_right_dark.png b/images/ui/toolbar/toolbar_horizontal_tool_window_at_right_dark.png new file mode 100644 index 000000000..694480a83 Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_at_right_dark.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_dark.png b/images/ui/toolbar/toolbar_horizontal_tool_window_dark.png new file mode 100644 index 000000000..608f1fc81 Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_dark.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_debug.png b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_debug.png new file mode 100644 index 000000000..15fa23ec0 Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_debug.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_debug_dark.png b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_debug_dark.png new file mode 100644 index 000000000..ce332515c Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_debug_dark.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_git.png b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_git.png new file mode 100644 index 000000000..fd8bc6dfc Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_git.png differ diff --git a/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_git_dark.png b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_git_dark.png new file mode 100644 index 000000000..db55b03bb Binary files /dev/null and b/images/ui/toolbar/toolbar_horizontal_tool_window_hor_toolbar_git_dark.png differ diff --git a/images/ui/toolbar/toolbar_items.png b/images/ui/toolbar/toolbar_items.png new file mode 100644 index 000000000..c8a78d6b5 Binary files /dev/null and b/images/ui/toolbar/toolbar_items.png differ diff --git a/images/ui/toolbar/toolbar_items_alignment.png b/images/ui/toolbar/toolbar_items_alignment.png new file mode 100644 index 000000000..51a514ebd Binary files /dev/null and b/images/ui/toolbar/toolbar_items_alignment.png differ diff --git a/images/ui/toolbar/toolbar_items_alignment_dark.png b/images/ui/toolbar/toolbar_items_alignment_dark.png new file mode 100644 index 000000000..6445af929 Binary files /dev/null and b/images/ui/toolbar/toolbar_items_alignment_dark.png differ diff --git a/images/ui/toolbar/toolbar_items_dark.png b/images/ui/toolbar/toolbar_items_dark.png new file mode 100644 index 000000000..fe82bf54c Binary files /dev/null and b/images/ui/toolbar/toolbar_items_dark.png differ diff --git a/images/ui/toolbar/toolbar_items_grouping.png b/images/ui/toolbar/toolbar_items_grouping.png new file mode 100644 index 000000000..46419500a Binary files /dev/null and b/images/ui/toolbar/toolbar_items_grouping.png differ diff --git a/images/ui/toolbar/toolbar_items_grouping_dark.png b/images/ui/toolbar/toolbar_items_grouping_dark.png new file mode 100644 index 000000000..4db9d3e49 Binary files /dev/null and b/images/ui/toolbar/toolbar_items_grouping_dark.png differ diff --git a/images/ui/toolbar/toolbar_items_grouping_with_label.png b/images/ui/toolbar/toolbar_items_grouping_with_label.png new file mode 100644 index 000000000..e59e5f59a Binary files /dev/null and b/images/ui/toolbar/toolbar_items_grouping_with_label.png differ diff --git a/images/ui/toolbar/toolbar_items_grouping_with_label_dark.png b/images/ui/toolbar/toolbar_items_grouping_with_label_dark.png new file mode 100644 index 000000000..14ff2e048 Binary files /dev/null and b/images/ui/toolbar/toolbar_items_grouping_with_label_dark.png differ diff --git a/images/ui/toolbar/toolbar_items_order.png b/images/ui/toolbar/toolbar_items_order.png new file mode 100644 index 000000000..39f721b09 Binary files /dev/null and b/images/ui/toolbar/toolbar_items_order.png differ diff --git a/images/ui/toolbar/toolbar_items_order_dark.png b/images/ui/toolbar/toolbar_items_order_dark.png new file mode 100644 index 000000000..324addd23 Binary files /dev/null and b/images/ui/toolbar/toolbar_items_order_dark.png differ diff --git a/images/ui/toolbar/toolbar_overflow.png b/images/ui/toolbar/toolbar_overflow.png new file mode 100644 index 000000000..4e0341d7d Binary files /dev/null and b/images/ui/toolbar/toolbar_overflow.png differ diff --git a/images/ui/toolbar/toolbar_overflow_dark.png b/images/ui/toolbar/toolbar_overflow_dark.png new file mode 100644 index 000000000..3157c416d Binary files /dev/null and b/images/ui/toolbar/toolbar_overflow_dark.png differ diff --git a/images/ui/toolbar/toolbar_overflow_hover.png b/images/ui/toolbar/toolbar_overflow_hover.png new file mode 100644 index 000000000..d15d68532 Binary files /dev/null and b/images/ui/toolbar/toolbar_overflow_hover.png differ diff --git a/images/ui/toolbar/toolbar_overflow_hover_dark.png b/images/ui/toolbar/toolbar_overflow_hover_dark.png new file mode 100644 index 000000000..e402257ec Binary files /dev/null and b/images/ui/toolbar/toolbar_overflow_hover_dark.png differ diff --git a/images/ui/toolbar/toolbar_scroll_top.png b/images/ui/toolbar/toolbar_scroll_top.png new file mode 100644 index 000000000..940b7ea54 Binary files /dev/null and b/images/ui/toolbar/toolbar_scroll_top.png differ diff --git a/images/ui/toolbar/toolbar_scroll_top_dark.png b/images/ui/toolbar/toolbar_scroll_top_dark.png new file mode 100644 index 000000000..f9e8a4943 Binary files /dev/null and b/images/ui/toolbar/toolbar_scroll_top_dark.png differ diff --git a/images/ui/toolbar/toolbar_scroll_under.png b/images/ui/toolbar/toolbar_scroll_under.png new file mode 100644 index 000000000..9a8ed9956 Binary files /dev/null and b/images/ui/toolbar/toolbar_scroll_under.png differ diff --git a/images/ui/toolbar/toolbar_scroll_under_dark.png b/images/ui/toolbar/toolbar_scroll_under_dark.png new file mode 100644 index 000000000..106c81aee Binary files /dev/null and b/images/ui/toolbar/toolbar_scroll_under_dark.png differ diff --git a/images/ui/toolbar/toolbar_separators_correct.png b/images/ui/toolbar/toolbar_separators_correct.png new file mode 100644 index 000000000..0df06780e Binary files /dev/null and b/images/ui/toolbar/toolbar_separators_correct.png differ diff --git a/images/ui/toolbar/toolbar_separators_correct_dark.png b/images/ui/toolbar/toolbar_separators_correct_dark.png new file mode 100644 index 000000000..be51e72b1 Binary files /dev/null and b/images/ui/toolbar/toolbar_separators_correct_dark.png differ diff --git a/images/ui/toolbar/toolbar_separators_incorrect.png b/images/ui/toolbar/toolbar_separators_incorrect.png new file mode 100644 index 000000000..33201ad75 Binary files /dev/null and b/images/ui/toolbar/toolbar_separators_incorrect.png differ diff --git a/images/ui/toolbar/toolbar_separators_incorrect_dark.png b/images/ui/toolbar/toolbar_separators_incorrect_dark.png new file mode 100644 index 000000000..5c01669e6 Binary files /dev/null and b/images/ui/toolbar/toolbar_separators_incorrect_dark.png differ diff --git a/images/ui/toolbar/toolbar_sizes.png b/images/ui/toolbar/toolbar_sizes.png deleted file mode 100644 index 235cf6bd8..000000000 Binary files a/images/ui/toolbar/toolbar_sizes.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar_tool_window.png b/images/ui/toolbar/toolbar_tool_window.png deleted file mode 100644 index 784994032..000000000 Binary files a/images/ui/toolbar/toolbar_tool_window.png and /dev/null differ diff --git a/images/ui/toolbar/toolbar_vertical_tool_window.png b/images/ui/toolbar/toolbar_vertical_tool_window.png new file mode 100644 index 000000000..e0f8f611e Binary files /dev/null and b/images/ui/toolbar/toolbar_vertical_tool_window.png differ diff --git a/images/ui/toolbar/toolbar_vertical_tool_window_dark.png b/images/ui/toolbar/toolbar_vertical_tool_window_dark.png new file mode 100644 index 000000000..8e4bc0759 Binary files /dev/null and b/images/ui/toolbar/toolbar_vertical_tool_window_dark.png differ diff --git a/images/ui/toolbar/toolbars_1.png b/images/ui/toolbar/toolbars_1.png deleted file mode 100644 index b1dd976c5..000000000 Binary files a/images/ui/toolbar/toolbars_1.png and /dev/null differ diff --git a/images/ui/toolbar/toolbars_2.png b/images/ui/toolbar/toolbars_2.png deleted file mode 100644 index 3cede0040..000000000 Binary files a/images/ui/toolbar/toolbars_2.png and /dev/null differ diff --git a/images/ui/toolbar/width_correct.png b/images/ui/toolbar/width_correct.png deleted file mode 100644 index 2af6e3a15..000000000 Binary files a/images/ui/toolbar/width_correct.png and /dev/null differ diff --git a/images/ui/toolbar/width_incorrect.png b/images/ui/toolbar/width_incorrect.png deleted file mode 100644 index b851598e9..000000000 Binary files a/images/ui/toolbar/width_incorrect.png and /dev/null differ diff --git a/topics/ui/controls/toolbar.md b/topics/ui/controls/toolbar.md index 92534aa3f..0bb74fde7 100644 --- a/topics/ui/controls/toolbar.md +++ b/topics/ui/controls/toolbar.md @@ -11,154 +11,188 @@ -A toolbar provides quick access to frequently used actions and filters. It appears in dialogs, pop-ups, tool windows, lists, trees, and tables. +A toolbar provides quick access to frequently used actions and settings. It appears in dialogs, popups, tool windows, lists, trees, and tables. -![](toolbar_example.png){width=428} +![A toolbar with 6 icons and a drop-down list](toolbar.png){width=706} ## Toolbar items +![A toolbar with all kinds of UI controls that can appear on it: an action icon button, a drop-down icon button, a toggle icon button, a split icon button, a search field, a button, a label, a toolbar drop-down list and an overflow chevron](toolbar_items.png){width=706} + The following controls can appear on a toolbar: - * [Icon button](icon_button.md): action, toggle, or drop-down - * [Split icon button](split_icon_button.md) - * [Toolbar drop-down list](toolbar_drop_down.md) - * [Search field](search_field.md) - * [Button](button.topic) - * Separator - * Label - * Chevron -![](items.png){width=704} - ## What items to add on toolbar -Put only the most frequently used commands on the toolbar. Rely on usage statistics if it’s available. +### Frequently used items +Add actions and settings that are frequently used: +* If usage statistics are available, frequent use is more than 5% of this feature's users. +* If usage statistics are not available: + * Add items that are needed for the most common use cases of this feature. + * If possible, add usage statistics logging for toolbar items that lack it. Check statistics after 3–4 weeks of use. If the items are used by less than 5% of the feature's users, consider removing them from the toolbar. -If an action is new, and it seems useful, add it to the corresponding toolbar. -Remove it after several releases if it’s not popular, which means it’s used by less than ~5% of users who use this toolbar. -Do **not** put unpopular or well-known commands, like Copy and Paste on the toolbar. Use the main menu or the context menu for such commands. +Exception: some actions can be used most frequently because they are widely known, like the Copy and Paste actions. Place such actions on the toolbar only if you want to promote them. Otherwise, place them only in a context menu or the main menu. -It’s **not** recommended to add more items than the default toolbar length. Otherwise, the items will be hidden and it will be hard to discover them. +### New items +When adding a new action or setting for a UI area that already has a toolbar: if the new item is expected to be used frequently, add it to increase its discoverability. -![](width_correct.png){width=283} -Left align items on a horizontal toolbar and top align on a vertical toolbar. +## How to use -Group related toolbar icon buttons and separate groups with lines. If there are several unrelated icons, do **not** add separators after each icon. +### Location -![](toolbar_group.png){width=242} +Toolbars can be horizontal or vertical. Which type to use, depends on what control the toolbar is used for. -Label a group of icons if it helps to make the icons clearer and if it’s needed to promote the icons. The icons group becomes more visible with the label. +#### Lists, trees, tables -Arrange items inside groups by the frequency of use, from left to right from top to bottom. Rely on statistics. +Use horizontal toolbars for lists, trees, and tables that appear in dialogs and popups. Place the toolbar at the top of the control. -It is recommended to arrange groups in the following order unless it contradicts the usage statistics. If it does, arrange groups by the frequency of use. +![A horizontal toolbar with 5 icons above a tree](toolbar_dialogs_horizontal.png){width=706} -![](toolbar_tool_window.png){width=260} +#### Vertical tool windows -The less frequently used commands can be right aligned. +Use horizontal toolbars in tool windows that are vertical by default. -![](right_aligned.png){width=491} +![The Commit tool window with a horizontal toolbar above a tree with changes](toolbar_vertical_tool_window.png){width=706} -Do **not** put two toolbars next to each other. One toolbar should be enough for the most popular actions. +#### Horizontal tool windows - +Use vertical toolbars for tool windows that are horizontal by default. Place the toolbar on the left in a tool window. + +![The Problems tool window with a vertical toolbar on the left of the tree with file errors](toolbar_horizontal_tool_window.png){width=706} + +
+ +If a horizontal tool window has several sections, place a toolbar on the right in sections after the first one if these conditions are true: +* The sections are a master-detail layout, with a list or tree on the left and a selected item's details on the right. +* The toolbar contains actions that are used occasionally, like the Soft-Wrap setting in the Console section of the Build tool window. + +This way the toolbar would not break the connection between the master and the detail sections. + + +![The Build tool window with the vertical toolbar on the right of the Console section](toolbar_horizontal_tool_window_at_right.png){width=706} + +
+ +A horizontal toolbar can be used in a horizontal tool window in the two cases: +* The toolbar contains items used for managing processes, like Step In and Step Out in the Debug tool window, or Run and Stop in the Run tool window. A horizontal toolbar makes the actions more noticeable and easy to reach. +* The toolbar contains items that need horizontal space, like a search field and drop-down lists in the Git tool window. + +![The Debug tool window with a horizontal toolbar containing the Run, Stop, Resume, Pause, Step In, Step Out and other actions](toolbar_horizontal_tool_window_hor_toolbar_debug.png){width=706} + + +![The Git tool window with a horizontal toolbar containing a search field and four drop-down lists with filters for the list of commits](toolbar_horizontal_tool_window_hor_toolbar_git.png){width=706} + + +### Items alignment +On a vertical toolbar, always top-align items. + +On a horizontal toolbar: +* Left-align items by default. +* Right-align the less frequently used items. + +![The Keymap settings with a tree and a toolbar above it: the Expand, Collapse and Edit icon buttons are on the left side of the toolbar, and a search field with another icon button are on the right side](toolbar_items_alignment.png){width=706} + + +### Items grouping +Group related toolbar items and separate groups with lines. + +![A toolbar with three icon groups: Build, Run, Debug and Profile are the Run actions group; Git Update, Push, Diff and two more are the Git actions group; the Project Structure and Settings are the Settings group](toolbar_items_grouping.png){width=706} + +
+ +If there are several unrelated icons, do not add separators after each icon. Separators could be entirely omitted if there are 5 and fewer icons on a toolbar. + +
- - - - - - + +
IncorrectCorrect
+ Correct + A toolbar with five icons without separators + Incorrect + A toolbar with five icons and three separators
-Make every toolbar action available from the main menu or the context menu. -Toolbars are customizable and can be hidden, so commands should be available from other places as well. +#### Label -If the default component size changes and there is not enough space for items on a toolbar, hide them under the chevron. +Label a group of icons if it helps to make the icons clearer and if it’s needed to promote the icons. The icons group becomes more visible with the label. -![](chevron.png){width=30} +![A horizontal toolbar with three icon groups, with a label for one of the groups](toolbar_items_grouping_with_label.png){width=706} -## Visibility and customization -Provide the ability to hide the toolbar in the main window via the toolbar context menu. +### Items order +Arrange separate items or groups in the following order by default. -![](hide.png){width=428} +If usage statistics are available, and popular items appear not at the top or left of a toolbar, consider arranging by the frequency of use. -Provide commands for invoking the toolbar. Use the main menu for the main window toolbars. Use the pane view settings for toolbars in tool windows. +![A vertical toolbar with icon categories ordered from top to bottom: actions, view options, an action to open a preview panel in a tool window, settings](toolbar_items_order.png){width=706} -![](reveal.png){width=597} -Provide the ability to customize toolbars in the main window. -To do this, add the toolbar to the list on the Settings | Appearance & Behavior | Menus and Toolbars page and open -it using the Customize Toolbar... action from the toolbar context menu. +### Toolbar overflow +A toolbar's width is usually limited by the element it belongs to. If there is not enough space for items on the toolbar, they are hidden under a chevron. Hovering the chevron shows the hidden items. -![](toolbar_customize.png){width=404} +It is recommended to keep the number of toolbar items to what would be visible by default. Otherwise, the items will be hidden and it will be hard to discover them. -## Sizes and placement + + + + + +
+ A horizontal toolbar above a tree with seven icons and an overflow chevron at the right + + The same UI as in the previous image but with the overflow chevron hovered: the full toolbar with nine icons becomes visible +
-The toolbar can be vertical or horizontal. -![](placement.png){width=498} +#### Avoid two toolbars +Do not counter a toolbar overflow by adding more toolbars. If there are too many items on a toolbar: +* Group items under drop-down icon buttons +* Remove unpopular items by following the guidelines in [](#what-items-to-add-on-toolbar) -By default, place the toolbar at the top of the area. + + + + + +
+ Correct + A vertical toolbar with seven icons + + Incorrect + Two vertical toolbars stacked together with 19 icons in total +
-![](placement_top.png){width=220} -### Exceptions +### Toolbar border -Place the toolbar on the left in horizontal tool windows if horizontal space is not limited. -A horizontal toolbar will be too wide and will occupy lots of space: +For scrollable content in tool windows, do not show a toolbar border if the content is at the top scroll position. Show the border once the content is scrolled under the toolbar. -![](placement_left.png){width=220} + + + + + +
+ A tree with a toolbar above it. The tree is at the top scroll position, the toolbar border is not visible. + + A tree with a toolbar above it. The tree is scrolled under the toolbar, the toolbar border is visible. +
-Place the toolbar on the right if it’s not the first toolbar in the pane, and it’s rarely used. -![](placement_right.png){width=386} +In places other than tool windows, it is fine to always show the border. -Place the toolbar at the bottom on macOS, and on the right on Windows and Linux in [tables](table.md). -![](table_mac.png){width=432 style=block} -*macOS* +## Customization -![](table_win.png){width=431 style=block} -*Windows* +Provide the ability to customize toolbars in the main window. To do this, add the toolbar to the list on the Settings | Appearance & Behavior | Menus and Toolbars page. -The toolbar width is limited by the width of the element it belongs to. For example, by the width of the tool window or the list part in a master-detail layout. - -| Incorrect | Correct | -|-----------------------------------------------------|-----------------------------------------------------| -| ![](width_incorrect.png){width="283"} | ![](width_correct.png){width=283} | - -Toolbar sizes are the same for all themes: - -![](toolbar_sizes.png){width=539} - -![](sizes_under_list.png){width=418} - -The toolbar items sizes change together with the application font size proportionally. - -![](toolbar_font_size.png){width=604} - -## Style - -![](style.png){width=477} - -Separate the toolbar from the content with a line from all four sides if it appears in a tool window or a table: - -| Incorrect | Correct | -|-----------------------------------------------------|-----------------------------------------------------| -| ![](style_incorrect.png){width="220"} | ![](style_correct.png){width="220"} | - -Do **not** separate a toolbar with lines if it appears above the list: - -![](toolbar_customize.png){width=404}