Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-13 20:39:58 +00:00
Code Issues Wiki Activity

feat: avatar on the side in StatusCard

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

19
components/status/StatusAccountDetails.vue Normal file
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
</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>
<div flex-auto />
<div text-sm op50 :title="status.createdAt">
{{ timeago }}
</div>
</template>
</AccountInfo>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
<div pl15>
</StatusAccountDetails>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
<div>
<StatusBody :status="status" />
<StatusMedia
v-if="status.mediaAttachments?.length"
@ -99,6 +102,8 @@ const timeago = useTimeAgo(() => status.createdAt, {
:actions="false"
/>
</div>
<StatusActions v-if="actions !== false" px13 :status="status" />
<StatusActions v-if="actions !== false" pt2 :status="status" />
</div>
</div>
</div>
</template>

4
composables/masto.ts
View file

@ -45,6 +45,10 @@ export function getStatusPath(status: Status) {
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
// 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