diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-09 23:54:05 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-09 23:54:05 +0300 |
commit | 600078cccf994ad6e4f9d5cd5192ac2b4da89856 (patch) | |
tree | 7e8197ef88cd1b5e9791dff9663b6820997a3252 /app | |
parent | 87c77718a483e372599562d3e5e10b000df74a30 (diff) | |
parent | 7c88141b958c372b8a787c1d724bd8e5bd66f024 (diff) |
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
Diffstat (limited to 'app')
-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 |
4 files changed, 34 insertions, 19 deletions
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 |