Add MemberExpirationDate JS helper

This helper adds a datepicker to all `js-access-expiration-date`
elements. If that element is a child of a `clearable-input` element and
has a sibling `js-clear-input` element, then it will show a working
clear button to the right of the input field.
This commit is contained in:
Sean McGivern 2016-08-18 14:12:48 +01:00
parent d649370ac1
commit 21a73302e8
4 changed files with 32 additions and 3 deletions

View file

@ -8,6 +8,8 @@
$('.js-access-expiration-date').each(function(i, element) { $('.js-access-expiration-date').each(function(i, element) {
var expirationDateInput = $(element); var expirationDateInput = $(element);
if (expirationDateInput.hasClass('hasDatepicker')) { return; }
function toggleClearInput() { function toggleClearInput() {
expirationDateInput.parent().toggleClass('has-value', !!expirationDateInput.val()); expirationDateInput.parent().toggleClass('has-value', !!expirationDateInput.val());
} }

View file

@ -714,3 +714,29 @@ pre.light-well {
width: 300px; width: 300px;
} }
} }
.clearable-input {
position: relative;
.clear-icon {
@extend .fa-times;
display: none;
position: absolute;
right: 7px;
top: 7px;
color: $location-icon-color;
&:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
}
}
&.has-value {
.clear-icon {
cursor: pointer;
display: block;
}
}
}

View file

@ -1,2 +1,3 @@
:plain :plain
$("##{dom_id(@project_member)}").replaceWith('#{escape_javascript(render('shared/members/member', member: @project_member))}'); $("##{dom_id(@project_member)}").replaceWith('#{escape_javascript(render('shared/members/member', member: @project_member))}');
new MemberExpirationDate();

View file

@ -79,12 +79,12 @@
%br %br
= form_for member, remote: true, html: { class: 'form-horizontal' } do |f| = form_for member, remote: true, html: { class: 'form-horizontal' } do |f|
.form-group .form-group
= label_tag :expires_at, 'Project access', class: 'control-label' = label_tag "member_access_level_#{member.id}", 'Project access', class: 'control-label'
.col-sm-10 .col-sm-10
= f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control' = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control', id: "member_access_level_#{member.id}"
- if member.is_a?(ProjectMember) - if member.is_a?(ProjectMember)
.form-group .form-group
= label_tag :expires_at, 'Access expiration date', class: 'control-label' = label_tag "member_expires_at_#{member.id}", 'Access expiration date', class: 'control-label'
.col-sm-10 .col-sm-10
.clearable-input .clearable-input
= f.text_field :expires_at, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date', id: "member_expires_at_#{member.id}" = f.text_field :expires_at, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date', id: "member_expires_at_#{member.id}"