Begin of the insertion# Current situation

This is a follow-up of ##58155 . 

We now have a standardized component for PageHeaders and SubHeaders that are already usedEnd of the insertion Begin of the deletion * [x] Notification center, will be doneEnd of the deletion in Begin of the insertionparts ofEnd of the insertion the Begin of the insertionapplication. BecauseEnd of the insertion Begin of the deletion scopeEnd of the deletion of Begin of the insertionthat we currently have inconsistent headers throughout the application. This is supposed to be the final ticket of a long list of EPICs to harmonize the headers.

# Acceptance

## Solution

**PageHeader**

End of the insertion Begin of the deletion ##55632 
End of the deletion * Begin of the insertionAllEnd of the insertion Begin of the deletion [ ] WPEnd of the deletion pages Begin of the insertionof the application uses the PageHeader Primer component following the designs provided.

End of the insertion Begin of the deletion
End of the deletion * Begin of the insertionLimit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).

* The headerEnd of the insertion Begin of the deletion [ ] list,End of the deletion will Begin of the insertionalwaysEnd of the insertion be Begin of the deletion done inEnd of the deletion the Begin of the insertiondefault 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 groupsEnd of the insertion Begin of the deletion scopeEnd of the deletion of Begin of the insertionthe sidebar (inside of the last element):

End of the insertion Begin of the deletion ##57405
End of the deletion * Begin of the insertioneg. Projects / {Project list}

End of the insertion Begin of the deletion [ ] full view
End of the deletion * Begin of the insertioneg. {Project A} / Members / Work package shares: Edit rights

End of the insertion Begin of the deletion [ ] create
End of the deletion * Begin of the insertioneg. {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).


**SubHeader**

* AllEnd of the insertion Begin of the deletion [ ] GanttEnd of the deletion pages Begin of the insertionwhere is required will now use SubHeaders that will contain the most relevant actions of the page in a Primer style.

End of the insertion Begin of the deletion (list)
End of the deletion * Begin of the insertionCheck the designs and mockups for references of each specific SubHeader per page.

End of the insertion Begin of the deletion [ ] BIM
End of the deletion * Begin of the insertionIn the pages where there is lists or tables bellow the SubHeaders will contain the filters and creation actions.

End of the insertion Begin of the deletion [ ] Board
End of the deletion * Begin of the insertionSubHeaders 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...)

End of the insertion Begin of the deletion [ ] Calendar
End of the deletion * Begin of the insertionDate navigations (eg. Calendars orEnd of the insertion Begin of the deletion [ ]End of the deletion Team Begin of the insertionPlanners) 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" checked="checked" disabled="disabled"><span class="todo-list__label__description op-uc-p"><br><br><br>&nbsp;</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-table--cell"><p class="op-uc-p">workPackageValue:55632: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>&nbsp;</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></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>&nbsp;</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"><br></p></td><td class="op-uc-table--cell"><p 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>&nbsp;</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><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>&nbsp;</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"><br></p></td><td class="op-uc-table--cell"><p 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>&nbsp;</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"><br></p></td><td class="op-uc-table--cell"><p 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>&nbsp;</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"><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&amp;node-id=0-1&amp;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&amp;node-id=0-1&amp;mode=design

<br>End of the insertion Begin of the deletion plannerEnd of the deletion