diff --git a/ijs.tree b/ijs.tree index 43e9b6436e5..5ec54137ab9 100644 --- a/ijs.tree +++ b/ijs.tree @@ -515,7 +515,8 @@ - + + 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 00000000000..cc828fa97e4 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 00000000000..47f4f5016e1 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 00000000000..70cdd442e35 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 00000000000..dc8b4875aff 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 00000000000..41a5e9b7517 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 00000000000..e00b0daa1d3 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 00000000000..5db5b26d999 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 00000000000..a165cdcc1be 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 00000000000..d71ba18919e 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 00000000000..009a82e1eff 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 00000000000..d10c91fe4c4 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 00000000000..2294926ff4b 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 00000000000..fa5dc043e66 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 00000000000..caeff058b4e 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 00000000000..f08e10bd5a4 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 00000000000..7d8ef7c9807 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 00000000000..5fe35821816 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 00000000000..76b55d6a852 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 00000000000..8bd077af8ad 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 00000000000..06d8689e85a 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 00000000000..172dc226500 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 00000000000..8589da3b193 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 00000000000..df8118d594a 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 00000000000..039dbb0cd1b 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 00000000000..82f858d66cf 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 00000000000..a133ab24bbb 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 00000000000..c2db8c3d58a 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 00000000000..e219a3bc216 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 00000000000..7645590e8e5 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 00000000000..5c975907516 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 00000000000..f2c97c5cbe8 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 00000000000..42c9641079b 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 00000000000..bc07564e13f 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 00000000000..e24d18e2069 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 00000000000..c0df7ed8b24 --- /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 + +