diff --git a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes.png new file mode 100644 index 000000000..e0a22b190 Binary files /dev/null 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_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_dark.png new file mode 100644 index 000000000..279d75cca Binary files /dev/null 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_empty_state_incorrect_dark.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_empty_state_incorrect_dark.png index a165cdcc1..823d1238a 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_example_1_acceptable.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable.png index d71ba1891..2740256c7 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable.png 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 index 009a82e1e..6aa840c07 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_acceptable_dark.png 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 index d10c91fe4..45a8c52fc 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct.png 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 index 2294926ff..dcdd4ac12 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_example_1_correct_dark.png 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_extra_small.png b/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small.png index df8118d59..ae678d1a0 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small.png 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 index 039dbb0cd..3cd8ba593 100644 Binary files a/images/ui/dialog_and_popup_sizes/dialog_popup_sizes_extra_small_dark.png 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 index 82f858d66..931c0e60f 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..441a3ceff 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 c2db8c3d5..4eebb39b3 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 e219a3bc2..9db8a392b 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/topics/Dialog-and-popup-sizes.md b/topics/Dialog-and-popup-sizes.md index c0df7ed8b..9f86a7631 100644 --- a/topics/Dialog-and-popup-sizes.md +++ b/topics/Dialog-and-popup-sizes.md @@ -12,6 +12,8 @@ Follow these guidelines to select the correct size when creating a dialog or a p 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"} + When setting the default size for your dialog, it should be impossible to make it smaller. #### Extra small @@ -20,8 +22,6 @@ 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 @@ -29,7 +29,6 @@ For example, the Rename File dialog has several input fields 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. @@ -45,21 +44,20 @@ 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-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. -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: +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 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"} +![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"} #### 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. +* Two-column layout with long names, code editor, code snippet. +* 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: @@ -77,8 +75,8 @@ When a user changes an adaptive popup’s size, the size is saved and the adapti ### 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. +* Vertical tool windows should have the min size set to 250×500 px. +* Horizontal tool windows should have the min size set to 500×250 px. The default sizes should be set for all the states of the View Mode.