fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hide-columns): more styling

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-28 15:44:53 +01:00 committed by Gregor Kleen
parent 761c6d39a8
commit 49087027b2
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/utils/hide-columns/hide-columns.js
View File

@ -9,10 +9,9 @@ const TABLE_UTILS_ATTR = 'table-utils';
const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`; const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`;
const TABLE_HIDER_CONTAINER_CLASS = 'table-hiders'; const TABLE_HIDER_CONTAINER_CLASS = 'table-hiders';
const TABLE_HIDER_CLASS = 'table-hider';
const HIDER_HIDE_CLASS = 'table-pill--hide'; const HIDER_POPUP_CLASS = 'table-hider--visible';
const HIDER_HIDDEN_CLASS = 'table-pill--hidden';
const HIDER_FLOATING_CLASS = 'table-pill--floating';
const CELL_HIDDEN_CLASS = 'hide-columns--hidden-cell'; const CELL_HIDDEN_CLASS = 'hide-columns--hidden-cell';
@ -86,7 +85,7 @@ export class HideColumns {
const hR = hider.getBoundingClientRect(); const hR = hider.getBoundingClientRect();
const pR = this._tableHiderContainer.getBoundingClientRect(); const pR = this._tableHiderContainer.getBoundingClientRect();
hider.style.left = (thR.left + thR.width/2 - hR.width/2 - pR.left) + 'px'; 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) { setupHideButton(th, prevHidden) {
@ -106,22 +105,24 @@ export class HideColumns {
this.switchColumnDisplay(th, hider); this.switchColumnDisplay(th, hider);
}); });
// TODO fade in / fade out animation in css
th.addEventListener('mouseover', () => { th.addEventListener('mouseover', () => {
// hider.classList.remove(HIDER_HIDDEN_CLASS); hider.classList.add(HIDER_POPUP_CLASS);
}); });
th.addEventListener('mouseout', (event) => { th.addEventListener('mouseout', () => {
console.log('th mouseout', event); if (hider.classList.contains(TABLE_HIDER_CLASS)) {
if (hider.classList.contains(HIDER_FLOATING_CLASS)) { hider.classList.remove(HIDER_POPUP_CLASS);
hider.classList.add(HIDER_HIDE_CLASS);
} }
}); });
hider.addEventListener('mouseover', () => { hider.addEventListener('mouseover', () => {
hider.classList.add(HIDER_POPUP_CLASS);
const currentlyHidden = this._storageManager.load(this.getStorageKey(th)); const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
this.updateHiderIcon(hider, !currentlyHidden); this.updateHiderIcon(hider, !currentlyHidden);
}); });
hider.addEventListener('mouseout', () => { hider.addEventListener('mouseout', () => {
if (hider.classList.contains(TABLE_HIDER_CLASS)) {
hider.classList.remove(HIDER_POPUP_CLASS);
}
const currentlyHidden = this._storageManager.load(this.getStorageKey(th)); const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
this.updateHiderIcon(hider, currentlyHidden); this.updateHiderIcon(hider, currentlyHidden);
}); });
@ -165,12 +166,13 @@ export class HideColumns {
updateHider(hider, hidden) { updateHider(hider, hidden) {
if (hidden) { if (hidden) {
this._tableUtilContainer.appendChild(hider); 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'); hider.classList.add('table-pill');
} else { } else {
this.hideHiderBehindHeader(hider);
this._tableHiderContainer.appendChild(hider);
hider.classList.remove('table-pill'); 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); this.updateHiderIcon(hider, hidden);
} }

15
frontend/src/utils/hide-columns/hide-columns.scss
View File

@ -5,14 +5,27 @@
.table-hider { .table-hider {
background-color: #fff; background-color: #fff;
color: var(--color-link); color: var(--color-link);
padding: 10px; padding: 0 10px;
height: 0;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.6); box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
position: absolute; position: absolute;
overflow: hidden;
transition: .3s;
&:hover {
background-color: var(--color-grey-light);
}
.table-hider__label { .table-hider__label {
display: none; display: none;
} }
&.table-hider--visible {
display: flex;
padding: 10px;
height: auto;
}
} }
} }