From 21a73302e8a8b9f22e51f1707a306f04d3faad07 Mon Sep 17 00:00:00 2001
From: Sean McGivern <sean@gitlab.com>
Date: Thu, 18 Aug 2016 14:12:48 +0100
Subject: [PATCH] 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.
---
.../javascripts/member_expiration_date.js | 2 ++
app/assets/stylesheets/pages/projects.scss | 26 +++++++++++++++++++
.../projects/project_members/update.js.haml | 1 +
app/views/shared/members/_member.html.haml | 6 ++---
4 files changed, 32 insertions(+), 3 deletions(-)
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
index fdcf3b115b7..93c34d5ccd7 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -8,6 +8,8 @@
$('.js-access-expiration-date').each(function(i, element) {
var expirationDateInput = $(element);
+ if (expirationDateInput.hasClass('hasDatepicker')) { return; }
+
function toggleClearInput() {
expirationDateInput.parent().toggleClass('has-value', !!expirationDateInput.val());
}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4409477916f..abda079ad4c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -714,3 +714,29 @@ pre.light-well {
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;
+ }
+ }
+}
diff --git a/app/views/projects/project_members/update.js.haml b/app/views/projects/project_members/update.js.haml
index 45f8ef89060..833954bc039 100644
--- a/app/views/projects/project_members/update.js.haml
+++ b/app/views/projects/project_members/update.js.haml
@@ -1,2 +1,3 @@
:plain
$("##{dom_id(@project_member)}").replaceWith('#{escape_javascript(render('shared/members/member', member: @project_member))}');
+ new MemberExpirationDate();
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index c959c41b221..1c081bcdc17 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -79,12 +79,12 @@
%br
= form_for member, remote: true, html: { class: 'form-horizontal' } do |f|
.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
- = 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)
.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
.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}"
--
GitLab