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

fix(hide-columns): fix vertical positioning of hider and minor refactor

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-29 17:52:32 +01:00 committed by Gregor Kleen
parent 364991c42b
commit 3fbb4db962
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,8 +10,9 @@ const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`;
const TABLE_HIDER_CONTAINER_CLASS = 'table-hiders';
const TABLE_HIDER_CLASS = 'table-hider';
const TABLE_HIDER_VISIBLE_CLASS = 'table-hider--visible';
const HIDER_POPUP_CLASS = 'table-hider--visible';
const TABLE_PILL_CLASS = 'table-pill';
const CELL_HIDDEN_CLASS = 'hide-columns--hidden-cell';
@ -85,10 +86,10 @@ 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 +50) + 'px';
hider.style.top = (thR.top - pR.top + thR.height) + 'px';
// remove visible class if necessary
hider.classList.remove('table-hider--visible');
hider.classList.remove(TABLE_HIDER_VISIBLE_CLASS);
}
setupHideButton(th, prevHidden) {
@ -112,22 +113,22 @@ export class HideColumns {
});
th.addEventListener('mouseover', () => {
hider.classList.add(HIDER_POPUP_CLASS);
hider.classList.add(TABLE_HIDER_VISIBLE_CLASS);
});
th.addEventListener('mouseout', () => {
if (hider.classList.contains(TABLE_HIDER_CLASS)) {
hider.classList.remove(HIDER_POPUP_CLASS);
hider.classList.remove(TABLE_HIDER_VISIBLE_CLASS);
}
});
hider.addEventListener('mouseover', () => {
hider.classList.add(HIDER_POPUP_CLASS);
hider.classList.add(TABLE_HIDER_VISIBLE_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);
hider.classList.remove(TABLE_HIDER_VISIBLE_CLASS);
}
const currentlyHidden = this._storageManager.load(this.getStorageKey(th));
this.updateHiderIcon(hider, currentlyHidden);
@ -173,11 +174,11 @@ export class HideColumns {
if (hidden) {
this._tableUtilContainer.appendChild(hider);
hider.classList.remove(TABLE_HIDER_CLASS);
hider.classList.add('table-pill');
hider.classList.add(TABLE_PILL_CLASS);
} else {
this.hideHiderBehindHeader(hider);
this._tableHiderContainer.appendChild(hider);
hider.classList.remove('table-pill');
hider.classList.remove(TABLE_PILL_CLASS);
hider.classList.add(TABLE_HIDER_CLASS);
}
this.updateHiderIcon(hider, hidden);