Content
View differences
Updated by Henriette Darge 12 months ago
# Current situation
This is a follow-up of ##55476 .
We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application. Further, with #55476 done, we will have removed the uiRouter from the largest frontend module. Thus it should be easy to remove it from the other modules as well. This is supposed to be the final ticket of a long list of EPICs to harmonize the headers.
# Acceptance
## Solution
**PageHeader**
* All pages of the application uses 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 calendars and team planners:** display a navigational breadcrumb, including the the project and considering the calendars/team planners created as views and adding an sidebar entry for "all":
* eg. OpenProject / Calendars / All calendars
* eg. OpenProject / Calendars / Favourite: {Calendar name}
* 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...)
* Date navigations (eg. Calendars or Team Planners) will also be part of the subHeaders.
# 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">Calendars details</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###55635</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55635: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">Team planners details</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###55636</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55636: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">Boards details</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###55634</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55634: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">Gantt details</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###55637</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55637: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">BIM details</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###55638</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55638: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">My Page</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###56739</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56739:version</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 ##55476 .
We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application. Further, with #55476 done, we will have removed the uiRouter from the largest frontend module. Thus it should be easy to remove it from the other modules as well. This is supposed to be the final ticket of a long list of EPICs to harmonize the headers.
# Acceptance
## Solution
**PageHeader**
* All pages of the application uses 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
*
* eg. OpenProject / Calendars / All calendars
* eg. OpenProject / Calendars / Favourite: {Calendar name}
*
* 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...)
* Date navigations (eg. Calendars or Team Planners) will also be part of the subHeaders.
# 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
# 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>