mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-27 22:38:11 +09:00
Code

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>

45
components/status/StatusCard.vue
View File

@ -78,27 +78,32 @@ const timeago = useTimeAgo(() => status.createdAt, {
reblogged
</div>
</div>
<AccountInfo :account="status.account">
<template #default>
<div flex-auto />
<div text-sm op50 :title="status.createdAt">
{{ timeago }}
<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>
</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>
</template>
</AccountInfo>
<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"
/>
<StatusActions v-if="actions !== false" pt2 :status="status" />
</div>
</div>
<StatusActions v-if="actions !== false" px13 :status="status" />
</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