Sharkey/packages/client/src/components/user-online-indicator.vue

51 lines
908 B
Vue
Raw Normal View History

2021-04-17 17:52:54 +03:00
<template>
2021-11-19 12:36:12 +02:00
<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
2021-04-17 17:52:54 +03:00
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
user: {
type: Object,
required: true
},
},
computed: {
text(): string {
switch (this.user.onlineStatus) {
case 'online': return this.$ts.online;
case 'active': return this.$ts.active;
case 'offline': return this.$ts.offline;
case 'unknown': return this.$ts.unknown;
}
}
}
});
</script>
<style lang="scss" scoped>
.fzgwjkgc {
box-shadow: 0 0 0 3px var(--panel);
2021-04-20 10:58:05 +03:00
border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
2021-04-17 17:52:54 +03:00
&.online {
background: #58d4c9;
}
&.active {
background: #e4bc48;
}
&.offline {
background: #ea5353;
}
&.unknown {
background: #888;
}
}
</style>