Content
View differences
Updated by Henriette Darge almost 2 years ago
# User Problem
## Problem
**PageHeader**
* 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.
**SubHeader**
* There are no sub-headers that improve the usability of the application and helps the users to perform the most important actions related to the content of the screen.
* The sub-headers are components that affect all the pages in the application and need to be considered and designed with that in mind, not individually per page. With that said each feature of the application might require variations of this component to accommodate the most relevant actions.
# Business Case
## Solution
**PageHeader**
* 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 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 documentation.
**SubHeader**
* All pages where is required will now use sub-headers that will contain the most relevant actions of the page in a Primer style. 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.
* Check the designs and mockups for references of each specific sub-header per page.
* In the pages where there is lists or tables bellow the sub-headers will contain the filters and creation actions.
* Sub-headers 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 sub-headers.
## 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 op-uc-p"></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 op-uc-p"></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">###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">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 op-uc-p"></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 op-uc-p"></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">###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">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 op-uc-p"></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">##53809</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53809:version</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 op-uc-p"></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">##55632</p></td><td class="op-uc-p">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55632:version</p></td><td class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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-p">##53807</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56739:version</p></td><td class="op-uc-p">workPackageValue:53807:version</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 op-uc-p"></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 op-uc-p"></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">##53807</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53807:version</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 op-uc-p"></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 op-uc-p"></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">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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">##53809</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53809:version</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 op-uc-p"></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">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##55476</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:55476:version</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 op-uc-p"></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">###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"></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"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53810</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53810:version</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 op-uc-p"></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">##53808</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53808:version</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
**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
## Problem
**PageHeader**
* 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.
**SubHeader**
* There are no sub-headers that improve the usability of the application and helps the users to perform the most important actions related to the content of the screen.
* The sub-headers are components that affect all the pages in the application and need to be considered and designed with that in mind, not individually per page. With that said each feature of the application might require variations of this component to accommodate the most relevant actions.
# Business Case
## Solution
**PageHeader**
* 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 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 documentation.
**SubHeader**
* All pages where is required will now use sub-headers that will contain the most relevant actions of the page in a Primer style. 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.
* Check the designs and mockups for references of each specific sub-header per page.
* In the pages where there is lists or tables bellow the sub-headers will contain the filters and creation actions.
* Sub-headers 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 sub-headers.
## 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 op-uc-p"></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 op-uc-p"></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">###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">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 op-uc-p"></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 op-uc-p"></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">###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">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 op-uc-p"></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">##53809</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:53809:version</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 op-uc-p"></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">##55632</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