feat(hide-columns): styling stub with repositioning

frontend/src/utils/hide-columns/hide-columns.js

@@ -1,5 +1,6 @@
 import { Utility } from '../../core/utility';
 import { StorageManager } from '../../lib/storage-manager/storage-manager';
+import './hide-columns.scss';
 
 const HIDE_COLUMNS_CONTAINER_IDENT = 'uw-hide-columns';
 const TABLE_HEADER_IDENT = 'uw-hide-column-header';
@@ -7,8 +8,6 @@ const TABLE_HEADER_IDENT = 'uw-hide-column-header';
 const TABLE_UTILS_ATTR = 'table-utils';
 const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`;
 
-const HIDER_TEXT_ATTR = 'header-text';
-
 const HIDE_BUTTON_FADE_DELAY = 3000;
 
 @Utility({
@@ -22,6 +21,14 @@ export class HideColumns {
   _elementWrapper;
   _tableUtilContainer;
 
+  headerToHider = new Map();
+  hiderToHeader = new Map();
+
+  addHeaderHider(th, hider) {
+    this.headerToHider.set(th, hider);
+    this.hiderToHeader.set(hider, th);
+  }
+
   constructor(element) {
     if (!element) {
       throw new Error('Hide Columns utility cannot be setup without an element!');
@@ -58,7 +65,14 @@ export class HideColumns {
 
   setupHideButton(th, prevHidden) {
     const hider = document.createElement('span');
-    hider.setAttribute(HIDER_TEXT_ATTR, th.innerText);
+    hider.classList.add('table-pill');
+    const hiderIcon = document.createElement('i');
+    hiderIcon.classList.add('fas', 'fa-fw');
+    hider.appendChild(hiderIcon);
+    const hiderContent = document.createElement('span');
+    hiderContent.classList.add('table-pill__content');
+    hiderContent.innerHTML = th.innerText;
+    hider.appendChild(hiderContent);
 
     hider.addEventListener('click', (event) => {
       event.preventDefault();
@@ -67,17 +81,34 @@ export class HideColumns {
 
     // TODO fade in / fade out animation in css
     th.addEventListener('mouseover', () => {
-      hider.style.display = '';
+      hider.classList.remove('table-pill--hidden');
+      const posTH = th.getBoundingClientRect();
+      const posH  = hider.getBoundingClientRect();
+      hider.style.left = (posTH.left + ((posTH.right-posTH.left)/2 - ((posH.right-posH.left)/2))) + 'px';
+      hider.style.top = (posTH.top - 50) + 'px';
     });
     th.addEventListener('mouseout', () => {
       setTimeout(() => {
-        if (hider.style.position === 'absolute') hider.style.display = 'none';
+        if (hider.classList.contains('table-pill--floating')) {
+          hider.classList.add('table-pill--hidden');
+        }
       }, HIDE_BUTTON_FADE_DELAY);
     });
 
+    hider.addEventListener('mouseover', () => {
+      const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
+      this.updateHiderIcon(hider, !currentlyHidden);
+    });
+    hider.addEventListener('mouseout', () => {
+      const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
+      this.updateHiderIcon(hider, currentlyHidden);
+    });
+
     this.updateColumnDisplay(th.cellIndex, prevHidden);
     this.updateHider(hider, prevHidden);
 
+    this.addHeaderHider(th, hider);
+
     this._tableUtilContainer.appendChild(hider);
   }
 
@@ -95,22 +126,30 @@ export class HideColumns {
 
   updateColumnDisplay(columnIndex, hidden) {
     this._element.getElementsByTagName('tr').forEach(row => {
-      if (row.cells[columnIndex]) {
-        row.cells[columnIndex].style.display = hidden ? 'none' : '';
+      const cell = row.cells[columnIndex];
+      if (cell) {
+        if (hidden) {
+          cell.classList.add('hide-columns--hidden-cell');
+        } else {
+          cell.classList.remove('hide-columns--hidden-cell');
+        }
       }
     });
   }
 
   updateHider(hider, hidden) {
-    // TODO set css classes instead
     if (hidden) {
-      hider.innerHTML = hider.getAttribute(HIDER_TEXT_ATTR);
-      hider.style.position = 'relative';
+      hider.classList.remove('table-pill--hidden', 'table-pill--floating');
     } else {
-      hider.innerHTML = 'hide';
-      hider.style.position = 'absolute';
-      hider.style.display = 'none';
+      hider.classList.add('table-pill--hidden', 'table-pill--floating');
     }
+    this.updateHiderIcon(hider, hidden);
+  }
+
+  updateHiderIcon(hider, hidden) {
+    const hiderIcon = hider.getElementsByClassName('fas')[0];
+    hiderIcon.classList.remove(hidden ? 'fa-eye' : 'fa-eye-slash');
+    hiderIcon.classList.add(hidden ? 'fa-eye-slash' : 'fa-eye');
   }
 
   getStorageKey(th) {

frontend/src/utils/hide-columns/hide-columns.scss

@@ -0,0 +1,53 @@
+[table-utils] {
+  margin-bottom: 20px;
+  line-height: 1.4;
+  max-width: 85vw;
+
+  .table-pill {
+    background-color: var(--color-dark);
+    color: #fff;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+    border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
+    margin-right: 20px;
+    cursor: pointer;
+
+    .table-pill__content {
+      font-size: 16px;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  }
+  .table-pill.table-pill--hidden {
+    animation: fadeout 2s ease-in alternate infinite;
+    display: none;
+  }
+  .table-pill.table-pill--floating {
+    position: fixed;
+    .table-pill__content { display: none; }
+  }
+
+  .table-pill.table-pill--hide {
+    padding-left: 10px;
+  }
+
+  .table-pill--unhide {
+    padding-left: 10px;
+  }
+
+}
+
+.hide-columns--hidden-cell {
+  display: none;
+}
+
+@keyframes fadeout {
+  from: { opacity: 1; }
+  to: { opacity: 0; display: none; }
+}
+@keyframes fadein {
+  from: { opacity: 0; }
+  to: { opacity: 1; }
+}