From 03123c34f80128f5f7d2794eee8f71d7780b10a7 Mon Sep 17 00:00:00 2001
From: Anton Ignatov <aignatov@biosistemika.com>
Date: Wed, 27 Mar 2019 14:39:29 +0100
Subject: [PATCH] adding date placeholder

---
 .../javascripts/global_activities/side_pane.js      |  3 ++-
 app/assets/stylesheets/global_activities.scss       | 13 ++++++++++++-
 app/assets/stylesheets/select2_customizations.scss  |  4 ++++
 app/views/global_activities/_date_picker.html.erb   |  2 +-
 app/views/global_activities/_side_filters.html.erb  |  4 ++--
 config/locales/global_activities/en.yml             |  4 ++--
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/global_activities/side_pane.js b/app/assets/javascripts/global_activities/side_pane.js
index 94287481a..4d6baef3a 100644
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@@ -95,7 +95,7 @@ $(function() {
     var dateContainer = $('.ga-side .date-selector.filter-block');
     if (updateRunning) return false;
     $('.ga-top .ga-tags').children().remove();
-    if (dateContainer[0].dataset.periodSelect) {
+    if (dateContainer[0].dataset.periodSelect && dateContainer[0].dataset.periodSelect !== 'null') {
       $('<li class="select2-selection__choice">'
           + dateContainer[0].dataset.periodLabel
           + $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect
@@ -182,6 +182,7 @@ $(function() {
     $('.ga-side .subject-selector select').select2MultipleClearAll();
     $('#calendar-from-date').data('DateTimePicker').clear();
     $('#calendar-to-date').data('DateTimePicker').clear();
+    $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = null;
     updateRunning = false;
     GlobalActivitiesUpdateTopPaneTags();
     reloadActivities();
diff --git a/app/assets/stylesheets/global_activities.scss b/app/assets/stylesheets/global_activities.scss
index bf496ffdc..166493c2c 100644
--- a/app/assets/stylesheets/global_activities.scss
+++ b/app/assets/stylesheets/global_activities.scss
@@ -151,7 +151,6 @@
       float: left;
       height: 2px;
       margin: 16px 10px;
-      margin-top: 38px;
       position: relative;
       width: 10px;
     }
@@ -299,4 +298,16 @@
 
 .datetime-picker-container {
   position: relative;
+
+  input {
+    background-color: transparent !important;
+    box-shadow: none;
+    color: inherit;
+    font-size: 13px;
+    padding-left: 5px;
+
+    &::placeholder{
+      color: $color-silver-chalice;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/select2_customizations.scss b/app/assets/stylesheets/select2_customizations.scss
index 2953fb615..9b1d854ec 100644
--- a/app/assets/stylesheets/select2_customizations.scss
+++ b/app/assets/stylesheets/select2_customizations.scss
@@ -18,6 +18,10 @@
 
     .select2-search__field {
       min-width: 150px;
+
+      &::placeholder{
+        color: $color-silver-chalice;
+      }
     }
 
     .select2-selection__choice {
diff --git a/app/views/global_activities/_date_picker.html.erb b/app/views/global_activities/_date_picker.html.erb
index 7f86017d0..22219b068 100644
--- a/app/views/global_activities/_date_picker.html.erb
+++ b/app/views/global_activities/_date_picker.html.erb
@@ -2,7 +2,7 @@
   <% if label %>
     <label class="control-label required" for="calendar-<%= id %>"><%= label %></label>
   <% end %>
-  <input type="datetime" class="form-control" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" />
+  <input type="datetime" class="form-control" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" />
   <%
     js_format = I18n.backend.date_format.dup
       js_format.gsub!(/%-d/, 'D')
diff --git a/app/views/global_activities/_side_filters.html.erb b/app/views/global_activities/_side_filters.html.erb
index abd7faa65..66d73bd3d 100644
--- a/app/views/global_activities/_side_filters.html.erb
+++ b/app/views/global_activities/_side_filters.html.erb
@@ -31,11 +31,11 @@
       <%= t('global_activities.index.custom_dates_label') %>
     </h4>
     <div class="to">
-      <%= render partial: "date_picker", locals: { id: 'to-date', use_current: 'false', label: t('global_activities.index.to_label') } %>
+      <%= render partial: "date_picker", locals: { id: 'to-date', use_current: 'false', placeholder: t('global_activities.index.to_label'), label: nil } %>
     </div>
     <div class="separator"></div>
     <div class="from">
-      <%= render partial: "date_picker", locals: { id: 'from-date', use_current: 'true', label: t('global_activities.index.from_label') } %>
+      <%= render partial: "date_picker", locals: { id: 'from-date', use_current: 'true', placeholder: t('global_activities.index.from_label'), label: nil } %>
     </div>
   </div>
 </div>
diff --git a/config/locales/global_activities/en.yml b/config/locales/global_activities/en.yml
index a068fb030..8b3434a7d 100644
--- a/config/locales/global_activities/en.yml
+++ b/config/locales/global_activities/en.yml
@@ -11,8 +11,8 @@ en:
       this_month: "This month"
       last_month: "Last month"
       custom_dates_label: "Select custom dates"
-      from_label: "End date"
-      to_label: "Start date"
+      from_label: "Select end date"
+      to_label: "Select start date"
       clear: "clear"
       activity_type: "Activity type"
       user: "User"