58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<div :class="{ connected, idle }" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
div {
|
|
position: fixed;
|
|
top: 59px;
|
|
right: 0;
|
|
left: 0;
|
|
height: 0.5rem;
|
|
z-index: 1030;
|
|
background-color: #dc3545;
|
|
}
|
|
div.connected {
|
|
background-color: #0d6efd;
|
|
background-image: repeating-linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, 0.1),
|
|
rgba(255, 255, 255, 0.1) 10px,
|
|
rgba(0, 0, 0, 0.1) 10px,
|
|
rgba(0, 0, 0, 0.1) 20px
|
|
);
|
|
background-size: 200% 200%;
|
|
animation: barberpole 60s linear infinite;
|
|
animation-direction: reverse;
|
|
}
|
|
div.idle {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: visibility 0s 0.5s, opacity 0.5s linear;
|
|
}
|
|
@keyframes barberpole {
|
|
100% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
client: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
computed: {
|
|
connected() {
|
|
return (this.client) && (this.client.status) && (this.client.status.connected);
|
|
},
|
|
idle() {
|
|
return this.connected ? this.client.status.busy < 1 : false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|