diff --git a/.idea/kotlinc.xml b/.idea/kotlinc.xml index 125a7e07695..8d3e8dbb707 100644 --- a/.idea/kotlinc.xml +++ b/.idea/kotlinc.xml @@ -1,6 +1,7 @@ + - + \ No newline at end of file diff --git a/images/ui/loader/02.png b/images/ui/loader/02.png new file mode 100644 index 00000000000..f72df2984a9 Binary files /dev/null and b/images/ui/loader/02.png differ diff --git a/images/ui/loader/02_dark.png b/images/ui/loader/02_dark.png new file mode 100644 index 00000000000..b3d4bacddec Binary files /dev/null and b/images/ui/loader/02_dark.png differ diff --git a/images/ui/loader/03.png b/images/ui/loader/03.png new file mode 100644 index 00000000000..14fe31b22bc Binary files /dev/null and b/images/ui/loader/03.png differ diff --git a/images/ui/loader/03_dark.png b/images/ui/loader/03_dark.png new file mode 100644 index 00000000000..881228ed590 Binary files /dev/null and b/images/ui/loader/03_dark.png differ diff --git a/images/ui/loader/04.png b/images/ui/loader/04.png new file mode 100644 index 00000000000..8afe8de04a4 Binary files /dev/null and b/images/ui/loader/04.png differ diff --git a/images/ui/loader/04_dark.png b/images/ui/loader/04_dark.png new file mode 100644 index 00000000000..34d08fdf714 Binary files /dev/null and b/images/ui/loader/04_dark.png differ diff --git a/images/ui/loader/05.png b/images/ui/loader/05.png new file mode 100644 index 00000000000..b896791dc30 Binary files /dev/null and b/images/ui/loader/05.png differ diff --git a/images/ui/loader/05_dark.png b/images/ui/loader/05_dark.png new file mode 100644 index 00000000000..c09eea0b210 Binary files /dev/null and b/images/ui/loader/05_dark.png differ diff --git a/images/ui/loader/06.png b/images/ui/loader/06.png new file mode 100644 index 00000000000..491b09e7dc5 Binary files /dev/null and b/images/ui/loader/06.png differ diff --git a/images/ui/loader/06_dark.png b/images/ui/loader/06_dark.png new file mode 100644 index 00000000000..0fe9d1420ad Binary files /dev/null and b/images/ui/loader/06_dark.png differ diff --git a/images/ui/loader/07.png b/images/ui/loader/07.png new file mode 100644 index 00000000000..92d7f306422 Binary files /dev/null and b/images/ui/loader/07.png differ diff --git a/images/ui/loader/07_dark.png b/images/ui/loader/07_dark.png new file mode 100644 index 00000000000..30d55b2a472 Binary files /dev/null and b/images/ui/loader/07_dark.png differ diff --git a/images/ui/loader/08.png b/images/ui/loader/08.png new file mode 100644 index 00000000000..70e3577ad94 Binary files /dev/null and b/images/ui/loader/08.png differ diff --git a/images/ui/loader/08_dark.png b/images/ui/loader/08_dark.png new file mode 100644 index 00000000000..d5db1318bf7 Binary files /dev/null and b/images/ui/loader/08_dark.png differ diff --git a/images/ui/loader/09.png b/images/ui/loader/09.png new file mode 100644 index 00000000000..60e9f36f31c Binary files /dev/null and b/images/ui/loader/09.png differ diff --git a/images/ui/loader/09_dark.png b/images/ui/loader/09_dark.png new file mode 100644 index 00000000000..b3d4bacddec Binary files /dev/null and b/images/ui/loader/09_dark.png differ diff --git a/images/ui/loader/10.png b/images/ui/loader/10.png new file mode 100644 index 00000000000..bb8ada2be6a Binary files /dev/null and b/images/ui/loader/10.png differ diff --git a/images/ui/loader/10_dark.png b/images/ui/loader/10_dark.png new file mode 100644 index 00000000000..1aa4aacd2ca Binary files /dev/null and b/images/ui/loader/10_dark.png differ diff --git a/images/ui/loader/11.png b/images/ui/loader/11.png new file mode 100644 index 00000000000..39fc220823d Binary files /dev/null and b/images/ui/loader/11.png differ diff --git a/images/ui/loader/11_dark.png b/images/ui/loader/11_dark.png new file mode 100644 index 00000000000..92e06f2104f Binary files /dev/null and b/images/ui/loader/11_dark.png differ diff --git a/images/ui/loader/anatomy.png b/images/ui/loader/anatomy.png new file mode 100644 index 00000000000..517c66ac20f Binary files /dev/null and b/images/ui/loader/anatomy.png differ diff --git a/images/ui/loader/anatomy_dark.png b/images/ui/loader/anatomy_dark.png new file mode 100644 index 00000000000..496119f912d Binary files /dev/null and b/images/ui/loader/anatomy_dark.png differ diff --git a/images/ui/loader/loader.png b/images/ui/loader/loader.png deleted file mode 100644 index 30cdbbd9862..00000000000 Binary files a/images/ui/loader/loader.png and /dev/null differ diff --git a/images/ui/loader/loader_size.png b/images/ui/loader/loader_size.png deleted file mode 100644 index c9b3b5d6e95..00000000000 Binary files a/images/ui/loader/loader_size.png and /dev/null differ diff --git a/images/ui/loader/loader_with_progress_text.png b/images/ui/loader/loader_with_progress_text.png deleted file mode 100644 index 01641f1f35b..00000000000 Binary files a/images/ui/loader/loader_with_progress_text.png and /dev/null differ diff --git a/images/ui/loader/placement_corner.png b/images/ui/loader/placement_corner.png deleted file mode 100644 index 98bb6454100..00000000000 Binary files a/images/ui/loader/placement_corner.png and /dev/null differ diff --git a/images/ui/loader/placement_field.png b/images/ui/loader/placement_field.png deleted file mode 100644 index 7ee90a3435b..00000000000 Binary files a/images/ui/loader/placement_field.png and /dev/null differ diff --git a/images/ui/loader/placement_item.png b/images/ui/loader/placement_item.png deleted file mode 100644 index cd8b6c1085b..00000000000 Binary files a/images/ui/loader/placement_item.png and /dev/null differ diff --git a/images/ui/loader/placement_progress_text.png b/images/ui/loader/placement_progress_text.png deleted file mode 100644 index 0e4daa36650..00000000000 Binary files a/images/ui/loader/placement_progress_text.png and /dev/null differ diff --git a/images/ui/progress_indicators/01.png b/images/ui/progress_indicators/01.png new file mode 100644 index 00000000000..f30d3211271 Binary files /dev/null and b/images/ui/progress_indicators/01.png differ diff --git a/images/ui/progress_indicators/01_dark.png b/images/ui/progress_indicators/01_dark.png new file mode 100644 index 00000000000..89819303fd2 Binary files /dev/null and b/images/ui/progress_indicators/01_dark.png differ diff --git a/images/ui/progress_indicators/breadcrumb_loader.png b/images/ui/progress_indicators/breadcrumb_loader.png deleted file mode 100644 index 59f03481ecf..00000000000 Binary files a/images/ui/progress_indicators/breadcrumb_loader.png and /dev/null differ diff --git a/images/ui/progress_indicators/combo_box_loader.png b/images/ui/progress_indicators/combo_box_loader.png deleted file mode 100644 index 076722602e5..00000000000 Binary files a/images/ui/progress_indicators/combo_box_loader.png and /dev/null differ diff --git a/images/ui/progress_indicators/empty_state_details.png b/images/ui/progress_indicators/empty_state_details.png deleted file mode 100644 index 156c76a9ccd..00000000000 Binary files a/images/ui/progress_indicators/empty_state_details.png and /dev/null differ diff --git a/images/ui/progress_indicators/empty_state_loader.png b/images/ui/progress_indicators/empty_state_loader.png deleted file mode 100644 index 580f36d3dc8..00000000000 Binary files a/images/ui/progress_indicators/empty_state_loader.png and /dev/null differ diff --git a/images/ui/progress_indicators/empty_state_text.png b/images/ui/progress_indicators/empty_state_text.png deleted file mode 100644 index e7cd3db8272..00000000000 Binary files a/images/ui/progress_indicators/empty_state_text.png and /dev/null differ diff --git a/images/ui/progress_indicators/progress_dialog.png b/images/ui/progress_indicators/progress_dialog.png deleted file mode 100644 index 9fc6a02a940..00000000000 Binary files a/images/ui/progress_indicators/progress_dialog.png and /dev/null differ diff --git a/images/ui/progress_indicators/progress_tool_window.png b/images/ui/progress_indicators/progress_tool_window.png deleted file mode 100644 index 5bb52e3867e..00000000000 Binary files a/images/ui/progress_indicators/progress_tool_window.png and /dev/null differ diff --git a/images/ui/progress_indicators/search_field_loader.png b/images/ui/progress_indicators/search_field_loader.png deleted file mode 100644 index 3de91adde19..00000000000 Binary files a/images/ui/progress_indicators/search_field_loader.png and /dev/null differ diff --git a/images/ui/progress_indicators/settings_loader.png b/images/ui/progress_indicators/settings_loader.png deleted file mode 100644 index 1907cc1810b..00000000000 Binary files a/images/ui/progress_indicators/settings_loader.png and /dev/null differ diff --git a/images/ui/progress_indicators/status_bar_progress.png b/images/ui/progress_indicators/status_bar_progress.png deleted file mode 100644 index 5f84d6e26b2..00000000000 Binary files a/images/ui/progress_indicators/status_bar_progress.png and /dev/null differ diff --git a/images/ui/progress_indicators/tree_loader_corner.png b/images/ui/progress_indicators/tree_loader_corner.png deleted file mode 100644 index dceab6f9af2..00000000000 Binary files a/images/ui/progress_indicators/tree_loader_corner.png and /dev/null differ diff --git a/images/ui/progress_indicators/tree_loader_icon.png b/images/ui/progress_indicators/tree_loader_icon.png deleted file mode 100644 index ed9aeda8c3d..00000000000 Binary files a/images/ui/progress_indicators/tree_loader_icon.png and /dev/null differ diff --git a/images/ui/progress_indicators/tree_loader_push.png b/images/ui/progress_indicators/tree_loader_push.png deleted file mode 100644 index f5ab916c64c..00000000000 Binary files a/images/ui/progress_indicators/tree_loader_push.png and /dev/null differ diff --git a/images/ui/progress_indicators/tree_text.png b/images/ui/progress_indicators/tree_text.png deleted file mode 100644 index 7e5080e2ded..00000000000 Binary files a/images/ui/progress_indicators/tree_text.png and /dev/null differ diff --git a/topics/ui/controls/loader.md b/topics/ui/controls/loader.md index dcb83ab552b..44237cfdbd9 100644 --- a/topics/ui/controls/loader.md +++ b/topics/ui/controls/loader.md @@ -12,17 +12,13 @@ -A loader informs users about performing a lengthy operation. +A loader indicates that an operation is in progress. It consists of a loader icon with a process name or a loader icon alone. -![](loader.png){width=330} +![Loader anatomy](anatomy.png){width=706} -## When to use - -Follow the rules for [progress indicators](progress_indicators.md). -## How to use + -The loader form and sizes are the same in all themes. Use the default 16×16 loader in all cases. @@ -33,7 +29,6 @@ JLabel( SwingConstants.LEFT ) ``` - @@ -44,53 +39,84 @@ new JLabel( SwingConstants.LEFT ); ``` - + + +## When to use + +### Field, dropdown, or combobox +If content in a control takes time to load, place a loader on the right side inside the field. + +![Using in field, dropdown, or combobox](02.png){width=706} + +### Tree or list + +If tree nodes load independently and their individual states matter, display loaders instead of node icons. + +![Using in tree or list](03.png){width=706} + +If icons can’t be replaced, show a process name after a node label. + +![Process name after a node label](04.png){width=706} + +If a loader applies to the entire content below, use the [Inline progress](progress_bar.md#inline-progress) instead. + +### Empty state + +Show a loader while content is being loaded. + +![Empty state](05.png){width=706} + +### Non-instant actions +Display a loader near a button or link while an action is being performed. + +![Loader near a button](06.png){width=706} + +If an action appears as an icon on a toolbar, or space is limited, replace the action with a loader icon. + +![Loader instead of icon](07.png){width=706} + +## How to use + +### Process name and details +A loader can show a process name and process details. + +#### Process name + +Always show the name of an operation being performed. +Use the continuous form of the verb that describes the operation. Add an ellipsis at the end to indicate that the process is ongoing. + +![Process name](08.png){width=706} + +If there is no space for the process name, show it in a tooltip. + +![Process name in a tooltip](09.png){width=706} + +#### Process details +Optionally show information about the current stage of an operation. +Details make long-running tasks more predictable and manageable. +Show process details below the process name. The text should be concise and displayed on a single line. -A loader may have a label if the process is long and the loader is shown in an empty area. In this case, use a [progress text](progress_text.md) as the label: +![Process details](10.png){width=706} -![](loader_with_progress_text.png){width=597} +Details examples: +* The current step: "Uploading file 3 of 10" +* Remaining time or percentage completed +* Round the remaining time to one of the following values: 1, 2, 3, 5, 10, 15, 20, or 30 seconds (or minutes). For example, if 7 minutes and 50 seconds remain, show "About 10 minutes left." If less than 5 seconds remain, show "About 5 seconds left." -Remove the loader as soon as the process completes. -## Placement +#### Cancellation action +If a process can be canceled, provide the Cancel action and place it on the right. - +![Cancellation action](11.png){width=706} - - - - +#### Process completion +Hide the loader as soon as the process completes. - - - - - - - - - - - - - - - -
Inside a field
- - ExpandableTextField textField = new ExpandableTextField(); - textField.addExtension( - Extension.create(new AnimatedIcon.Default(), null, null) - ); - -
In a corner -
Next to an item
Before a progress text -
diff --git a/topics/ui/controls/progress_indicators.md b/topics/ui/controls/progress_indicators.md deleted file mode 100644 index 6615f4ded7c..00000000000 --- a/topics/ui/controls/progress_indicators.md +++ /dev/null @@ -1,118 +0,0 @@ - - -# Progress Indicators - -UI guidelines on using progress indicators. - - - -**Implementation**: Progress tracking in [Progress API](background_processes.md#tracking-progress) and [Kotlin Coroutines](execution_contexts.topic#progress-reporting) - - - -Progress indicators inform users about an ongoing operation. There are three types of indicators: - -* [Loader](loader.md) -* [Progress text](progress_text.md) -* [Progress bar](progress_bar.md) - -## Which indicator to use - -If an operation lasts for less than a second in most cases, do not show any progress indicator. Progress indicators for a short operation are distracting. - -If the user has to wait until a process completes to continue working with the app, show a progress bar in a modal dialog. - -![](progress_dialog.png){width=440} - -If the progress is non-modal, select progress indicator based on where it appears. - -* [Input field, combo box, drop-down](#input-field-combo-box-drop-down) - -* [Search field](#search-field) - -* [Tree, list, tool window](#tree-list-tool-window) - -* [Breadcrumb and dialog label](#breadcrumb-and-dialog-label) - -* [Settings dialog](#settings-dialog) - -* [Empty state](#empty-state) - -* [Main window](#main-window) - -### Input field, combo box, drop-down - -Place the loader inside an input field on the right to show that the field content is being loaded or checked. - -![](combo_box_loader.png){width=201} - -### Search field - -Place the loader on the right to show that search is being performed. - -![](search_field_loader.png){width=262} - -### Tree, list, tool window - -If each tree node loads independently, and it’s important to know the current state of each node, show the loader instead of the node icon: - -![](tree_loader_icon.png){width=372} - -If nodes do not have icons, or icons can’t be replaced for some reason, show progress text after the node’s label: - -![](tree_text.png){width=400} - -If the loader applies to the whole content, place it in the top right corner: - -![](tree_loader_corner.png){width=400} - -If processes start simultaneously and have the same execution time, place the loader in the top right corner of the area. -For example, in the Push dialog, repositories are loaded at the same time. -Loaders in each line will blink at the same time and will look distracting. - -![](tree_loader_push.png){width=400} - -If the top right corner of the area is taken with content and there is no space for the loader, show the progress bar at the top of the tool window. -For example, the VCS Log tool window has a progress bar at the top when the content is loading or during searching. - -![](progress_tool_window.png){width=605} - -### Breadcrumb and dialog label - -Place the loader after breadcrumbs or a dialog label to show that the page is being loaded: - -![](breadcrumb_loader.png){width=274} - -### Settings dialog - -If some settings or configurations take a significant time to load, it’s preferable to reserve space for a progress bar. -For example, show a progress bar while installing a plugin: - -![](settings_loader.png){width=251} - -### Empty state - -If the state is empty, show progress text. For example, in search dialogs, and the details panel in settings or tool windows: - -![](empty_state_text.png){width=708} - -Show one more progress indicator, e.g., a loader like on the example above, if loading continues when some data is already displayed. - -If a process takes longer than 4 seconds, provide [process details](progress_text.md#details), e.g., the time left or passed, work units -like the current step, to indicate that the process is being performed and is not hanging: - -![](empty_state_details.png){width=576} - -If it’s not possible to provide progress details, show the loader to indicate that a long process is not frozen: - -![](empty_state_loader.png){width=576} - -### Main window - -If a process is long and can run in the background, show the progress bar in the main window in the status bar: - -![](status_bar_progress.png){width=238} - -Or in a non-modal dialog: - -![](tasks_dialog.png){width=700}