From a9c17d75fe2ec2aef65e4150d8f080797433fe0d Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 27 Nov 2019 17:01:49 +0100 Subject: [PATCH] feat(hide-columns): styling stub with repositioning --- .../src/utils/hide-columns/hide-columns.js | 65 +++++++++++++++---- .../src/utils/hide-columns/hide-columns.scss | 53 +++++++++++++++ 2 files changed, 105 insertions(+), 13 deletions(-) create mode 100644 frontend/src/utils/hide-columns/hide-columns.scss diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js index 6bc0bc8af..242c51095 100644 --- a/frontend/src/utils/hide-columns/hide-columns.js +++ b/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) { diff --git a/frontend/src/utils/hide-columns/hide-columns.scss b/frontend/src/utils/hide-columns/hide-columns.scss new file mode 100644 index 000000000..82a39d97c --- /dev/null +++ b/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; } +}