display online status

This commit is contained in:
syuilo 2021-04-17 23:52:54 +09:00
parent 79e60afd42
commit e7610b2467
22 changed files with 93 additions and 24 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> <div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
<MkAvatar :user="user" style="width:32px;height:32px;"/> <MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
</div> </div>
</div> </div>
</template> </template>

View file

@ -1,9 +1,11 @@
<template> <template>
<span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick"> <span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<img class="inner" :src="url" decoding="async"/> <img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span> </span>
<MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id"> <MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<img class="inner" :src="url" decoding="async"/> <img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA> </MkA>
</template> </template>
@ -12,8 +14,12 @@ import { defineComponent } from 'vue';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url'; import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash'; import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
import { acct, userPage } from '@client/filters/user'; import { acct, userPage } from '@client/filters/user';
import MkUserOnlineIndicator from '@client/components/user-online-indicator.vue';
export default defineComponent({ export default defineComponent({
components: {
MkUserOnlineIndicator
},
props: { props: {
user: { user: {
type: Object, type: Object,
@ -30,6 +36,10 @@ export default defineComponent({
disablePreview: { disablePreview: {
required: false, required: false,
default: false default: false
},
showIndicator: {
required: false,
default: false
} }
}, },
emits: ['click'], emits: ['click'],
@ -93,7 +103,7 @@ export default defineComponent({
} }
} }
.inner { > .inner {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -106,5 +116,14 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
> .indicator {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 20%;
height: 20%;
}
} }
</style> </style>

View file

@ -35,7 +35,7 @@
</div> </div>
<article class="article" @contextmenu.stop="onContextmenu"> <article class="article" @contextmenu.stop="onContextmenu">
<header class="header"> <header class="header">
<MkAvatar class="avatar" :user="appearNote.user"/> <MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
<div class="body"> <div class="body">
<div class="top"> <div class="top">
<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id"> <MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="_panel vjnjpkug"> <div class="_panel vjnjpkug">
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
<MkAvatar class="avatar" :user="user" :disable-preview="true"/> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title"> <div class="title">
<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<p class="username"><MkAcct :user="user"/></p> <p class="username"><MkAcct :user="user"/></p>

View file

@ -0,0 +1,50 @@
<template>
<div class="fzgwjkgc" :class="user.onlineStatus" v-tooltip="text"></div>
</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);
border-radius: 100%;
&.online {
background: #58d4c9;
}
&.active {
background: #e4bc48;
}
&.offline {
background: #ea5353;
}
&.unknown {
background: #888;
}
}
</style>

View file

@ -3,7 +3,7 @@
<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
<div v-if="fetched" class="info"> <div v-if="fetched" class="info">
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
<MkAvatar class="avatar" :user="user" :disable-preview="true"/> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title"> <div class="title">
<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<p class="username"><MkAcct :user="user"/></p> <p class="username"><MkAcct :user="user"/></p>

View file

@ -17,7 +17,7 @@
<div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }"> <div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
<div class="users" v-if="users.length > 0"> <div class="users" v-if="users.length > 0">
<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()"> <div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" class="avatar"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>
@ -31,7 +31,7 @@
<div class="tbhwbxda _section recent" v-if="username == '' && host == ''"> <div class="tbhwbxda _section recent" v-if="username == '' && host == ''">
<div class="users"> <div class="users">
<div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()"> <div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
<MkAvatar :user="user" class="avatar"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>

View file

@ -7,7 +7,7 @@
<div class="users"> <div class="users">
<MkA v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)"> <MkA v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/> <MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="extract ? extract(item) : item" class="name"/> <MkUserName :user="extract ? extract(item) : item" class="name"/>
<MkAcct :user="extract ? extract(item) : item" class="acct"/> <MkAcct :user="extract ? extract(item) : item" class="acct"/>

View file

@ -5,7 +5,7 @@
<Mfm :text="clip.description" :is-note="false" :i="$i"/> <Mfm :text="clip.description" :is-note="false" :i="$i"/>
</div> </div>
<div class="user"> <div class="user">
<MkAvatar :user="clip.user" class="avatar"/> <MkUserName :user="clip.user" :nowrap="false"/> <MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
</div> </div>
</div> </div>

View file

@ -9,7 +9,7 @@
</template> </template>
<template #default="{items}"> <template #default="{items}">
<div class="user _panel" v-for="req in items" :key="req.id"> <div class="user _panel" v-for="req in items" :key="req.id">
<MkAvatar class="avatar" :user="req.follower"/> <MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
<div class="body"> <div class="body">
<div class="name"> <div class="name">
<MkA class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><MkUserName :user="req.follower"/></MkA> <MkA class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><MkUserName :user="req.follower"/></MkA>

View file

@ -36,7 +36,7 @@
<MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);"> <MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);">
<div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id"> <div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id">
<div class="_content target"> <div class="_content target">
<MkAvatar class="avatar" :user="report.targetUser"/> <MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
<div class="info"> <div class="info">
<MkUserName class="name" :user="report.targetUser"/> <MkUserName class="name" :user="report.targetUser"/>
<div class="acct">@{{ acct(report.targetUser) }}</div> <div class="acct">@{{ acct(report.targetUser) }}</div>

View file

@ -8,7 +8,7 @@
<div class="vrcsvlkm" v-if="user && info"> <div class="vrcsvlkm" v-if="user && info">
<div class="_section"> <div class="_section">
<div class="banner" :style="bannerStyle"> <div class="banner" :style="bannerStyle">
<MkAvatar class="avatar" :user="user"/> <MkAvatar class="avatar" :user="user" :show-indicator="true"/>
</div> </div>
</div> </div>
<div class="_section"> <div class="_section">

View file

@ -54,7 +54,7 @@
<MkPagination :pagination="pagination" #default="{items}" class="users" ref="users"> <MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
<button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)"> <button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
<MkAvatar class="avatar" :user="user" :disable-link="true"/> <MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body"> <div class="body">
<header> <header>
<MkUserName class="name" :user="user"/> <MkUserName class="name" :user="user"/>

