Content
View differences
Updated by Parimal Satyal about 4 years ago
This sub-feature is part of the epic related to the duration feature (<mention class="mention" data-id="31992" data-type="work_package" data-text="#31992">#31992</mention>) and describes the functioning of the new date picker.
<figure class="image op-uc-figure" style="width:75%;"><div style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29232/content"></div></figure>
### **Acceptance criteria**
Clicking on a date field displays the date picker drop modal:
#### Note on Simple Date Picker Open Questions
* This date picker is only Only for work packages. There will also be a "simple" packages? What about: meetings, elsewhere where we have date picker with only a single _date_ field and a single calendar. A work package describing this will come shortly, but a preview exists: pickers.
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29307/content"></div><figcaption class="op-uc-figure--description">Simple date picker, not described in this work package</figcaption></figure>
#### Overview
The date picker consists of these sections (see [Anatomy](https://community.openproject.org/#anatomy) below for design anatomy), each of which is described in more detail below:
* **An information/warning banner**
* **Scheduling option selection**
* **Start date, finish date and duration input**
* **The two-month mini-calendar**
* **Action bar (with the option to include non-working days)**
#### Warning/Information Banner
We use this banner to inform or warn the user when there is information contextual information.
* There can be two types of banners:
* An **information banner** has a blue background and is purely informational, to give the user additional context they might otherwise miss
* A **warning banner** has an orange background and indicates that changes to this work package may have destructive or unintended consequences (affect the dates/scheduling of other work packages)
* It consists of:
* an icon
* two-line message, the first in bold
* a "GANTT preview" button that, when clicked, opens up a GANTT preview in a new window that allows the user to view relations affecting this work package
* **\[to do\]** Define GANTT Preview in a separate work package. In a new window with a filter that shows all affected work packages in GANTT (and a filtered table view).
* There are four identified cases in which this banner is displayed:
* Information: The dates are automatically derived from relations (and date input is disabled in regular mode)
* Warning: Manual scheduling is enabled so all existing work package relations are ignored.
* Information: Changing the dates of this work package will affect the total project duration.
* Warning: Changing the dates of this work package will change the dates of related work packages
#### Regular/Manual Scheduling
* There are two modes
* **Regular** is the default scheduling mode where relations and project constraints are taken into account.
* **Manual** ignores work package relations and project constraints and functions as it does today when "manual scheduling" is checked.
* A helper icon in the label will display a tooltip with this text on hover :
* "Regular scheduling takes relations and project constraints into consideration, manual will ignore them."
#### Start Date, Finish Date and Duration
* There are three fields that use the new text field components:
* Start date
* Finish date
* Duration (new element)
* The format follows for dates in English is "Wed 18.11.2021" (or "Wed 11.18.2021" in US format)
* **\[open\]** We right now follow the system setting or locale style. style
* On focus, the field is outlined in blue (focus style).
* The focus on the field also determines what is selected when the user clicks on a day in the calendar (i.e, clicking on the the start date field and then clicking on a date sets that date to the start date)
* The format for duration is "4 days".
* On focus, the field is outlined in blue (focus style).
* When editing the duration, the unit is ignored. In other words, the unit disappears on focus to leave only the numerical value, and is added again on unfocus.
* The user may input either "4" or "4 days"; both should be valid.
* **\[open\]** How does this change with other languages?
#### The two-month mini-calendar
The mini calendar allows the user to select start and end dates:
* Two months are displays (current and next month)
* Clicking on backwards/forwards advances the calendar by a single month (eg. clicking on "forward" displays displays on the first calendar the month that was previously in the second calendar).
* By default, non-working days are non-selectable (this includes non-selectable.
* **\[open\]** non-working days vs current weekends and custom non-working days) display
* 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 neutral white background)
* Non-working day (_Gray#6_ text on a _Gray#3_ background)
* Start date and finish dates (white text on a _Main_ dark blue background)
* Selected but neither start/nor end (black text on a light blue _feedback/info/light_ background)
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* Regular day (_gray#3_ text on a neutral white background)
* Non-working day (_gray #4_ text on a _gray#3_ background)
* Start date (_gray#3_ text on a _gray#5_ background)
* Selected but neither start/nor end (_gray#4_ text on a _gray#5_ background)
* In the selected range but a non-working day (_gray#6_ on a _gray#4_ background)
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29238/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are enabled/clickable</figcaption></figure>
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29239/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are disabled/non-clickable</figcaption></figure>
#### Action bar with "include non-working days" option
* The action bar has three actions:
* **Include non-working days checkbox**, which turns non-working days into regular days (and therefore including them even when finish date is derived using duration)
* **Cancel button** (outlined/main), discards changes
* **Apply button** (filled/main), applies changes
### Anatomy
The date picker is built out of several components already described in our design system, and some new ones.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29233/content"></div></figure>
### Visuals
**Regular scheduling, working days only (default):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28357/content"></div></figure>
**Regular scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28358/content"></div></figure>
**Manual scheduling, working days only:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28359/content"></div></figure>
**Manual scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29305/content"></div></figure> src="/api/v3/attachments/28360/content"></div></figure>
**Automatically scheduled, modification blocked with info banner**
_Info banner: Dates are derived from relations:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29306/content"></div></figure> src="/api/v3/attachments/28361/content"></div></figure>
**Manual scheduling with warning banner**
_Warning banner: relations are ignored:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28362/content"></div></figure>
**Regular scheduling with info banner**
_Info banner: Changing dates will affect project duration:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28363/content"></div></figure>
**Regular scheduling with warning banner**
_Warning banner: Changing dates will affect dates of related packages (following or preceeding):_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28364/content"></div></figure>
### Figma prototypes
All states of the date picker and mini calendar are illustrated in the Figma prototype, along with the scenarios described [in the duration epic](https://community.openproject.org/projects/openproject/work_packages/31992/activity):
[https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447)
<figure class="image op-uc-figure" style="width:75%;"><div
### **Acceptance criteria**
Clicking on a date field displays the date picker drop modal:
#### Note on Simple Date Picker
* This date picker is only
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29307/content"></div><figcaption class="op-uc-figure--description">Simple date picker, not described in this work package</figcaption></figure>
#### Overview
The date picker consists of these sections (see [Anatomy](https://community.openproject.org/#anatomy) below for design anatomy), each of which is described in more detail below:
* **An information/warning banner**
* **Scheduling option selection**
* **Start date, finish date and duration input**
* **The two-month mini-calendar**
* **Action bar (with the option to include non-working days)**
#### Warning/Information Banner
We use this banner to inform or warn the user when there is information contextual information.
* There can be two types of banners:
* An **information banner** has a blue background and is purely informational, to give the user additional context they might otherwise miss
* A **warning banner** has an orange background and indicates that changes to this work package may have destructive or unintended consequences (affect the dates/scheduling of other work packages)
* It consists of:
* an icon
* two-line message, the first in bold
* a "GANTT preview" button that, when clicked, opens up a GANTT preview in a new window that allows the user to view relations affecting this work package
* **\[to do\]** Define GANTT Preview in a separate work package. In a new window with a filter that shows all affected work packages in GANTT (and a filtered table view).
* There are four identified cases in which this banner is displayed:
* Information: The dates are automatically derived from relations (and date input is disabled in regular mode)
* Warning: Manual scheduling is enabled so all existing work package relations are ignored.
* Information: Changing the dates of this work package will affect the total project duration.
* Warning: Changing the dates of this work package will change the dates of related work packages
#### Regular/Manual Scheduling
* There are two modes
* **Regular** is the default scheduling mode where relations and project constraints are taken into account.
* **Manual** ignores work package relations and project constraints and functions as it does today when "manual scheduling" is checked.
* A helper icon in the label will display a tooltip with this text on hover :
* "Regular scheduling takes relations and project constraints into consideration, manual will ignore them."
#### Start Date, Finish Date and Duration
* There are three fields that use the new text field components:
* Start date
* Finish date
* Duration (new element)
* The format follows
* **\[open\]** We right now follow
* On focus, the field is outlined in blue (focus style).
* The focus on the field also determines what is selected when the user clicks on a day in the calendar (i.e, clicking on the the start date field and then clicking on a date sets that date to the start date)
* The format for duration is "4 days".
* On focus, the field is outlined in blue (focus style).
* When editing the duration, the unit is ignored. In other words, the unit disappears on focus to leave only the numerical value, and is added again on unfocus.
* The user may input either "4" or "4 days"; both should be valid.
* **\[open\]** How does this change with other languages?
#### The two-month mini-calendar
The mini calendar allows the user to select start and end dates:
* Two months are displays (current and next month)
* Clicking on backwards/forwards advances the calendar by a single month (eg. clicking on "forward" displays displays on the first calendar the month that was previously in the second calendar).
* By default, non-working days are non-selectable (this includes
* **\[open\]** non-working days vs current
* 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 neutral white background)
* Non-working day (_Gray#6_ text on a _Gray#3_ background)
* Start date and finish dates (white text on a _Main_ dark blue background)
* Selected but neither start/nor end (black text on a light blue _feedback/info/light_ background)
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* Regular day (_gray#3_ text on a neutral white background)
* Non-working day (_gray #4_ text on a _gray#3_ background)
* Start date (_gray#3_ text on a _gray#5_ background)
* Selected but neither start/nor end (_gray#4_ text on a _gray#5_ background)
* In the selected range but a non-working day (_gray#6_ on a _gray#4_ background)
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29238/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are enabled/clickable</figcaption></figure>
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29239/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are disabled/non-clickable</figcaption></figure>
#### Action bar with "include non-working days" option
* The action bar has three actions:
* **Include non-working days checkbox**, which turns non-working days into regular days (and therefore including them even when finish date is derived using duration)
* **Cancel button** (outlined/main), discards changes
* **Apply button** (filled/main), applies changes
### Anatomy
The date picker is built out of several components already described in our design system, and some new ones.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29233/content"></div></figure>
### Visuals
**Regular scheduling, working days only (default):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28357/content"></div></figure>
**Regular scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28358/content"></div></figure>
**Manual scheduling, working days only:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28359/content"></div></figure>
**Manual scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29305/content"></div></figure>
**Automatically scheduled, modification blocked with info banner**
_Info banner: Dates are derived from relations:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29306/content"></div></figure>
**Manual scheduling with warning banner**
_Warning banner: relations are ignored:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28362/content"></div></figure>
**Regular scheduling with info banner**
_Info banner: Changing dates will affect project duration:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28363/content"></div></figure>
**Regular scheduling with warning banner**
_Warning banner: Changing dates will affect dates of related packages (following or preceeding):_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/28364/content"></div></figure>
### Figma prototypes
All states of the date picker and mini calendar are illustrated in the Figma prototype, along with the scenarios described [in the duration epic](https://community.openproject.org/projects/openproject/work_packages/31992/activity):
[https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447)