diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes.png index 539a4c91e..1b4a1fb30 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file.png index 9b095da12..98f9afc25 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_dark.png index 1a00675a3..b0b42e79d 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn.png index 630d142af..3480dc080 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn_dark.png index 35db5c404..b24a16e06 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_class_test_file_url_path_fqn_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet.png index 374411a4b..4d4b45795 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet_dark.png index f5e18164b..5665ebffa 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_code_snippet_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_dark.png index 4dc4c706e..706544c36 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_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 index b8ce56c26..8dab46dc0 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable.png 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 index afc29fc21..1462c92a7 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_acceptable_dark.png 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 index 5d5fa5ea9..c1c687fb0 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct.png 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 index 0006bdff3..24055d46b 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_2_correct_dark.png 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_large.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large.png index 931c0e60f..619ce6ac9 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large.png 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 index a133ab24b..ee214b05a 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large_dark.png 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 index 4eebb39b3..a0b1325fe 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium.png 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 index 9db8a392b..cdd8b475d 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_medium_dark.png 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_popup_adaptive_height.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height.png index 132eb3895..9eb3d975d 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height_dark.png index 62104e6b2..6c38df97c 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_adaptive_height_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m.png index eafdd7cc9..d86449253 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m_dark.png index 015516a5e..6bffe4483 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_popup_m_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text.png index 6ce4f63b0..08d83476b 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text_dark.png index 749fb3851..b2641ac15 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_standalone_text_dark.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn.png index fbbb2c20b..12ccadeb7 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn.png differ diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn_dark.png index 1cd3a823f..8d02759cd 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn_dark.png and b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_url_path_fqn_dark.png differ diff --git a/topics/Window-sizes.md b/topics/Window-sizes.md index b0c0b2c58..720acdd9b 100644 --- a/topics/Window-sizes.md +++ b/topics/Window-sizes.md @@ -6,19 +6,19 @@ Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products. -For simple cases use default sizes for [dialogs](Window-sizes.md#default-sizes) and [popups](Window-sizes.md#popup). When default sizes don't work well, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components). +For simple cases use [default sizes](Window-sizes.md#default-sizes). When they don't work well, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components). ## 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. +There are four recommended window sizes for dialogs: **small**, **medium**, **large**, and **extra large**. Select the size depending on the amount of content to keep the important information visible. ![A preview of recommended window sizes for dialogs: extra small, small, medium, and large](dialog_popup_sizes.png){width="706"} -When setting the default size for your dialog, it should be impossible to make it smaller. +A dialog can't be made smaller than the default size. -#### Extra small +#### Small Size: 350×250 px. @@ -26,7 +26,7 @@ Best for: several components that are stacked vertically. ![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 +#### Medium Size: 500×350 px @@ -39,207 +39,216 @@ For example, the Evaluate Expressions dialog has an input fie ![The Evaluate Expressions dialog that has an input field with long text and a tree with code stacked vertically](dialog_popup_sizes_small.png){width="706"} -#### Medium +#### Large 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. +* A master-detail layout. * Two-column layout with a code snippet or an input field with long text in any of the columns. * Two code snippets or input fields with long texts in a row. +* 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. -For example, the Run/Debug Configuration dialog has a two-column layout with a tree in the first column and the list of controls with long texts in the second column: +For example, the Run/Debug Configuration dialog has a master-detail layout with a tree in the first column and the list of controls with long texts in the second column: ![The Run/Debug Configuration dialog that has a two-column layout. There is a navigation in the first column and the list of settings in the second column](dialog_popup_sizes_medium.png){width="706"} -#### Large +#### Extra Large Size: 1000×700 px Best for: -* Two-column layout with input fields with long texts, code snippets. +* Two-column layout with code snippets or input fields with long texts in both columns. * Three-or-more-column layout regardless of the content. For example, Code Style settings for Java in the Settings dialog. The dialog has three columns with a tree, a table, and a code snippet in different columns: ![The Code Style settings in the Settings dialog. The dialog has three columns with a tree, a table, and a code snippet in different columns](dialog_popup_sizes_large.png){width="706"} +#### Maximum width and height {id="maximum-width-and-height_dialog"} + +Set the dialog's maximum dimensions to match screen size to prevent resizing beyond screen bounds. + ### Popup -#### Minimum width +Popups should have the same default width as dialogs. In addition, there is an **extra small** size for popups – 200 px wide, when the content is narrow. + +A popup can't be made smaller than the default size. + +#### Action Popups + +If a popup has a vertical list of actions or options, set a default width to either **extra small** (200 px) or **small** (350 px). + +The width and height are adaptable based on the content if it exceeds the set dimensions. -Popups should have the same default width as dialogs. In addition, there is a smaller size for popups – 200 px wide, when the content is narrow.
-

Insert

+

Extra small

Insert popup 200 px wide 		-

Quick Fixes

+

Small

Quick Fixes popup 350 px wide
+ +#### Content-rich Popups + +If a popup has several sections and features long texts, set a default width to **medium** (500 px) or **large** (750 px). + +Height is adaptable based on the content. If a popup has a scrollable content, set the default height respectively: **medium** (350 px) or **large** (525 px). +
-

Documentation

- Documentation popup 500 px wide +

Medium

+ Documentation popup 500 px wide
-

Search Everywhere

+

Large

Search Everywhere popup 750 px wide
-#### Minimum height - -Unlike dialogs, popups have an adaptive height. Adapt the height of a popup to the amount of content inside. - -For example, the height of the Documentation popup is different depending on what is focused in the editor: - -The Documentation popup adapts its height based on the content inside +When the default width doesn't work, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components). #### Maximum width and height -The maximum width and height shouldn't exceed 80% of a screen size. Use a scrollbar if a popup's content doesn't fit within the set dimensions. +The maximum width and height shouldn't exceed 80% of a screen size. Use a [scrollbar](scrollbar.md) if a popup's content doesn't fit within the set dimensions. ### Tool windows Default sizes: -* Vertical tool windows should take 20% of the application width but not less than 200×500 px. -* Horizontal tool windows should take 20% of the application height but not less than 500×200 px. +* Vertical tool windows should take minimum 20% of the application width but not less than 200×500 px. +* Horizontal tool windows should take minimum 20% of the application height but not less than 500×200 px. The default sizes should be set for all the states of the View Mode. - - - - - -
- Vertical Project tool window: - Vertical Project tool window set in the default size for tool windows - - Horizontal Build tool window: - Horizontal Build window set in the default size for tool windows -
+A tool window can't be made smaller than the default size. + +For example, the vertical Project tool window and the horizontal Build tool window with minimum sizes in Window mode: + +![Vertical Project and horizontal Build tool windows with the default sizes in Window mode](dialog_popup_sizes_tool_window.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. +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 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: +1. Select how the content is displayed. +2. What type of content is used. +3. Select the biggest size out of the two to add the minimum size to a component. - - - - - - - - - - - - - - - - - -
- Example of a table with 3 cells - -

Table cell

-

Width: min 65 px

-

Height for the whole table: min 120 px

-

Follow guidelines for table sizes

-
- Example of a tree - -

Tree

-

Width: min 250 px

-
- Example of a text area - -

Text area

-

Width: min 270 px, max 600 px

-

Height: min 55 px

-

Follow guidelines for text area sizes

-
- Example of a diagram - -

Diagram

-

A container with horizontal and vertical insets with 100 px

-
+#### How the content is displayed -2. What type of content is used: + + + + + + + + + + + + + + + + + +
+ Example of a table with 3 cells + +

Table cell

+

Width: min 65 px

+

Height for the whole table: min 120 px

+

Follow guidelines for table sizes

+
+ Example of a tree + +

Tree

+

Width: min 250 px

+
+ Example of a text area + +

Text area

+

Width: min 270 px, max 600 px

+

Height: min 55 px

+

Follow guidelines for text area sizes

+
+ Example of a diagram + +

Diagram

+

A container with horizontal and vertical insets with 100 px

+
- - - - - - - - - - - - - - - - - - - - - -
- Examples of a class, test, and file name - -

Class/test/file name

-

Width: min 250 px

-
- Examples of a URL, path, and an FQN for class - -

URL/Path/FQN for class

-

Width: min 350 px

-
- Examples of a class, test, or file name together with a URL, path or an FQN for class - -

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

-

Width: min 400 px

-
- Example of a code snippet - -

Code snippet or editor

-

Width: min 400 px

-

Height (when multiple lines): min 120 px

-
- Example of a paragraph - -

Paragraph or long text

-

Width: min 300 px

-

Height (when multiple lines): min 120 px

-
+#### Types of content -3. Select the biggest size out of the two to add the minimum size to a component + + + + + + + + + + + + + + + + + + + + + +
+ Examples of a class, test, and file name + +

Class/test/file name

+

Width: min 250 px

+
+ Examples of a URL, path, and an FQN for class + +

URL/Path/FQN for class

+

Width: min 350 px

+
+ Examples of a class, test, or file name together with a URL, path or an FQN for class + +

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

+

Width: min 400 px

+
+ Example of a code snippet + +

Code snippet or editor

+

Width: min 400 px

+

Height (when multiple lines): min 120 px

+
+ Example of a paragraph + +

Paragraph or long text

+

Width: min 300 px

+

Height (when multiple lines): min 120 px

+
#### 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. +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 default Small size (500 px) but will show more of FQNs. @@ -277,20 +286,20 @@ The Rename Inheritors dialog has a table with FQNs. Add 350&n #### Example 3 -Add horizontal and vertical 100 px insets inside the Diagram popup to make it adaptable to the different amounts of content inside. +Instead of setting a default size for a diagram popup, for example, the Small size, add horizontal and vertical 100 px insets inside the Diagram popup, and make the width and height adaptive to its content. This will help small diagrams be more noticeable and make a diagram popup of any size easier to read.
- + - +
+ Correct Diagram popup has 100 px insets from its borders to its content -
+ Acceptable Diagram popup is set to the default small size -
@@ -302,15 +311,15 @@ For example, the size of the Custom Plugin Repository dialog - + - +
+ Correct The table in the Custom Plugin Repository dialog has the same sizes in both empty and filled states -
+ Incorrect The table in the Custom Plugin Repository dialog has different sizes in the empty and the filled states -