mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-28 01:07:49 +08:00
d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
103 lines
3.2 KiB
Markdown
103 lines
3.2 KiB
Markdown
<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
||
|
||
# Progress Text
|
||
|
||
<link-summary>UI guidelines on writing progress texts.</link-summary>
|
||
|
||
{width=632}
|
||
|
||
## When to use
|
||
|
||
Follow the rules for [progress indicators](progress_indicators.md).
|
||
|
||
## How to use
|
||
|
||
### Process name
|
||
|
||
Use the progressive form of the verb which describes the process, for example:
|
||
|
||
{width=288}
|
||
|
||
Add an ellipsis at the end to show that an action is in progress.
|
||
|
||
Use sentence case for process names.
|
||
|
||
A process name remains unchanged while the process runs.
|
||
|
||
Do not animate the ellipsis, as it attracts too much attention.
|
||
The progressive verb form, the text position and the style are enough to understand that this is an action in progress.
|
||
|
||
### Details
|
||
|
||
Use sentence case for details.
|
||
|
||
Do not provide details that are meaningless for the user, for example, "Please wait":
|
||
|
||
<format color="Red" style="bold">Incorrect</format>
|
||
|
||
{width=288}
|
||
|
||
Add time units if the remaining time can be predicted.
|
||
|
||
Round up the first time unit to one of the following numeric anchors: 1, 2, 3, 5, 10, 15, 20 and 30.
|
||
For example, if there are 7 minutes and 50 seconds remaining, the progress text should read "About 10 minutes left".
|
||
If less than 5 seconds are left, it should say "About 5 seconds left".
|
||
|
||
{width=288}
|
||
|
||
Use work units if the remaining time cannot be predicted, as they help the user understand why the process takes so long.
|
||
|
||
Work units: the current step, the currently processed file, the number of processed files/tde amount of information, the percentage of work completed, and so on:
|
||
|
||
{width=288}
|
||
|
||
The time passed if the user controls the process, for example, needs to stop it after a certain time:
|
||
|
||
{width=288}
|
||
|
||
<p>Update the timer every second.</p>
|
||
|
||
### Cancellation action
|
||
|
||
If the process can be cancelled, add a [link](link.md) for the cancel action for an empty state:
|
||
|
||
{width=475}
|
||
|
||
Use title case for the cancel action.
|
||
|
||
Replace progress text with the loaded data or an [empty state](empty_state.md) when the process has finished.
|
||
Show another progress indicator, e.g., a loader as in the example below, if loading continues after some data has been displayed.
|
||
|
||
{width=708}
|
||
|
||
### Trees
|
||
|
||
Do not show details or a link to cancel the operation for progress in trees and lists. Only show the process name since space is limited here.
|
||
|
||
## Sizes and placement
|
||
|
||
### Empty state
|
||
|
||
Center-align the first line of the progress text if it is no longer than 200px.
|
||
If it is longer than 200px, center-align characters from the first 200px and put the rest of the characters to the right.
|
||
|
||
Left-align subsequent lines with the first line.
|
||
|
||
The minimum text width is 40 characters.
|
||
If an area is too narrow to fit the minimum text width, show text using the whole width, including margins.
|
||
If no space is left, hide the text under area borders.
|
||
|
||
Wrap text when the area’s width changes.
|
||
|
||
Fields and vertical spaces:
|
||
|
||
{width=757}
|
||
|
||
### Tree
|
||
|
||
{width=261}
|
||
|
||
## Style
|
||
|
||
Font color is the same as for [Empty state](empty_state.md) text.
|