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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/account/AccountInfo.vue
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>

19
components/status/StatusAccountDetails.vue 100644
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>

15
components/status/StatusCard.vue
View File

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

4
composables/masto.ts
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