View file

@ -12,7 +12,7 @@
v-anim="i" v-anim="i"
> >
<div> <div>
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/> <MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
<header v-if="message.groupId"> <header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span> <span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time"/> <MkTime :time="message.createdAt" class="time"/>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }"> <div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }">
<MkAvatar class="avatar" :user="message.user"/> <MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
<div class="content"> <div class="content">
<div class="balloon" :class="{ noText: message.text == null }" > <div class="balloon" :class="{ noText: message.text == null }" >
<button class="delete-button" v-if="isMe" :title="$ts.delete" @click="del"> <button class="delete-button" v-if="isMe" :title="$ts.delete" @click="del">

View file

@ -17,7 +17,7 @@
<div class="_content"> <div class="_content">
<div class="users"> <div class="users">
<div class="user _panel" v-for="user in users" :key="user.id"> <div class="user _panel" v-for="user in users" :key="user.id">
<MkAvatar :user="user" class="avatar"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>

View file

@ -16,7 +16,7 @@
<div class="_content"> <div class="_content">
<div class="users"> <div class="users">
<div class="user _panel" v-for="user in users" :key="user.id"> <div class="user _panel" v-for="user in users" :key="user.id">
<MkAvatar :user="user" class="avatar"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>

View file

@ -18,7 +18,7 @@
<b>{{ item.name }}</b> <b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div> <div v-if="item.description" class="description">{{ item.description }}</div>
<div class="user"> <div class="user">
<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/> <MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
</div> </div>
</MkA> </MkA>
</div> </div>

View file

@ -11,7 +11,7 @@
<template #header>{{ $ts.invitations }}</template> <template #header>{{ $ts.invitations }}</template>
<div class="nfcacttm"> <div class="nfcacttm">
<button class="invitation _panel _button" v-for="invitation in invitations" tabindex="-1" @click="accept(invitation)"> <button class="invitation _panel _button" v-for="invitation in invitations" tabindex="-1" @click="accept(invitation)">
<MkAvatar class="avatar" :user="invitation.parent"/> <MkAvatar class="avatar" :user="invitation.parent" :show-indicator="true"/>
<span class="name"><b><MkUserName :user="invitation.parent"/></b></span> <span class="name"><b><MkUserName :user="invitation.parent"/></b></span>
<span class="username">@{{ invitation.parent.username }}</span> <span class="username">@{{ invitation.parent.username }}</span>
<MkTime :time="invitation.createdAt" class="time"/> <MkTime :time="invitation.createdAt" class="time"/>

View file

@ -8,7 +8,7 @@
</div> </div>
<div class="contents"> <div class="contents">
<div class="side _forceContainerFull_"> <div class="side _forceContainerFull_">
<MkAvatar class="avatar" :user="user" :disable-preview="true"/> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="name"> <div class="name">
<MkUserName :user="user" :nowrap="false" class="name"/> <MkUserName :user="user" :nowrap="false" class="name"/>
<MkAcct :user="user" :detail="true" class="acct"/> <MkAcct :user="user" :detail="true" class="acct"/>
@ -121,7 +121,7 @@
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/> <MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div> </div>
</div> </div>
<MkAvatar class="avatar" :user="user" :disable-preview="true"/> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title"> <div class="title">
<MkUserName :user="user" :nowrap="false" class="name"/> <MkUserName :user="user" :nowrap="false" class="name"/>
<div class="bottom"> <div class="bottom">

View file

@ -7,7 +7,7 @@
<div class="titleContainer"> <div class="titleContainer">
<div class="title"> <div class="title">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/> <Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/> <MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> <MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
<span v-else-if="info.title" class="text">{{ info.title }}</span> <span v-else-if="info.title" class="text">{{ info.title }}</span>
</div> </div>

View file

@ -9,7 +9,7 @@
<div class="page active link" v-if="info"> <div class="page active link" v-if="info">
<div class="title"> <div class="title">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/> <Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/> <MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<span v-if="info.title" class="text">{{ info.title }}</span> <span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> <MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div> </div>
@ -28,7 +28,7 @@
</button> </button>
<div class="title" v-if="info"> <div class="title" v-if="info">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/> <Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/> <MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<span v-if="info.title" class="text">{{ info.title }}</span> <span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> <MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div> </div>