fraport/fradrive
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_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);
}

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

@ -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;
}
}
}