103 lines
1.6 KiB
Vue
103 lines
1.6 KiB
Vue
<template>
|
|
<div id="container">
|
|
<img id="logo" src="@/render/assets/connectLogo.svg">
|
|
<div id="connect">
|
|
<div class="dot"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { defineComponent, onMounted, watch } from 'vue'
|
|
import { hiddenState, useAnim, status, show, hide } from "@/render/shared/connectionStatus";
|
|
|
|
export default defineComponent({
|
|
name: "ConnectionStatus",
|
|
|
|
setup() {
|
|
|
|
watch(status, (val, _oldval) => {
|
|
if (val === "Connected" || val === "Nominal") {
|
|
if (!hiddenState) hide();
|
|
} else {
|
|
if (hiddenState)
|
|
show();
|
|
}
|
|
});
|
|
|
|
onMounted(useAnim);
|
|
|
|
return {
|
|
status
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#container {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
#connect {
|
|
opacity: 0;
|
|
}
|
|
|
|
shape {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #48E065;
|
|
}
|
|
|
|
.dot {
|
|
@extend shape;
|
|
position: relative;
|
|
transform: translateX(-15px);
|
|
animation: flashing 1s infinite linear alternate;
|
|
animation-delay: .25s;
|
|
}
|
|
|
|
.dot::before, .dot::after {
|
|
content: '';
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
|
|
.dot::before {
|
|
@extend shape;
|
|
left: -9px;
|
|
animation: flashing 1s infinite alternate;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.dot::after {
|
|
@extend shape;
|
|
left: 9px;
|
|
animation: flashing 1s infinite alternate;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
@keyframes flashing {
|
|
0% {
|
|
background-color: #48E065;
|
|
}
|
|
50%,
|
|
100% {
|
|
background-color: #9B9B9B;
|
|
}
|
|
}
|
|
|
|
</style>
|