diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_adaptive.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_adaptive.png new file mode 100644 index 000000000..cc828fa97 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_adaptive.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_adaptive_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_adaptive_dark.png new file mode 100644 index 000000000..47f4f5016 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_adaptive_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor.png new file mode 100644 index 000000000..70cdd442e Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor_dark.png new file mode 100644 index 000000000..dc8b4875a Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct.png new file mode 100644 index 000000000..41a5e9b75 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct_dark.png new file mode 100644 index 000000000..e00b0daa1 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect.png new file mode 100644 index 000000000..5db5b26d9 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect_dark.png new file mode 100644 index 000000000..a165cdcc1 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable.png new file mode 100644 index 000000000..d71ba1891 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable_dark.png new file mode 100644 index 000000000..009a82e1e Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct.png new file mode 100644 index 000000000..d10c91fe4 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct_dark.png new file mode 100644 index 000000000..2294926ff Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_incorrect.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_incorrect.png new file mode 100644 index 000000000..fa5dc043e Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_incorrect.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_incorrect_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_incorrect_dark.png new file mode 100644 index 000000000..caeff058b Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_incorrect_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable.png new file mode 100644 index 000000000..f08e10bd5 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable_dark.png new file mode 100644 index 000000000..7d8ef7c98 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct.png new file mode 100644 index 000000000..5fe358218 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct_dark.png new file mode 100644 index 000000000..76b55d6a8 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_acceptable.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_acceptable.png new file mode 100644 index 000000000..8bd077af8 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_acceptable.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_acceptable_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_acceptable_dark.png new file mode 100644 index 000000000..06d8689e8 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_acceptable_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_correct.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_correct.png new file mode 100644 index 000000000..172dc2265 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_correct.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_correct_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_correct_dark.png new file mode 100644 index 000000000..8589da3b1 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_3_correct_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small.png new file mode 100644 index 000000000..df8118d59 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small_dark.png new file mode 100644 index 000000000..039dbb0cd Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large.png new file mode 100644 index 000000000..82f858d66 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large_dark.png new file mode 100644 index 000000000..a133ab24b Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium.png new file mode 100644 index 000000000..c2db8c3d5 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium_dark.png new file mode 100644 index 000000000..e219a3bc2 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_small.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_small.png new file mode 100644 index 000000000..7645590e8 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_small.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_small_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_small_dark.png new file mode 100644 index 000000000..5c9759075 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_small_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_horizontal.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_horizontal.png new file mode 100644 index 000000000..f2c97c5cb Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_horizontal.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_horizontal_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_horizontal_dark.png new file mode 100644 index 000000000..42c964107 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_horizontal_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_vertical.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_vertical.png new file mode 100644 index 000000000..bc07564e1 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_vertical.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_vertical_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_vertical_dark.png new file mode 100644 index 000000000..e24d18e20 Binary files /dev/null and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_tool_window_vertical_dark.png differ diff --git a/topics/Dialog-and-popup-sizes.md b/topics/Dialog-and-popup-sizes.md new file mode 100644 index 000000000..d69bee6b2 --- /dev/null +++ b/topics/Dialog-and-popup-sizes.md @@ -0,0 +1,278 @@ + + +# Dialog and Popup Sizes + +Guidelines on choosing the correct size when creating a dialog or a popup + +Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products. + +## Default sizes + +### Dialog + +There are four recommended window sizes for dialogs: **extra small**, **small**, **medium**, and **large**. Select the size depending on the amount of content to keep the important information visible. + +When setting the default size for your dialog, it should be impossible to make it smaller. + +#### Extra small + +Size: 350×250 px. + +Best for: several components that are stacked vertically. + +For example, the Rename File dialog has several input fields and checkboxes in one column: + +![The Rename dialog with two input fields, two checkboxes, and actions in the dialog footer. The components are stacked vertically in one column](dialog_popup_sizes_extra_small.png){width="706"} + +#### Small + +Size: 500×350 px + +Best for: +* Two-column layout with a tree on one column and several components that are stacked vertically in the second column. +* Multiple components with short labels that are divided into two columns. +* A full-width table with two or three columns. +* A full-width code editor or snippet. + +For example, the Evaluate Expressions dialog has two code snippets that are stacked vertically: + +![The Evaluate Expressions dialog that has two code snippets stacked vertically](dialog_popup_sizes_small.png){width="706"} + +#### Medium + +Size: 750×525 px + +Best for: +* A full-width table with four or more columns. +* Two-column layout with an image or a video in any of the columns. In this case, the image or the video takes the most space. +* Three-column layout with a code editor or snippet in any of the columns. +* Two code editors or snippets in a row. + +For example, the Image Viewer dialog has a two-column layout with image or video in the first column and the list of input fields with actions in the second column: + +![The Recent Files popup that has a two-column layout. There are quick links in the first column and the list of recent files with long names in the second column](dialog_popup_sizes_medium.png){width="706"} + +#### Large + +Size: 1000×700 px + +Best for: +* Two-column layout featuring components with long names in one of the columns. +* Three-column layout featuring a table in one of the columns. +* Four-or-more-column layout possibly featuring a code editor or snippet in any of the columns. + +For example, Code Style settings for Java in the Settings dialog. The dialog has three columns with a table and a code snippet in different columns: + +![The Code Style settings in the Settings dialog. The dialog has three columns with a table and a code snippet in different columns](dialog_popup_sizes_large.png){width="706"} + +### Popup + +Popups should have the same default sizes as dialogs, but unlike dialogs, they can have adaptive height. If the popup displays different amounts of content depending on the situation, adapt the popup size to the content on opening. + +For example, the height of the Git Brunches popup adapts to the amount of the content inside: + +![Two Git Branches popups adapting to the height of their content. The popup on the left is shorter because it has fewer branches, while the popup on the right is longer because it has more branches](dialog_popup_sizes_adaptive.png){width="706"} + +When a user changes an adaptive popup’s size, the size is saved and the adaptivity becomes inapplicable. + +### Tool windows + +* Vertical tool windows should have the default size set to 250×500 px. +* Horizontal tool windows should have the default size set to 500×250 px. + +The default sizes should be set for all the states of the View Mode. + + + + + + +
+ Vertical Project tool window: + + + Horizontal Build tool window: + +
+ +### Editor tabs + +Place your content into a tab in the editor when there are three or more columns in a row with important information that needs to be shown. + +For example, the Merge functionality features a list of changes with actions in a tool window and two code editors with line numbers: + +![The Merge functionality with a list of changes with actions in a tool window on the left and two code editors with line numbers in the editor tab on the right](dialog_popup_sizes_editor.png){width="706"} + +## Minimum sizes for components + +When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to important content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window. + +### How to set the size correctly + +1. Select how the content is displayed: + + + + + + + + + + + + + + + + + + +
+ Table cell + +

