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

feat(hide-columns): better positioning of hiders

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

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

@ -79,27 +79,14 @@ export class HideColumns {
}
hideHiderBehindHeader(hider) {
const th = this.hiderToHeader.get(hider);
// move hider right before table (inside any scrolltable element)
this._tableHiderContainer.appendChild(hider);
// reposition hider
const posTH = th.getBoundingClientRect();
const posH = hider.getBoundingClientRect();
// TODO move to aux function
let p = {
top: posTH.top,
left: posTH.left,
width: th.offsetWidth || 0,
height: th.offsetHeight || 0,
};
const hiderCompStyle = window.getComputedStyle(hider);
const x = parseInt(hiderCompStyle.marginLeft) + parseInt(hiderCompStyle.marginRight);
const y = parseInt(hiderCompStyle.marginTop) + parseInt(hiderCompStyle.marginBottom);
const posHParent = hider.parentElement.getBoundingClientRect();
p.top += -posHParent.top + hider.parentElement.scrollTop + hider.parentElement.offsetTop;
p.left += -posHParent.left - hider.parentElement.scrollLeft + hider.parentElement.offsetLeft;
hider.style.left = (p.left + (p.width/2) - (posH.width/2 + x)) + 'px';
hider.style.top = (p.top - (hider.offsetHeight + y)) + 'px';
const thR = this.hiderToHeader.get(hider).getBoundingClientRect();
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';
}
setupHideButton(th, prevHidden) {

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

@ -1,8 +1,6 @@
[table-utils] {
margin-bottom: 20px;
line-height: 1.4;
max-width: 85vw;
}
.table-hiders {
position: relative;
max-height: 0px;
.table-hider {
background-color: #fff;
@ -10,13 +8,18 @@
padding: 10px;
cursor: pointer;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
margin: 10px 10px 0 0;
position: absolute;
.table-hider__label {
display: none;
}
}
}
[table-utils] {
margin-bottom: 20px;
line-height: 1.4;
max-width: 85vw;
.table-pill {
background-color: var(--color-dark);
@ -40,6 +43,7 @@
/* animation: fadeout 0.5s linear forwards; */
/* animation-delay: 2s; */
}
}
.hide-columns--hidden-cell {
display: none;