Content
View differences
Updated by Henriette Darge about 4 years ago
The new date picker will get some style updates mostly with regards of structure and re-use of existing Design System components (text-field, buttons etc.
**Acceptance (images copied from the feature ticket)**
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32098/content"></div></figure>
* The modal has a new structure (scheduling (banner - scheduling mode - dates - calendar - action bar)
* The date picker for Milestones slightly differs as there is only one date field
* Scheduling mode
* The "Manual scheduling" checkbox is now in a new line by itself above the start/finish dates, and left-aligned.
* Date fields
* There are two fields that use the new text field components of equal width (Start date & Finish date)
* Each field has a "today" link underneath it.
* The start and finish dates field have "clear" buttons on focus that allow the user to clear that date (current behaviour).
* There is space left for where duration field will eventually go, but this is not displayed yet.
* On focus, the field is outlined in the primary colour blue (current style).
* Calendar
* Each mini calendar will show weekends differently in grey as it does today. However, this is purely visual and has no functional value in 12.2.
* The start and finish dates are have rounded corners:
* **Start date** on the left edge.
* **Finish date** on the right edge.
* **A one-day event** will have rounded corners on all edges (when start date == end date).
* Each calendar day can has multiple states depending on what kind of day it is:
* **When enabled:**
* Regular day (black text on a white background)
* Start date and finish dates (white text on a dark blue background)
* Selected but neither start/nor end (black text on a light blue background)
* Today (black on our standard current date yellow background)
* **When disabled:**
* Regular day (Gray 4 on a white background)
* Start date and finish dates (Gray 5 text on a light Gray 3 background)
* Selected but neither start/nor end (Gray 3 text on a Gray 5 background)
* Today (Gray 4 text on our standard current date yellow background)
* These colours do not change or adapt to themes or custom colours and are always these colours.
* Action bar
* There are two buttons at the bottom of the modal (cancel & save)
**The simple date picker**
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32104/content"></div></figure>
* is for single-day items (like Milestones) only single _date_ field.
* The only difference with the regular work package date picker is that the unique date field is titled "Date" (no notion of start or finish dates).
* The selected date is rounded on all corners.
**Mobile**
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32107/content"></div></figure>
* Is displayed in a modal that takes almost the full available screen width.
* **\[open\]** Can we set a single value for the outside margins (1.25 or 1.5 REM, needs testing) or do we need to condition this on breakpoints?
* There is only one mini calendar (vs the two in our non-mobile version).
* The simple version of the mobile date picker:
* Has a single date field titled simply "Date"
* that takes 100% of the available width
* Can only allow picking a single date in the calendar (rounded on all corners)
**Out of scope**
* Any kind of behavioural changes including:
* Real content for the banner
* Correct selection of dates
* Correct display of dates
* The banner (will be done completely in <mention class="mention" data-id="42184" data-type="work_package" data-text="#42184">#42184</mention> )
**Acceptance (images copied from the feature ticket)**
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32098/content"></div></figure>
* The modal has a new structure (scheduling
* The date picker for Milestones slightly differs as there is only one date field
* Scheduling mode
* The "Manual scheduling" checkbox is now in a new line by itself above the start/finish dates, and left-aligned.
* Date fields
* There are two fields that use the new text field components of equal width (Start date & Finish date)
* Each field has a "today" link underneath it.
* The start and finish dates field have "clear" buttons on focus that allow the user to clear that date (current behaviour).
* There is space left for where duration field will eventually go, but this is not displayed yet.
* On focus, the field is outlined in the primary colour
* Calendar
* Each mini calendar will show weekends differently in grey as it does today. However, this is purely visual and has no functional value in 12.2.
* The start and finish dates are have rounded corners:
* **Start date** on the left edge.
* **Finish date** on the right edge.
* **A one-day event** will have rounded corners on all edges (when start date == end date).
* Each calendar day can has multiple states depending on what kind of day it is:
* **When enabled:**
* Regular day (black text on a white background)
* Start date and finish dates (white text on a dark blue background)
* Selected but neither start/nor end (black text on a light blue background)
* Today (black on our standard current date yellow background)
* **When disabled:**
* Regular day (Gray 4 on a white background)
* Start date and finish dates (Gray 5 text on a light Gray 3 background)
* Selected but neither start/nor end (Gray 3 text on a Gray 5 background)
* Today (Gray 4 text on our standard current date yellow background)
* These colours do not change or adapt to themes or custom colours and are always these colours.
* Action bar
* There are two buttons at the bottom of the modal (cancel & save)
**The simple date picker**
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32104/content"></div></figure>
* is for single-day items (like Milestones) only single _date_ field.
* The only difference with the regular work package date picker is that the unique date field is titled "Date" (no notion of start or finish dates).
* The selected date is rounded on all corners.
**Mobile**
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32107/content"></div></figure>
* Is displayed in a modal that takes almost the full available screen width.
* **\[open\]** Can we set a single value for the outside margins (1.25 or 1.5 REM, needs testing) or do we need to condition this on breakpoints?
* There is only one mini calendar (vs the two in our non-mobile version).
* The simple version of the mobile date picker:
* Has a single date field titled simply "Date"
* that takes 100% of the available width
* Can only allow picking a single date in the calendar (rounded on all corners)
**Out of scope**
* Any kind of behavioural changes including:
* Real content for the banner
* Correct selection of dates
* Correct display of dates
* The banner (will be done completely in <mention class="mention" data-id="42184" data-type="work_package" data-text="#42184">#42184</mention> )