Unbox on-call schedule UI
Before adding scheduled overrides to on-call schedules, we need to make some clean-ups to the display of on-call schedules:
Before | After |
---|---|
Each of the items needing to be changed are numbered in the diagram below:
- Header section changes - increase the font size of page title to H1; change the "Add a schedule" button text to "Add schedule" and change the button variant to primary, small
- Move the edit/delete icon buttons into a three dot menu. Move the expand/collapse caret next to it (rather than next to the schedule title)
- Update the header section of the schedule to include the schedule title (now, h2/04 base size), schedule description, and timezone
- Switch the background colors of the header and "body" sections of the schedule. The body is now neutral grey-200 and the header, white.
- Rotations text size increased to H3
- Move the date to a new row beneath the
Rotations
text - Time range picker - change the split button into a dropdown, small variant. Change the one day option to, hourly. When hourly is selected, change
Date
text toHour
- Move the forward/backward buttons here, and use the small button variant.
- Have a full row to display the dates (or hours), and have text clarify which view is selected
Date
orHour
- For rotation timeline:
- changing the background to grey
- removing the border outside the timeline and within the dates indicators
- changing date format, font colours and weight for date indicators
- adding separator between the weeks
- rounding the assignees indicators on timeline and aligning their avatar + name to the left
The following changes will be move to the follow-up issue due to a needed rewrite (see comment):
- Move the edit/delete buttons into a three dot menu. Remove the box around the rotation name. Instead, a scrim line appears when the rotation is scrolled forward (you can see an example of that scrim line on the far right of the rotation example).
- Display scrim line when there is additional, cut-off content, as an indicator that additional content is present.
Implementation Guide
- Look in https://gitlab.com/gitlab-org/gitlab/-/tree/master/ee/app/assets/javascripts/oncall_schedules & as a starting place for code changes
- Styling comes from https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/page_bundles/oncall_schedules.scss & gitlab-ui
Edited by Paulina Sedlak-Jakubowska