zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: replying to status

zio/stable
Anthony Fu 2022-11-23 08:00:52 +08:00
parent 6d66bbbc5d
commit 9a77c7da2a
5 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/account/AccountInfo.vue
View File

@ -19,6 +19,7 @@ const { link = true } = defineProps<{
<p op35 text-sm> <p op35 text-sm>
@{{ account.acct }} @{{ account.acct }}
</p> </p>
<slot name="bottom" />
</NuxtLink> </NuxtLink>
<slot /> <slot />
</div> </div>

2
components/account/AccountInlineInfo.vue
View File

@ -7,7 +7,7 @@ defineProps<{
</script> </script>
<template> <template>
<NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center> <NuxtLink :href="`/@${account.acct}`" flex gap-2 items-center>
<AccountAvatar :account="account" w-5 h-5 /> <AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" /> <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink> </NuxtLink>

13
components/status/StatusCard.vue
View File

@ -67,16 +67,19 @@ const timeago = useTimeAgo(() => status.createdAt, {
<div v-if="rebloggedBy" pl8> <div v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm> <div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />
<AccountInlineInfo :account="rebloggedBy" /> <AccountInlineInfo font-bold :account="rebloggedBy" />
reblogged reblogged
</div> </div>
</div> </div>
<AccountInfo :account="status.account"> <AccountInfo :account="status.account">
<div flex-auto /> <template>
<div text-sm op50> <div flex-auto />
{{ timeago }} <div text-sm op50>
</div> {{ timeago }}
</div>
</template>
</AccountInfo> </AccountInfo>
<StatusReplyingTo :status="status" />
<div pl14> <div pl14>
<StatusBody :status="status" /> <StatusBody :status="status" />
<StatusMedia <StatusMedia

3
components/status/StatusDetails.vue
View File

@ -18,7 +18,8 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
<template> <template>
<div flex flex-col gap-2 my-4 px-4> <div flex flex-col gap-2 my-4 px-4>
<AccountInfo :account="status.account" /> <AccountInfo :account="status.account" />
<StatusBody :status="status" text-xl /> <StatusReplyingTo :status="status" />
<StatusBody :status="status" text-2xl />
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"

25
components/status/StatusReplyingTo.vue 100644
View File

@ -0,0 +1,25 @@
<script setup lang="ts">
import type { Status } from 'masto'
const { status } = defineProps<{
status: Status
}>()
const replyingTo = asyncComputed(async () => {
if (status.inReplyToAccountId)
return await masto.accounts.fetch(status.inReplyToAccountId)
return null
})
</script>
<template>
<template v-if="replyingTo">
<div
flex="~ gap-1.5" items-center text-sm text-gray:85
:title="`Replying to ${getDisplayName(replyingTo)}`"
>
<div i-ri:reply-fill rotate-180 op50 />
<AccountInlineInfo :account="replyingTo" />
</div>
</template>
</template>