1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-02-07 23:38:54 +01:00

refactor: Improved pulse animation code

This commit is contained in:
Fabio Di Stasio 2021-04-22 14:24:34 +02:00
parent a41cf1ab56
commit 0d77aee3eb
3 changed files with 24 additions and 15 deletions

View File

@ -111,17 +111,19 @@ export default {
el.querySelector('.ex-tooltip-content').style.top = `${fromTop}px`;
},
getStatusBadge (uid) {
const status = this.getWorkspace(uid).connection_status;
if (this.getWorkspace(uid)) {
const status = this.getWorkspace(uid).connection_status;
switch (status) {
case 'connected':
return 'badge badge-connected';
case 'connecting':
return 'badge badge-connecting';
case 'failed':
return 'badge badge-failed';
default:
return '';
switch (status) {
case 'connected':
return 'badge badge-connected';
case 'connecting':
return 'badge badge-connecting';
case 'failed':
return 'badge badge-failed';
default:
return '';
}
}
}
}

View File

@ -30,6 +30,12 @@
animation: jump-down-in 0.2s reverse;
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes jump-down-in {
0% {
transform: scale(0);
@ -40,16 +46,16 @@
}
}
@keyframes connecting {
@keyframes pulse {
0% {
background-color: transparent;
opacity: 0;
}
50% {
background-color: $warning-color;
opacity: 1;
}
100% {
background-color: transparent;
opacity: 0;
}
}

View File

@ -142,7 +142,8 @@ body {
}
&.badge-connecting::after {
animation-name: connecting;
background: $warning-color;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}