feat: avatar on the side in StatusCard

zio/stable
patak 2022-11-24 15:20:50 +01:00
parent c2ad609a93
commit a5ef2bdc67
4 changed files with 50 additions and 22 deletions

View File

@ -7,7 +7,7 @@ const { account, link = true, fullServer = false } = defineProps<{
fullServer?: boolean fullServer?: boolean
}>() }>()
const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account)) const accountHandle = $(useAccountHandle(account, fullServer))
</script> </script>
<template> <template>
@ -20,7 +20,7 @@ const id = computed(() => fullServer && !account.acct.includes('@') ? `@${accoun
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null"> <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" /> <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm> <p op35 text-sm>
{{ id }} {{ accountHandle }}
</p> </p>
<slot name="bottom" /> <slot name="bottom" />
</NuxtLink> </NuxtLink>

View File

@ -0,0 +1,19 @@
<script setup lang="ts">
import type { Account } from 'masto'
const { account, link = true } = defineProps<{
account: Account
link?: boolean
}>()
const accountHandle = $(useAccountHandle(account))
</script>
<template>
<NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-2 items-center>
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm>
{{ accountHandle }}
</p>
</NuxtLink>
</template>

View File

@ -78,27 +78,32 @@ const timeago = useTimeAgo(() => status.createdAt, {
reblogged reblogged
</div> </div>
</div> </div>
<AccountInfo :account="status.account"> <div flex gap-4>
<template #default> <AccountAvatar mt1 w-12 h-12 :account="status.account" />
<div flex-auto /> <div flex flex-col>
<div text-sm op50 :title="status.createdAt"> <StatusAccountDetails :account="status.account">
{{ timeago }} <template #default>
<div flex-auto />
<div text-sm op50 :title="status.createdAt">
{{ timeago }}
</div>
</template>
</StatusAccountDetails>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
<div>
<StatusBody :status="status" />
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
/>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
</div> </div>
</template> <StatusActions v-if="actions !== false" pt2 :status="status" />
</AccountInfo> </div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
<div pl15>
<StatusBody :status="status" />
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
/>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
</div> </div>
<StatusActions v-if="actions !== false" px13 :status="status" />
</div> </div>
</template> </template>

View File

@ -45,6 +45,10 @@ export function getStatusPath(status: Status) {
return `/status/${status.id}` return `/status/${status.id}`
} }
export function useAccountHandle(account: Account, fullServer = true) {
return computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
}
// Batch requests for relationships when used in the UI // Batch requests for relationships when used in the UI
// We don't want to hold to old values, so every time a Relationship is needed it // We don't want to hold to old values, so every time a Relationship is needed it
// is requested again from the server to show the latest state // is requested again from the server to show the latest state