Width: min 65 px

+

Height for the whole table: min 120 px

+

Follow guidelines for table width

+
+ Tree + + Width: min 250 px +
+ Text area + +

Width: min 270 px, max 600 px

+

Height: min 55 px

+

For size and placement follow the text area guidelines

+
+ Diagram + + A container with horizontal and vertical insets with 100 px +
+ +2. What type of content is used: + + + + + + + + + + + + + + + + + + + + + + +
+ Class/test/file name + +

Width: min 250 px

+
+ URL/Path/FQN for class + +

Width: min 350 px

+
+ Class/test/file name + URL/Path/FQN for class + +

Width: min 400 px

+
+ Code snippet or editor + +

Width: min 400 px

+

Height (when multiple lines): min 120 px

+
+ Standalone text + +

Width: min 300 px

+

Height (when multiple lines): min 120 px

+
+ +3. Select the biggest size out of the two to add the minimal size to a component + +#### Example 1 + +The Rename Inheritors dialog has a table with FQNs. Add 350 px as the minimum width for a table column. This will make the dialog wider than the recommended 500 px but will show more of FQNs. + + + + + + + + +
+ Correct + The Rename Inheritors dialog has a minimum width set for each table column +
+ Acceptable + The Rename Inheritors dialog has the Medium size as default +
+ +#### Example 2 + +Settings dialog has the default size 1000 px. In the Code Style settings for Java set 400 px as the minimal width of the code editor. This will make the dialog wider but will show more code + + + + + + + + +
+ Correct + +
+ Acceptable + +
+ +#### Example 3 + +Add horizontal and vertical 100 px insets inside the Diagram popup to make it adaptable to the different amounts of content inside + + + + + + + + +
+ Correct + +
+ Acceptable + +
+ +## Empty state + +Some components, for example, tables, can have an [empty state](empty_state.md) when there is no content. In this case, the minimum size depends on which state takes more space: the component with content or with an empty state. + +In most cases, an empty state takes less space than the minimum size of a component. In other cases, the minimum size of the component should be determined by the size of the empty state to reduce unexpected resizing. + + + + + + + + +
+ Correct + +
+ Incorrect + +