Commit 600078cc authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'due-date-field-ux-improv' into 'master'

Improved the UX of issue & milestone date picker

## What does this MR do?

Improves the UX of the date picker on issue form & milestone form.

## What are the relevant issue numbers?

Closes #18198 

## Screenshots (if relevant)

### Issues

![Screen_Shot_2016-06-06_at_09.28.29](/uploads/d9c192dff0d8076adc3ed6f005ea3790/Screen_Shot_2016-06-06_at_09.28.29.png)

### Project milestones

![Screen_Shot_2016-06-06_at_09.28.18](/uploads/2d03d72791c5fc6badfadb975a85af2b/Screen_Shot_2016-06-06_at_09.28.18.png)

### Group milestones

![Screen_Shot_2016-06-06_at_09.28.05](/uploads/0f28532396a16e6fd48ddea784ca28e3/Screen_Shot_2016-06-06_at_09.28.05.png)

See merge request !4485
parents 87c77718 7c88141b
......@@ -57,6 +57,7 @@ v 8.9.0 (unreleased)
- External links now open in a new tab
- Markdown editor now correctly resets the input value on edit cancellation !4175
- Toggling a task list item in a issue/mr description does not creates a Todo for mentions
- Improved UX of date pickers on issue & milestone forms
v 8.8.4 (unreleased)
- Ensure branch cleanup regardless of whether the GitHub import process succeeds
......
......@@ -2,6 +2,7 @@
font-family: $regular_font;
font-size: $font-size-base;
&.ui-datepicker,
&.ui-datepicker-inline {
border: 1px solid #ddd;
padding: 10px;
......@@ -10,6 +11,25 @@
.ui-datepicker-header {
background: #fff;
border-color: #ddd;
.ui-datepicker-prev,
.ui-datepicker-next {
top: 4px;
}
.ui-datepicker-prev {
left: 2px;
}
.ui-datepicker-next {
right: 2px;
}
.ui-state-hover {
background: transparent;
border: 0;
cursor: pointer;
}
}
.ui-datepicker-calendar td a {
......@@ -36,21 +56,18 @@
}
.ui-state-highlight {
border: 1px solid #eee;
background: #eee;
border: 0;
background: transparent;
}
.ui-state-active {
.ui-datepicker-calendar {
.ui-state-active,
.ui-state-hover,
.ui-state-focus {
border: 1px solid $gl-primary;
background: $gl-primary;
color: #fff;
}
.ui-state-hover,
.ui-state-focus {
border: 1px solid $row-hover;
background: $row-hover;
color: #333;
}
}
......
......@@ -39,9 +39,8 @@
.col-md-6
.form-group
= f.label :due_date, "Due Date", class: "control-label"
.col-sm-10= f.hidden_field :due_date
.col-sm-10
.datepicker
= f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
.form-actions
= f.submit 'Create Milestone', class: "btn-create btn"
......
......@@ -17,9 +17,8 @@
.col-md-6
.form-group
= f.label :due_date, "Due Date", class: "control-label"
.col-sm-10= f.hidden_field :due_date
.col-sm-10
.datepicker
= f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
.form-actions
- if @milestone.new_record?
......
......@@ -88,9 +88,9 @@
.col-lg-6
.form-group
= f.label :due_date, "Due date", class: "control-label"
= f.hidden_field :due_date, id: "issuable-due-date"
.col-sm-10
.datepicker
.issuable-form-select-holder
= f.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
- if issuable.can_move?(current_user)
%hr
......
......@@ -75,12 +75,13 @@ describe 'Issues', feature: true do
fill_in 'issue_title', with: 'bug 345'
fill_in 'issue_description', with: 'bug description'
find('#issuable-due-date').click
page.within '.datepicker' do
page.within '.ui-datepicker' do
click_link date.day
end
expect(find('#issuable-due-date', visible: false).value).to eq date.to_s
expect(find('#issuable-due-date').value).to eq date.to_s
click_button 'Submit issue'
......@@ -100,18 +101,19 @@ describe 'Issues', feature: true do
it 'should save with due date' do
date = Date.today.at_beginning_of_month
expect(find('#issuable-due-date', visible: false).value).to eq date.to_s
expect(find('#issuable-due-date').value).to eq date.to_s
date = date.tomorrow
fill_in 'issue_title', with: 'bug 345'
fill_in 'issue_description', with: 'bug description'
find('#issuable-due-date').click
page.within '.datepicker' do
page.within '.ui-datepicker' do
click_link date.day
end
expect(find('#issuable-due-date', visible: false).value).to eq date.to_s
expect(find('#issuable-due-date').value).to eq date.to_s
click_button 'Save changes'
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment