Content
View differences
Updated by Henriette Darge about 2 months ago
# Current situation
* We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application (see #58155). Because of that we currently have inconsistent headers throughout the application.
* Further, we still have some very heavy weight angular pages which we want to transform towards rails and Primer. The biggest blocker is currently the ui-Router and its connection between the queryProps and WP table
# Rough steps to do
1. Replace angular routes with rails routes
2. Tranform current (angular) WP filters into rails filter component
3. Replace UI-Router calls with Turbo equivalents
4. Connect new queryProps with the Table
# UX Acceptance
##
**PageHeader**
* All pages in the below listed module use the PageHeader Primer component following the designs provided.
* Limit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).
* The header will always be the default size, not the large one.
* Follow this rules when it comes to breadcrumb rules:
* **For index or list pages**, display a navigational breadcrumb, including the containing the project (first element) and the groups of the sidebar (inside of the last element):
* eg. Projects / {Project list}
* eg. {Project A} / Members / Work package shares: Edit rights
* eg. {Project A} / Meetings / Upcoming meetings
* **For 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 individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* In mobile the breadcrumbs will be substituted with the level on top and an arrow back.
* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead).
* All the buttons that existed before, will be kept (as Primer buttons)
* Include projects
* (On WP list): Baseline
* etc
**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
* WP Creation
* WP Lists
* WP details
* Calendar details
* TeamPlanner details
* Board details
* Gantt details
* MyPage MyPage, see #58491
* BIM pages pages, see #58491
# 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>
* We now have a standardized component for PageHeaders and SubHeaders that are already used in parts of the application (see #58155). Because of that we currently have inconsistent headers throughout the application.
* Further, we still have some very heavy weight angular pages which we want to transform towards rails and Primer. The biggest blocker is currently the ui-Router and its connection between the queryProps and WP table
#
1. Replace angular routes with rails routes
2. Tranform current (angular) WP filters into rails filter component
3. Replace UI-Router calls with Turbo equivalents
4. Connect new queryProps with the Table
#
##
**PageHeader**
* All pages in the below listed module use the PageHeader Primer component following the designs provided.
* Limit the actions in the PageHeader to the "View or query" related actions (eg. Favourite, share, change between view types...).
* The header will always be the default size, not the large one.
* Follow this rules when it comes to breadcrumb rules:
* **For index or list pages**, display a navigational breadcrumb, including the containing the project (first element) and the groups of the sidebar (inside of the last element):
* eg. Projects / {Project list}
* eg. {Project A} / Members / Work package shares: Edit rights
* eg. {Project A} / Meetings / Upcoming meetings
* **For 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 individual work packages**, display only a hierarchical breadcrumb if there are parents (like today).
* In mobile the breadcrumbs will be substituted with the level on top and an arrow back.
* Remove all back buttons (the user can use the browser back button or the breadcrumbs instead).
* All the buttons that existed before, will be kept (as Primer buttons)
* Include projects
* (On WP list): Baseline
* etc
**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.
#
* WP Creation
* WP Lists
* WP details
* Calendar details
* TeamPlanner details
* Board details
* Gantt details
* MyPage
* BIM pages
# 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>