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

feat(hide-columns): fadein transformation

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-29 14:24:58 +01:00 committed by Gregor Kleen
parent 9e449ddaed
commit 506f94e5d4
2 changed files with 10 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,6 +103,7 @@ export class HideColumns {
hider.addEventListener('click', (event) => { hider.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
this.switchColumnDisplay(th, hider); this.switchColumnDisplay(th, hider);
this._tableHiderContainer.getElementsByClassName(TABLE_HIDER_CLASS).forEach(hider => this.hideHiderBehindHeader(hider));
}); });
th.addEventListener('mouseover', () => { th.addEventListener('mouseover', () => {

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

@ -5,13 +5,15 @@
.table-hider { .table-hider {
background-color: #fff; background-color: #fff;
color: var(--color-link); color: var(--color-link);
padding: 0 10px; padding: 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; overflow: hidden;
transition: .3s;
transition: transform .2s ease 1s;
transform: scaleY(0);
transform-origin: top;
&:hover { &:hover {
background-color: var(--color-grey-light); background-color: var(--color-grey-light);
@ -22,25 +24,20 @@
} }
&.table-hider--visible { &.table-hider--visible {
display: flex; transform: scaleY(1);
padding: 10px;
height: auto;
} }
} }
} }
[table-utils] { [table-utils] {
margin-bottom: 20px;
line-height: 1.4;
max-width: 85vw; max-width: 85vw;
margin-bottom: 20px;
min-height: 0;
.table-pill { .table-pill {
background-color: var(--color-dark); background-color: var(--color-dark);
color: #fff; color: #fff;
padding-top: 10px; padding: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%; border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
@ -51,11 +48,6 @@
margin-left: 5px; margin-left: 5px;
} }
} }
.table-pill.table-pill--hide {
/* -webkit-animation: fadeout 0.5s linear forwards; */
/* animation: fadeout 0.5s linear forwards; */
/* animation-delay: 2s; */
}
} }
.hide-columns--hidden-cell { .hide-columns--hidden-cell {