Content
Updated by Marc Alcobé about 1 month ago
# User Problem
## Problem
* Currently there are multiple implementations of PageHeaders due to the introduction of Primer as Design System.
* There is a lack of how we expect the different types of Headers in the application to behave and look.
* The PageHeaders components have been analyses individually per page where Primer has been introduced but not as a global for the app.
# Business Case
## Solution
* All pages of the application uses the PageHeader Primer component following the designs provided. This is the global objective of this EPIC but we can continue to adapt the app page by page accepting that there will be differences in the meantime.
* 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 (need adapt Meetings pages to this rule). The PageHeader title will always become the H1 tag of the page.
* 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 settings pages**, display a navigational breadcrumb including the project:
* eg. Administration / File storages / {Storage name}
* eg. My account / Email reminders
* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* **For individual meetings:** display a navigational breadcrumb, including the the project.
* **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}
* **For wikis:** display a navigational breadcrumb, including the the project:
* eg. OpenProject / Wiki / {Wiki page name} / {Wiki sub-page 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).
* In mobile the divider will not disappear (opposed to the current implementation) and the PageHeader will contain a maximum of 1 action. If there is multiple actions this action will be a three dots horizontal vertical more menu.
* For all the pages that can be saved or saved as the designed behaviour of a message to save the view will automatically appear when the view is modified (see designs and Project Lists for reference).
* This harmonisation its linked and dependant on the harmonisation of page sub-headers specified in the work package ###52401.
* Include this decisions to our Lookbook Storybook documentation.
## Next iteration
* Multiple iterations to modify all headers in the application.
# 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><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>NOTES</strong></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project list</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52746</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52746:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Will be the first page to use the complete component implemented in <mention class="mention" data-id="52582" data-type="work_package" data-text="#52582">#52582</mention>.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project members</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52583</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52583:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">The actions on the PageHeaders will be maintained until update with <mention class="mention" data-id="52401" data-type="work_package" data-text="#52401">#52401</mention>. </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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Meetings</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52584</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52584:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Currently is an independent component that needs to be substituted.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">File Storages</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52748</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52748:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">UI is correct but breadcrumb not included in the component</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Home page</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Notification centre</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">My activity</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">My account</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Contains all personal settings.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project creation</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Global activity</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Calendar lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Team planners lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Boards lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Meetings lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">News</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Time and costs</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project overview</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project activity</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Roadmaps</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Backlogs</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Forums</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Documents</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Wiki pages</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project settings</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">All the project setting pages inside a project.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Administration settings</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">All instance administration settings pages excluding File Storages.</p></td></tr></tbody></table></figure>
# Visuals and Figma
https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design
## Problem
* Currently there are multiple implementations of PageHeaders due to the introduction of Primer as Design System.
* There is a lack of how we expect the different types of Headers in the application to behave and look.
* The PageHeaders components have been analyses individually per page where Primer has been introduced but not as a global for the app.
# Business Case
## Solution
* All pages of the application uses the PageHeader Primer component following the designs provided. This is the global objective of this EPIC but we can continue to adapt the app page by page accepting that there will be differences in the meantime.
* 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 (need adapt Meetings pages to this rule). The PageHeader title will always become the H1 tag of the page.
* 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 settings pages**, display a navigational breadcrumb including the project:
* eg. Administration / File storages / {Storage name}
* eg. My account / Email reminders
* **For individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* **For individual meetings:** display a navigational breadcrumb, including the the project.
* **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}
* **For wikis:** display a navigational breadcrumb, including the the project:
* eg. OpenProject / Wiki / {Wiki page name} / {Wiki sub-page 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).
* In mobile the divider will not disappear (opposed to the current implementation) and the PageHeader will contain a maximum of 1 action. If there is multiple actions this action will be a three dots horizontal
* For all the pages that can be saved or saved as the designed behaviour of a message to save the view will automatically appear when the view is modified (see designs and Project Lists for reference).
* This harmonisation its linked and dependant on the harmonisation of page sub-headers specified in the work package ###52401.
* Include this decisions to our Lookbook
## Next iteration
* Multiple iterations to modify all headers in the application.
# 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><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);"><p class="op-uc-p"><strong>NOTES</strong></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project list</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52746</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52746:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Will be the first page to use the complete component implemented in <mention class="mention" data-id="52582" data-type="work_package" data-text="#52582">#52582</mention>.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project members</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52583</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52583:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">The actions on the PageHeaders will be maintained until update with <mention class="mention" data-id="52401" data-type="work_package" data-text="#52401">#52401</mention>. </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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Meetings</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52584</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52584:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Currently is an independent component that needs to be substituted.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">File Storages</p></td><td class="op-uc-table--cell"><p class="op-uc-p">###52748</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:52748:version</p></td><td class="op-uc-table--cell"><p class="op-uc-p">UI is correct but breadcrumb not included in the component</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Home page</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Notification centre</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">My activity</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">My account</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Contains all personal settings.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project creation</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Global activity</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Calendar lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Team planners lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Boards lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></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"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Meetings lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">News</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Time and costs</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project overview</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project activity</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Roadmaps</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Backlogs</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Forums</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Documents</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Wiki pages</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Project settings</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">All the project setting pages inside a project.</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"></span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Administration settings</p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">All instance administration settings pages excluding File Storages.</p></td></tr></tbody></table></figure>
# Visuals and Figma
https://www.figma.com/file/UeRGKwv1lSKDpribyWROe3/Page-Headers-concept?type=design&node-id=0-1&mode=design