diff options
Diffstat (limited to 'packages/frontend/src/components/MkReactedUsersDialog.vue')
| -rw-r--r-- | packages/frontend/src/components/MkReactedUsersDialog.vue | 99 |
1 files changed, 0 insertions, 99 deletions
diff --git a/packages/frontend/src/components/MkReactedUsersDialog.vue b/packages/frontend/src/components/MkReactedUsersDialog.vue deleted file mode 100644 index 0a858a8965..0000000000 --- a/packages/frontend/src/components/MkReactedUsersDialog.vue +++ /dev/null @@ -1,99 +0,0 @@ -<template> -<MkModalWindow - ref="dialog" - :width="400" - :height="450" - @close="dialog.close()" - @closed="emit('closed')" -> - <template #header>{{ i18n.ts.reactionsList }}</template> - - <MkSpacer :marginMin="20" :marginMax="28"> - <div v-if="note" class="_gaps"> - <div v-if="reactions.length === 0" class="_fullinfo"> - <img :src="infoImageUrl" class="_ghost"/> - <div>{{ i18n.ts.nothing }}</div> - </div> - <template v-else> - <div :class="$style.tabs"> - <button v-for="reaction in reactions" :key="reaction" :class="[$style.tab, { [$style.tabActive]: tab === reaction }]" class="_button" @click="tab = reaction"> - <MkReactionIcon :reaction="reaction"/> - <span style="margin-left: 4px;">{{ note.reactions[reaction] }}</span> - </button> - </div> - <MkA v-for="user in users" :key="user.id" :to="userPage(user)" @click="dialog.close()"> - <MkUserCardMini :user="user" :withChart="false"/> - </MkA> - </template> - </div> - <div v-else> - <MkLoading/> - </div> - </MkSpacer> -</MkModalWindow> -</template> - -<script lang="ts" setup> -import { onMounted, watch } from 'vue'; -import * as misskey from 'misskey-js'; -import MkModalWindow from '@/components/MkModalWindow.vue'; -import MkReactionIcon from '@/components/MkReactionIcon.vue'; -import MkUserCardMini from '@/components/MkUserCardMini.vue'; -import { userPage } from '@/filters/user'; -import { i18n } from '@/i18n'; -import * as os from '@/os'; -import { infoImageUrl } from '@/instance'; - -const emit = defineEmits<{ - (ev: 'closed'): void, -}>(); - -const props = defineProps<{ - noteId: misskey.entities.Note['id']; -}>(); - -const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>(); - -let note = $ref<misskey.entities.Note>(); -let tab = $ref<string>(); -let reactions = $ref<string[]>(); -let users = $ref(); - -watch($$(tab), async () => { - const res = await os.api('notes/reactions', { - noteId: props.noteId, - type: tab, - limit: 30, - }); - - users = res.map(x => x.user); -}); - -onMounted(() => { - os.api('notes/show', { - noteId: props.noteId, - }).then((res) => { - reactions = Object.keys(res.reactions); - tab = reactions[0]; - note = res; - }); -}); -</script> - -<style lang="scss" module> -.tabs { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.tab { - padding: 4px 6px; - border: solid 1px var(--divider); - border-radius: 6px; -} - -.tabActive { - border-color: var(--accent); -} -</style> |