diff options
-rw-r--r-- | CHANGELOG | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/jquery.scss | 43 | ||||
-rw-r--r-- | app/views/groups/milestones/new.html.haml | 3 | ||||
-rw-r--r-- | app/views/projects/milestones/_form.html.haml | 3 | ||||
-rw-r--r-- | app/views/shared/issuable/_form.html.haml | 4 | ||||
-rw-r--r-- | spec/features/issues_spec.rb | 12 |
6 files changed, 42 insertions, 24 deletions
diff --git a/CHANGELOG b/CHANGELOG index 2be7f1568a0..618e7103fa3 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -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 diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss index 525ed81b059..30a5b837d69 100644 --- a/app/assets/stylesheets/framework/jquery.scss +++ b/app/assets/stylesheets/framework/jquery.scss @@ -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 { - 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; + .ui-datepicker-calendar { + .ui-state-active, + .ui-state-hover, + .ui-state-focus { + border: 1px solid $gl-primary; + background: $gl-primary; + color: #fff; + } } } diff --git a/app/views/groups/milestones/new.html.haml b/app/views/groups/milestones/new.html.haml index 7d9d27ae1fc..ca6c4326d1c 100644 --- a/app/views/groups/milestones/new.html.haml +++ b/app/views/groups/milestones/new.html.haml @@ -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" diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml index 687222fa92f..f5e2b927da8 100644 --- a/app/views/projects/milestones/_form.html.haml +++ b/app/views/projects/milestones/_form.html.haml @@ -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? diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml index b430251dbf6..17e2a7e9290 100644 --- a/app/views/shared/issuable/_form.html.haml +++ b/app/views/shared/issuable/_form.html.haml @@ -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 diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb index 460d7f82b36..f6fb6a72d22 100644 --- a/spec/features/issues_spec.rb +++ b/spec/features/issues_spec.rb @@ -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' |