diff options
Diffstat (limited to 'packages/frontend/src/components/MkUserOnlineIndicator.vue')
| -rw-r--r-- | packages/frontend/src/components/MkUserOnlineIndicator.vue | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue new file mode 100644 index 0000000000..a4f6f80383 --- /dev/null +++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue @@ -0,0 +1,45 @@ +<template> +<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div> +</template> + +<script lang="ts" setup> +import { } from 'vue'; +import * as misskey from 'misskey-js'; +import { i18n } from '@/i18n'; + +const props = defineProps<{ + user: misskey.entities.User; +}>(); + +const text = $computed(() => { + switch (props.user.onlineStatus) { + case 'online': return i18n.ts.online; + case 'active': return i18n.ts.active; + case 'offline': return i18n.ts.offline; + case 'unknown': return i18n.ts.unknown; + } +}); +</script> + +<style lang="scss" scoped> +.fzgwjkgc { + box-shadow: 0 0 0 3px var(--panel); + border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる + + &.online { + background: #58d4c9; + } + + &.active { + background: #e4bc48; + } + + &.offline { + background: #ea5353; + } + + &.unknown { + background: #888; + } +} +</style> |