Content
View differences
Updated by Henriette Darge over 1 year ago
# Current situation
This is a follow-up of ##58155 .
We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application. Because of that we currently have inconsistent headers throughout the application. application.
# Acceptance
## Solution
**PageHeader**
* All pages in the WorkPackage module use the PageHeader Primer component following the designs provided.
* Limit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).
* The header will always be the default size, not the large one.
* Follow this rules when it comes to breadcrumb rules:
* **For index or list pages**, display a navigational breadcrumb, including the containing the project (first element) and the groups of the sidebar (inside of the last element):
* eg. Projects / {Project list}
* eg. {Project A} / Members / Work package shares: Edit rights
* eg. {Project A} / Meetings / Upcoming meetings
* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* In mobile the breadcrumbs will be substituted with the level on top and an arrow back.
* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead).
**SubHeader**
* All pages where is required will now use SubHeaders that will contain the most relevant actions of the page in a Primer style.
* Check the designs and mockups for references of each specific SubHeader per page.
* In the pages where there is lists or tables bellow the SubHeaders will contain the filters and creation actions.
* SubHeaders might change in the same page context if there is actions that are depending on the selection of the content (eg. multi select of work packages...)
# Table of pages to change
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><br data-cke-filler="true"></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>PAGE</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>WORK PACKAGE</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p">VERSION</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br> </span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">WP creation</p></td><td class="op-uc-table--cell"><p class="op-uc-p">##57405</p></td><td class="op-uc-p">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:57405:version</p></td></tr><tr class="op-uc-p">workPackageValue:55476:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br> </span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Work package lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p">##57405</p></td><td class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:57405:version</p></td></tr><tr class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br> </span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Work package details</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr></tbody></table></figure>
# Visuals and Figma
**PageHeader**
[https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design](https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design)
**SubHeader**
https://www.figma.com/file/tUkyiLDn5ax7Q9DAhxlS69/Sub-headers-concept?type=design&node-id=0-1&mode=design
<br>
This is a follow-up of ##58155 .
We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application. Because of that we currently have inconsistent headers throughout the application.
# Acceptance
## Solution
**PageHeader**
* All pages in the WorkPackage module use the PageHeader Primer component following the designs provided.
* Limit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).
* The header will always be the default size, not the large one.
* Follow this rules when it comes to breadcrumb rules:
* **For index or list pages**, display a navigational breadcrumb, including the containing the project (first element) and the groups of the sidebar (inside of the last element):
* eg. Projects / {Project list}
* eg. {Project A} / Members / Work package shares: Edit rights
* eg. {Project A} / Meetings / Upcoming meetings
* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* In mobile the breadcrumbs will be substituted with the level on top and an arrow back.
* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead).
**SubHeader**
* All pages where is required will now use SubHeaders that will contain the most relevant actions of the page in a Primer style.
* Check the designs and mockups for references of each specific SubHeader per page.
* In the pages where there is lists or tables bellow the SubHeaders will contain the filters and creation actions.
* SubHeaders might change in the same page context if there is actions that are depending on the selection of the content (eg. multi select of work packages...)
# Table of pages to change
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><br data-cke-filler="true"></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>PAGE</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>WORK PACKAGE</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p">VERSION</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br> </span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">WP creation</p></td><td class="op-uc-table--cell"><p class="op-uc-p">##57405</p></td><td
# Visuals and Figma
**PageHeader**
[https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design](https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design)
**SubHeader**
https://www.figma.com/file/tUkyiLDn5ax7Q9DAhxlS69/Sub-headers-concept?type=design&node-id=0-1&mode=design
<br>