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 index 70cdd442e..d6f556fe6 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor.png 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 index dc8b4875a..4d09b6359 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_editor_dark.png 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 index 41a5e9b75..78f828440 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct.png 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 index e00b0daa1..a4ed91819 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_correct_dark.png 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 index 5db5b26d9..2669860a5 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect.png 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 index 823d1238a..2530a4d47 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect_dark.png 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_large_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_large_dark.png index 441a3ceff..a133ab24b 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/topics/Window-sizes.md b/topics/Window-sizes.md index 628f6dda2..b0c0b2c58 100644 --- a/topics/Window-sizes.md +++ b/topics/Window-sizes.md @@ -14,7 +14,7 @@ For simple cases use default sizes for [dialogs](Window-sizes.md#default-sizes) 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. -![A preview of recommended window sizes for dialogs](dialog_popup_sizes.png){width="706"} +![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. @@ -33,11 +33,11 @@ Size: 500×350 px Best for: * 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. +* A full-width code snippet or input with long text. -For example, the Evaluate Expressions dialog has two code snippets that are stacked vertically: +For example, the Evaluate Expressions dialog has an input field with long text and a tree with code stacked vertically: -![The Evaluate Expressions dialog that has two code snippets stacked vertically](dialog_popup_sizes_small.png){width="706"} +![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 @@ -47,23 +47,23 @@ 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. * Two-column layout with a code snippet or an input field with long text in any of the columns. -* Two code editors or snippets in a row. +* Two code snippets or input fields with long texts in a row. 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: -![The Run/Debug Configuration dialog that has a two-column layout. There is a nvigation in the first column and the list of settings in the second column](dialog_popup_sizes_medium.png){width="706"} +![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 Size: 1000×700 px Best for: -* Two-column layout with long names, code editor, code snippet. +* Two-column layout with input fields with long texts, code snippets. * 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 table and a code snippet in different columns: +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 table and a code snippet in different columns](dialog_popup_sizes_large.png){width="706"} +![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"} ### Popup @@ -75,11 +75,11 @@ Popups should have the same default width as dialogs. In addition, there is a sm

Insert

- + Insert popup 200 px wide

Quick Fixes

- + Quick Fixes popup 350 px wide @@ -87,13 +87,13 @@ Popups should have the same default width as dialogs. In addition, there is a sm

Documentation

- + Documentation popup 500 px wide

Search Everywhere

- + Search Everywhere popup 750 px wide @@ -123,23 +123,15 @@ 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 -### Editor tabs - -Place your content into a tab in the editor when there are three or more columns in a row with code 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. @@ -151,18 +143,18 @@ When the default sizes are either too big or too small for a window, or the wind
- + 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 width

+

Follow guidelines for table sizes
- + Example of a tree

Tree

@@ -171,18 +163,18 @@ When the default sizes are either too big or too small for a window, or the wind
- + Example of a text area

Text area

Width: min 270 px, max 600 px

Height: min 55 px

-

For size and placement follow the text area guidelines

+

Follow guidelines for text area sizes
- + Example of a diagram

Diagram

@@ -196,7 +188,7 @@ When the default sizes are either too big or too small for a window, or the wind @@ -272,13 +264,13 @@ The Rename Inheritors dialog has a table with FQNs. Add 350&n
- + Examples of a class, test, and file name

Class/test/file name

@@ -205,7 +197,7 @@ When the default sizes are either too big or too small for a window, or the wind
- + Examples of a URL, path, and an FQN for class

URL/Path/FQN for class

@@ -214,7 +206,7 @@ When the default sizes are either too big or too small for a window, or the wind
- + 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

@@ -223,7 +215,7 @@ When the default sizes are either too big or too small for a window, or the wind
- + Example of a code snippet

Code snippet or editor

@@ -233,10 +225,10 @@ When the default sizes are either too big or too small for a window, or the wind
- + Example of a paragraph -

Standalone text

+

Paragraph or long text

Width: min 300 px

Height (when multiple lines): min 120 px

Correct - + Code snippet in the Code Style settings for Java is 400 px making the dialog wider
Acceptable - + Settings dialog is 1000 px wide
@@ -291,13 +283,13 @@ Add horizontal and vertical 100 px insets inside the Diagram 		Correct - + Diagram popup has 100 px insets from its borders to its content
Acceptable - + Diagram popup is set to the default small size
@@ -312,13 +304,13 @@ 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