Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

display online status

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/client/components/avatars.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<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>
</template>

21
src/client/components/global/avatar.vue
View file

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

2
src/client/components/note-detailed.vue
View file

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

2
src/client/components/user-info.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="_panel vjnjpkug">
<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">
<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<p class="username"><MkAcct :user="user"/></p>

50
src/client/components/user-online-indicator.vue Normal file
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>

2
src/client/components/user-preview.vue
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="fetched" class="info">
<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">
<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<p class="username"><MkAcct :user="user"/></p>

4
src/client/components/user-select-dialog.vue
View file

@ -17,7 +17,7 @@
<div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: 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()">
<MkAvatar :user="user" class="avatar"/>
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>
@ -31,7 +31,7 @@
<div class="tbhwbxda _section recent" v-if="username == '' && host == ''">
<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()">
<MkAvatar :user="user" class="avatar"/>
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body">
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>

2
src/client/components/users-dialog.vue
View file

@ -7,7 +7,7 @@
<div class="users">
<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">
<MkUserName :user="extract ? extract(item) : item" class="name"/>
<MkAcct :user="extract ? extract(item) : item" class="acct"/>

2
src/client/pages/clip.vue
View file

@ -5,7 +5,7 @@
<Mfm :text="clip.description" :is-note="false" :i="$i"/>
</div>
<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>

2
src/client/pages/follow-requests.vue
View file

@ -9,7 +9,7 @@
</template>
<template #default="{items}">
<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="name">
<MkA class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><MkUserName :user="req.follower"/></MkA>

2
src/client/pages/instance/abuses.vue
View file

@ -36,7 +36,7 @@
<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="_content target">
<MkAvatar class="avatar" :user="report.targetUser"/>
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
<div class="info">
<MkUserName class="name" :user="report.targetUser"/>
<div class="acct">@{{ acct(report.targetUser) }}</div>

2
src/client/pages/instance/user-dialog.vue
View file

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

2
src/client/pages/instance/users.vue
View file

@ -54,7 +54,7 @@
<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)">
<MkAvatar class="avatar" :user="user" :disable-link="true"/>
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body">
<header>
<MkUserName class="name" :user="user"/>

2
src/client/pages/messaging/index.vue
View file

@ -12,7 +12,7 @@
v-anim="i"
>
<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">
<span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time"/>

2
src/client/pages/messaging/messaging-room.message.vue
View file

@ -1,6 +1,6 @@
<template>
<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="balloon" :class="{ noText: message.text == null }" >
<button class="delete-button" v-if="isMe" :title="$ts.delete" @click="del">

2
src/client/pages/my-groups/group.vue
View file

@ -17,7 +17,7 @@
<div class="_content">
<div class="users">
<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">
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>

2
src/client/pages/my-lists/list.vue
View file

@ -16,7 +16,7 @@
<div class="_content">
<div class="users">
<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">
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>

2
src/client/pages/note.vue
View file

@ -18,7 +18,7 @@
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
<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>
</MkA>
</div>

2
src/client/pages/reversi/index.vue
View file

@ -11,7 +11,7 @@
<template #header>{{ $ts.invitations }}</template>
<div class="nfcacttm">
<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="username">@{{ invitation.parent.username }}</span>
<MkTime :time="invitation.createdAt" class="time"/>

4
src/client/pages/user/index.vue
View file

@ -8,7 +8,7 @@
</div>
<div class="contents">
<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">
<MkUserName :user="user" :nowrap="false" class="name"/>
<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"/>
</div>
</div>
<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title">
<MkUserName :user="user" :nowrap="false" class="name"/>
<div class="bottom">

2
src/client/ui/_common_/header.vue
View file

@ -7,7 +7,7 @@
<div class="titleContainer">
<div class="title">
<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"/>
<span v-else-if="info.title" class="text">{{ info.title }}</span>
</div>

4
src/client/ui/visitor/header.vue
View file

@ -9,7 +9,7 @@
<div class="page active link" v-if="info">
<div class="title">
<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>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div>
@ -28,7 +28,7 @@
</button>
<div class="title" v-if="info">
<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>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div>