From 9881ff38ee8aa61392e9601b9e1f62c274a685b1 Mon Sep 17 00:00:00 2001
From: Jure Grabnar <jgrabnar@biosistemika.com>
Date: Wed, 27 Mar 2019 13:15:44 +0100
Subject: [PATCH] Add color to HOT buttons

---
 app/assets/javascripts/global_activities/side_pane.js | 11 +++++++++++
 app/assets/stylesheets/constants.scss                 |  1 +
 app/assets/stylesheets/global_activities.scss         |  5 +++++
 3 files changed, 17 insertions(+)

diff --git a/app/assets/javascripts/global_activities/side_pane.js b/app/assets/javascripts/global_activities/side_pane.js
index 4d6baef3a..77099c252 100644
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@@ -152,6 +152,12 @@ $(function() {
     return true;
   }
 
+  function resetHotButtonsBackgroundColor() {
+    $('.date-selector .hot-button').each(function() {
+      $(this).removeClass('selected');
+    })
+  }
+
   // Common selection intialize
   $.each(selectors, (index, e) => {
     $('.ga-side .' + e + '-selector select').select2Multiple({ singleDisplay: true })
@@ -196,6 +202,7 @@ $(function() {
       GlobalActivitiesUpdateTopPaneTags();
       reloadActivities();
     }
+    resetHotButtonsBackgroundColor();
   });
 
   $('#calendar-from-date').on('dp.change', function(e) {
@@ -206,6 +213,7 @@ $(function() {
       GlobalActivitiesUpdateTopPaneTags();
       reloadActivities();
     }
+    resetHotButtonsBackgroundColor();
   });
 
   GlobalActivitiesUpdateTopPaneTags();
@@ -248,5 +256,8 @@ $(function() {
     dateContainer[0].dataset.periodSelect = this.innerHTML;
     GlobalActivitiesUpdateTopPaneTags();
     reloadActivities();
+
+    resetHotButtonsBackgroundColor();
+    $(this).addClass('selected');
   });
 });
diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss
index 835dca148..9b6cd3ab2 100644
--- a/app/assets/stylesheets/constants.scss
+++ b/app/assets/stylesheets/constants.scss
@@ -29,6 +29,7 @@ $brand-primary-light: #dcedf6;
 $brand-success-light: #e2eed8;
 $brand-warning-light: #fcf7e4;
 $brand-danger-light: #efdfdf;
+$brand-light-blue: #e3f1f9;
 
 
 //==============================================================================
diff --git a/app/assets/stylesheets/global_activities.scss b/app/assets/stylesheets/global_activities.scss
index 166493c2c..d2121bdd8 100644
--- a/app/assets/stylesheets/global_activities.scss
+++ b/app/assets/stylesheets/global_activities.scss
@@ -128,6 +128,11 @@
         text-align: left;
         width: calc(50% - 25px);
 
+        &.selected {
+          background: $brand-light-blue;
+          opacity: 1;
+        }
+
         &:nth-child(even) {
           margin-left: 20px;
         }