forked from eclipse-tractusx/traceability-foss
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'refs/heads/main' into feature/#832-enable-policy-manage…
…ment # Conflicts: # CHANGELOG.md
- Loading branch information
Showing
81 changed files
with
672 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
= User experience | ||
|
||
== User interface | ||
|
||
=== Table design | ||
|
||
Trace-X uses the following table design to build consistent and user-friendly tables: | ||
|
||
image::https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-design.png[] | ||
|
||
|=== | ||
|Component |Description |Example | ||
|
||
|Actions | ||
a|* Black icons | ||
* When an action cannot be executed for any reason, the icon turns grey | ||
* A tooltip is shown when hovering over an executable action to describe it | ||
* A tooltip is shown when hovering over a disabled action to describe the reason why it can't be executed | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-actions.png[] | ||
|
||
|Action menus | ||
a|* Opens when clicking on a three-dot menu | ||
* Disappears, when clicking anywhere outside the menu | ||
* List of action icons with text labels | ||
* The three-dot menu is sticky when used inside the table for single-item actions | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-action-menus.png[] | ||
|
||
|Multi-select box | ||
a|* Clicking on it when no items are selected, selects all items on the current page | ||
* Clicking on it when some items are selected (but not all), selects all items on the current page | ||
* Clicking on it when all items are selected, deselects all items on the current page | ||
* Clicking on the small arrow opens a menu for clearing the page selection or the entire selection | ||
* The menu disappears, when clicking anywhere outside the menu | ||
* Part of the column header row -> Sticky on top next to column headers | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-multi-select-box.png[] | ||
|
||
|Selection box | ||
a|* Clicking on it toggles item selection | ||
| | ||
|
||
|Selection count | ||
a|* Shows selection count of the current page | ||
| | ||
|
||
|Column header | ||
a|* Shows the column title | ||
* Hovering over it shows a tooltip that describes sorting behaviour | ||
* Clicking on it toggles sorting | ||
* Sticky on top | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-sorting-tooltip.png[] | ||
Ascending sorting: image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-sorting-ascending.png[] | ||
Descending sorting: image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-sorting-descending.png[] | ||
|
||
|Filter | ||
a|* Can search for any string | ||
* Results are shown directly without having to press enter | ||
* Results are shown as a sorted list (ascending) | ||
* Selected results are shown on top of unselected ones | ||
* The checkbox inside the search field selects or deselects every result | ||
* The cross inside the search field resets the search and the filter | ||
* When the filter is active, 'All' changes to the filtered value (+ the number of other filters) | ||
* For date values, the search is replaced with a date picker | ||
* Sticky on top below column headers | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-filter.png[] | ||
Date filter: image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-filter-date.png[] | ||
|
||
|Quick filter | ||
a|* Used to quickly filter for specific values | ||
* Independent of regular filters | ||
* Work exclusively - only one filter can be selected at a time | ||
* Click on the currently active quick filter to deactivate it | ||
| | ||
|
||
|Table column settings | ||
a|* Opens up as an overlay | ||
* Clicking on Save, the cross or anywhere outside the overlay will close the overlay (only saving changes when clicking Save) | ||
* Selecting/deselecting columns makes them visible/invisible in the table | ||
* The order of the columns can be changed by selecting the column title and using the arrow buttons | ||
* Using the circle arrow icon resets the column visibility and column order | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-column-settings.png[] | ||
|
||
|Full-width toggle | ||
a|* Used to switch between full-width mode or variable-width mode | ||
| | ||
|
||
|Scrollbars | ||
a|* Only visible/active when data exceeds the visible space | ||
* Sticky elements stay visible regardless of scroll position | ||
| | ||
|
||
|Page size selector | ||
a|* Shows the currently selected page size | ||
* When clicking on it, a dropdown opens that shows available page size options | ||
* Clicking any option will select that option and close the dropdown | ||
* Clicking anywhere outside the dropdown closes the dropdown without applying any changes | ||
* Three options are always available | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-page-size-selector.png[] | ||
|
||
|Page information | ||
a|* Shows information about the amount of items on the current page and the total amount of items | ||
| | ||
|
||
|Page controls | ||
a|* Used to switch between pages | ||
* Controls are: First page, previous page, next page, last page | ||
* Hovering over the controls shows a tooltip that labels each control | ||
|image:https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-page-controls.png[] | ||
|=== | ||
|
||
In addition, following tables are used within Trace-X: | ||
|
||
When the data is not as complex and/or extensive and single-item actions are not needed: | ||
|
||
image::https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-small.png[] | ||
|
||
When data must only be shown and no actions are needed: | ||
|
||
image::https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/arc42/cross-cutting/user-experience/table-data-only.png[] |
Oops, something went wrong.