-
Notifications
You must be signed in to change notification settings - Fork 952
Vika_progress_bar #1500
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Vika_progress_bar #1500
Conversation
Replaced outdated progress bar images with updated versions, including light and dark mode variants for improved consistency and clarity. Archived older assets into a dedicated "old" folder to maintain organization and support future updates.
Replaced outdated images with updated light and dark mode variants for better visual consistency. Restructured documentation to use tables for improved readability and clarity. Enhanced descriptions and examples throughout.
Replaced outdated progress bar images with updated light and dark mode variants for visual consistency. Added new assets for improved representation while archiving older ones. Simplified structure to better support future enhancements and organization.
Simplified content structure for improved readability. Consolidated determinate and indeterminate progress bar guidance with updated images. Enhanced descriptions for process details, control, and completion. Added new visuals and removed redundant examples for clarity.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left some comments here and in Figma
topics/ui/controls/progress_bar.md
Outdated
<p>Do not show a process name for inline processes.</p> | ||
</td> | ||
</tr> | ||
</table> | ||
|
||
#### Process details |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe add somewhere here what process detail can be and why to show it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is a link above, but it can be forgotten by the time you come to this section, so maybe mention it here as well
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added the general information about process details and name to the top of the subsection
<p>If space is limited, show percentage completed.</p> | ||
</td> | ||
</tr> | ||
</table> | ||
|
||
#### In dialog |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe add a separate chapter 'Placement':
Placement:
- In a dialog
- In the status bar
- In a tool window + show the progress bar in the tool window from Git
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi all! The MR looks forgotten, let's merge may be? |
topics/ui/controls/progress_bar.md
Outdated
<img src="09 inline_processes.png" alt="Inline process"/> | ||
</td> | ||
<td> | ||
<p>Do not show a process name for inline processes.</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should the inline progress be described as a separate type? Otherwise, there's just this mention of it in the article and no explanation of how it should be used
topics/ui/controls/progress_bar.md
Outdated
<p>Do not show a process name for inline processes.</p> | ||
</td> | ||
</tr> | ||
</table> | ||
|
||
#### Process details |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|
||
{width=706} | ||
|
||
#### Placement and Behavior |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of this section, I suggest separating it to two parts — Stop icon and Pause/Resume icon. The 1st example in this section is about the stop icon, can be unified with above. The others are about the Pause/Resume.
</tr> | ||
</table> | ||
|
||
#### Pause Option Recommendations |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suggest writing about this in the "Pause/Resume icon" section. Also I'd suggest rewriting to the positive phrasing — when it should be used instead of when it shouldn't be.
|
||
Do **not** color progress bar to show the final result of the task, use [notifications](notification_types.md). | ||
In case of success, show notification for the user-initiated tasks, in case of failure — for all tasks. | ||
|
||
### Process control | ||
|
||
#### Cancel or Stop button | ||
Provide the Cancel button in the progress dialog if the process can be interrupted (see [Loading Project dialog](#in-dialog)). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, it seems that the actions — Cancel, Stop, Pause — do not depend on the UI element we use to show them. The button is used only when the progress appears in the "progress dialog". In all other cases, we use icons.
Possibly move the "Process controls" section above the new "Placement" section suggested by Eldar, and in the "Placement / In progress dialog" add that the icon is replaced a button.
|
||
{width=330} | ||
|
||
#### Process Completion |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move this section to the level of "Progress controls" so that the headers structure describes different parts of the progress one after another:
- Types
- Process name and details
- Process status
- Process controls
- Process completion
- Placement
|
||
{width=330} | ||
|
||
#### Process Completion | ||
Hide the progress bar as soon as the process completes. | ||
|
||
## Sizes and placement |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's remove this part as we did for other articles. It's easier to keep spacings in the UI kit, and sizes are built-in into controls themselves
Improved descriptions for process types, names, and details, adding more clarity and examples. Updated progress bar images with new light and dark mode variants for better consistency. Simplified content structure and adjusted visuals for enhanced readability.
Replaced and updated progress bar images for both light and dark modes to enhance consistency. Removed the table format for process details, replacing it with simplified markdown for better readability. Streamlined content structure and adjusted visuals for clarity.
Revised and enhanced descriptions for process names and details, adding clearer guidance and examples. Updated progress bar images with new variants for light and dark modes. Simplified layout and improved visuals for better readability and organization.
Added new image illustrating process name and details section. Refined guidance for naming and placement of process details to improve clarity and consistency. Adjusted descriptions for better readability.
No description provided.