Content
Updated by Henriette Darge 3 months ago
# **Context**
We're increasingly using the [Primer Sub Header](https://qa.openproject-edge.com/lookbook/pages/patterns/sub_header) component in different pages. This provides the user with a toolbar with additional actions related to the objets contained below. Most pages have a very limited number of elements on the sub header; they work just as well in mobile devices. In others, some Meetings index pages, there are too many and it all appears squished.
This feature seeks to define mobile behaviour at a component level in order to avoid case-by-base overrides as much as possible.
## **Why we need this**
**To avoid crowded/squished sub-headers like this in mobile:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:310px;" src="https://community.openproject.org/api/v3/attachments/264138/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:296px;" src="/api/v3/attachments/314831/content">
# **Acceptance criteria**
All the following AC are for the Primer SubHeader component
**Desktop**
* All buttons will be enforce to show an icon on desktop to which they can collapse to on mobile
**Mobile**
* All buttons turn into icon buttons without labels,
* and without trailing icons (eg. dropdown)
* This is for both the left- and the right-side buttons
* Segmented controls turn into icon-only options
* All segmented controls in a SubHeader items must have an icon specified (even in the desktop version, see first AC)
* The center text will:
* If left slot is empty: go to left side and truncate to available width
* If left slot is not empty: go to a new line and is left aligned
* Search bar behaves as before (it takes the full length when clicked)
* If there are no actions on the left side of the SubHeader and no text on desktop, this space will remain empty on mobile too
* All actions that do not have a visible label need a title or ARIA label for accessibilty
## **Out of scope**
* These adaptation don't take the upcoming quick filters into account:
* <mention class="mention" data-id="57964" data-type="work_package" data-text="###57964">###57964</mention>
* Currently, the component offers some free slots for the filter button. button and the right-side actions. For those, we cannot enforce the mobile behaviour. The goal is to get rid of these slots, but this is out of scope for now, see <mention class="mention" data-id="63906" data-type="work_package" data-text="#63906">#63906</mention>. This means, that some pages in OpenProject will not adapt properly, e.g
* the actionMenu filter button on the left on the new "My Time Tracking" page meetings pages
* the filter button on meetings pages the project list page
* the filter &quot;+ Section&quot; button on the admin / project list attributes page
* ~~If there are badges (notably on the 'Filter' tab) these will be displayed~~
* ~~The right-side actions (usually a solitary primary add "+ {Object} button) will remain in its full form. They will not go into icon-only mode.~~
# **Tasks**
* [x] Discuss this in a UX/UI Open Door so the update mobile behaviour is discussed and agreed upon (scheduled)
* [ ] Update LookBook docs (Parimal)
* [ ] Add code examples to LookBook docs (Henriette)
* [ ] Update component behaviour (Henriette)
# **Where it's relevant**
* Project list
* Notification center
* Meetings mobile subheader
* Members list
* Administration settings:
* Users and Permissions → Users
* Authentication → OAuth Applications
* Authentication → SAML providers
* Authentication → OpenID providers
* Files → External files storages
* ...
* Notification center
* My Time tracker
We're increasingly using the [Primer Sub Header](https://qa.openproject-edge.com/lookbook/pages/patterns/sub_header) component in different pages. This provides the user with a toolbar with additional actions related to the objets contained below. Most pages have a very limited number of elements on the sub header; they work just as well in mobile devices. In others, some Meetings index pages, there are too many and it all appears squished.
This feature seeks to define mobile behaviour at a component level in order to avoid case-by-base overrides as much as possible.
## **Why we need this**
**To avoid crowded/squished sub-headers like this in mobile:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:310px;" src="https://community.openproject.org/api/v3/attachments/264138/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:296px;" src="/api/v3/attachments/314831/content">
# **Acceptance criteria**
All the following AC are for the Primer SubHeader component
**Desktop**
* All buttons will be enforce to show an icon on desktop to which they can collapse to on mobile
**Mobile**
* All buttons turn into icon buttons without labels,
* and without trailing icons (eg. dropdown)
* This is for both the left- and the right-side buttons
* Segmented controls turn into icon-only options
* All segmented controls in a SubHeader items must have an icon specified (even in the desktop version, see first AC)
* The center text will:
* If left slot is empty: go to left side and truncate to available width
* If left slot is not empty: go to a new line and is left aligned
* Search bar behaves as before (it takes the full length when clicked)
* If there are no actions on the left side of the SubHeader and no text on desktop, this space will remain empty on mobile too
* All actions that do not have a visible label need a title or ARIA label for accessibilty
## **Out of scope**
* These adaptation don't take the upcoming quick filters into account:
* <mention class="mention" data-id="57964" data-type="work_package" data-text="###57964">###57964</mention>
* Currently, the component offers some free slots for the filter button.
* the actionMenu
* the filter button on meetings pages
* the filter
* ~~If there are badges (notably on the 'Filter' tab) these will be displayed~~
* ~~The right-side actions (usually a solitary primary add "+ {Object} button) will remain in its full form. They will not go into icon-only mode.~~
# **Tasks**
* [x] Discuss this in a UX/UI Open Door so the update mobile behaviour is discussed and agreed upon (scheduled)
* [ ] Update LookBook docs (Parimal)
* [ ] Add code examples to LookBook docs (Henriette)
* [ ] Update component behaviour (Henriette)
# **Where it's relevant**
* Project list
* Notification center
* Meetings mobile subheader
* Members list
* Administration settings:
* Users and Permissions → Users
* Authentication → OAuth Applications
* Authentication → SAML providers
* Authentication → OpenID providers
* Files → External files storages
* ...
* Notification center
* My Time tracker