From 49087027b250a8ce1212d508e1c9028f5122a09e Mon Sep 17 00:00:00 2001
From: Sarah Vaupel <vaupel.sarah@campus.lmu.de>
Date: Thu, 28 Nov 2019 15:44:53 +0100
Subject: [PATCH] feat(hide-columns): more styling

---
 .../src/utils/hide-columns/hide-columns.js    | 28 ++++++++++---------
 .../src/utils/hide-columns/hide-columns.scss  | 15 +++++++++-
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js
index 0cf01df51..976c24622 100644
--- a/frontend/src/utils/hide-columns/hide-columns.js
+++ b/frontend/src/utils/hide-columns/hide-columns.js
@@ -9,10 +9,9 @@ const TABLE_UTILS_ATTR = 'table-utils';
 const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`;
 
 const TABLE_HIDER_CONTAINER_CLASS = 'table-hiders';
+const TABLE_HIDER_CLASS = 'table-hider';
 
-const HIDER_HIDE_CLASS = 'table-pill--hide';
-const HIDER_HIDDEN_CLASS = 'table-pill--hidden';
-const HIDER_FLOATING_CLASS = 'table-pill--floating';
+const HIDER_POPUP_CLASS = 'table-hider--visible';
 
 const CELL_HIDDEN_CLASS = 'hide-columns--hidden-cell';
 
@@ -86,7 +85,7 @@ export class HideColumns {
     const hR  = hider.getBoundingClientRect();
     const pR  = this._tableHiderContainer.getBoundingClientRect();
     hider.style.left = (thR.left + thR.width/2 - hR.width/2 - pR.left) + 'px';
-    hider.style.top  = (thR.top - pR.top + 5) + 'px';
+    hider.style.top  = (thR.top - pR.top + 5 +50) + 'px';
   }
 
   setupHideButton(th, prevHidden) {
@@ -106,22 +105,24 @@ export class HideColumns {
       this.switchColumnDisplay(th, hider);
     });
 
-    // TODO fade in / fade out animation in css
     th.addEventListener('mouseover', () => {
-      // hider.classList.remove(HIDER_HIDDEN_CLASS);
+      hider.classList.add(HIDER_POPUP_CLASS);
     });
-    th.addEventListener('mouseout', (event) => {
-      console.log('th mouseout', event);
-      if (hider.classList.contains(HIDER_FLOATING_CLASS)) {
-        hider.classList.add(HIDER_HIDE_CLASS);
+    th.addEventListener('mouseout', () => {
+      if (hider.classList.contains(TABLE_HIDER_CLASS)) {
+        hider.classList.remove(HIDER_POPUP_CLASS);
       }
     });
 
     hider.addEventListener('mouseover', () => {
+      hider.classList.add(HIDER_POPUP_CLASS);
       const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
       this.updateHiderIcon(hider, !currentlyHidden);
     });
     hider.addEventListener('mouseout', () => {
+      if (hider.classList.contains(TABLE_HIDER_CLASS)) {
+        hider.classList.remove(HIDER_POPUP_CLASS);
+      }
       const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
       this.updateHiderIcon(hider, currentlyHidden);
     });
@@ -165,12 +166,13 @@ export class HideColumns {
   updateHider(hider, hidden) {
     if (hidden) {
       this._tableUtilContainer.appendChild(hider);
-      hider.classList.remove(HIDER_HIDDEN_CLASS, HIDER_FLOATING_CLASS, 'table-hider');
+      hider.classList.remove(TABLE_HIDER_CLASS);
       hider.classList.add('table-pill');
     } else {
-
+      this.hideHiderBehindHeader(hider);
+      this._tableHiderContainer.appendChild(hider);
       hider.classList.remove('table-pill');
-      hider.classList.add(HIDER_HIDDEN_CLASS, HIDER_FLOATING_CLASS, 'table-hider');
+      hider.classList.add(TABLE_HIDER_CLASS);
     }
     this.updateHiderIcon(hider, hidden);
   }
diff --git a/frontend/src/utils/hide-columns/hide-columns.scss b/frontend/src/utils/hide-columns/hide-columns.scss
index a2e9ed957..070ff88d7 100644
--- a/frontend/src/utils/hide-columns/hide-columns.scss
+++ b/frontend/src/utils/hide-columns/hide-columns.scss
@@ -5,14 +5,27 @@
   .table-hider {
     background-color: #fff;
     color: var(--color-link);
-    padding: 10px;
+    padding: 0 10px;
+    height: 0;
     cursor: pointer;
     box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
     position: absolute;
+    overflow: hidden;
+    transition: .3s;
+
+    &:hover {
+      background-color: var(--color-grey-light);
+    }
 
     .table-hider__label {
       display: none;
     }
+
+    &.table-hider--visible {
+      display: flex;
+      padding: 10px;
+      height: auto;
+    }
   }
 }