refactor(account): extract display name component

zio/stable
三咲智子 2023-01-07 03:12:00 +08:00
parent c7756add7d
commit 2bbbfd51c1
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
9 changed files with 27 additions and 45 deletions

View File

@ -32,13 +32,7 @@ defineOptions({
</a> </a>
</div> </div>
<div sm:mt-2> <div sm:mt-2>
<div> <AccountDisplayName :account="account" font-bold text-lg line-clamp-1 ws-pre-wrap break-all />
<ContentRich
font-bold text-lg line-clamp-1 ws-pre-wrap break-all
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
</div>
<AccountHandle text-sm :account="account" /> <AccountHandle text-sm :account="account" />
</div> </div>
</div> </div>

View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import type { Account } from 'masto'
defineProps<{
account: Account
}>()
</script>
<template>
<ContentRich
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
:markdown="false"
/>
</template>

View File

@ -73,14 +73,9 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
<button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar"> <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
<AccountAvatar :account="account" hover:opacity-90 transition-opacity /> <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button> </button>
<div flex flex-col> <div flex="~ col gap1">
<div flex justify-between> <div flex justify-between>
<ContentRich <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
font-bold sm:text-2xl text-xl
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
:markdown="false"
/>
<AccountBotIndicator v-if="account.bot" /> <AccountBotIndicator v-if="account.bot" />
</div> </div>
<AccountHandle :account="account" /> <AccountHandle :account="account" />

View File

@ -22,11 +22,7 @@ defineOptions({
</AccountHoverWrapper> </AccountHoverWrapper>
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none> <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none>
<div flex="~" gap-2> <div flex="~" gap-2>
<ContentRich <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
font-bold line-clamp-1 ws-pre-wrap break-all text-lg
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
<AccountBotIndicator v-if="account.bot" /> <AccountBotIndicator v-if="account.bot" />
</div> </div>
<AccountHandle :account="account" text-secondary-light /> <AccountHandle :account="account" text-secondary-light />

View File

@ -16,11 +16,7 @@ const { link = true, avatar = true } = defineProps<{
min-w-0 flex gap-2 items-center min-w-0 flex gap-2 items-center
> >
<AccountAvatar v-if="avatar" :account="account" w-5 h-5 /> <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
<ContentRich <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all />
line-clamp-1 ws-pre-wrap break-all
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
</template> </template>

View File

@ -18,11 +18,7 @@ const { notification } = defineProps<{
:lang="notification.status?.language ?? undefined" :lang="notification.status?.language ?? undefined"
> >
<div i-ri:user-follow-fill me-1 color-primary /> <div i-ri:user-follow-fill me-1 color-primary />
<ContentRich <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
:content="getDisplayName(notification.account, { rich: true })"
:emojis="notification.account.emojis"
/>
<span ws-nowrap> <span ws-nowrap>
{{ $t('notification.followed_you') }} {{ $t('notification.followed_you') }}
</span> </span>
@ -36,10 +32,9 @@ const { notification } = defineProps<{
<template v-else-if="notification.type === 'admin.sign_up'"> <template v-else-if="notification.type === 'admin.sign_up'">
<div flex p3 items-center bg-shaded> <div flex p3 items-center bg-shaded>
<div i-ri:admin-fill me-1 color-purple /> <div i-ri:admin-fill me-1 color-purple />
<ContentRich <AccountDisplayName
:account="notification.account"
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
:content="getDisplayName(notification.account, { rich: true })"
:emojis="notification.account.emojis"
/> />
<span>{{ $t("notification.signed_up") }}</span> <span>{{ $t("notification.signed_up") }}</span>
</div> </div>

View File

@ -35,10 +35,9 @@ const lang = $computed(() => {
</span> </span>
</template> </template>
<template v-else> <template v-else>
<ContentRich <AccountDisplayName
:account="items.items[0]?.account"
text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
:content="getDisplayName(items.items[0]?.account, { rich: true })"
:emojis="items.items[0]?.account.emojis"
/> />
<span me-1 ws-nowrap> <span me-1 ws-nowrap>
{{ $t('notification.followed_you') }} {{ $t('notification.followed_you') }}

View File

@ -11,11 +11,7 @@ defineProps<{
<AccountAvatar w-10 h-10 :account="account" shrink-0 /> <AccountAvatar w-10 h-10 :account="account" shrink-0 />
<div flex="~ col gap1" shrink h-full overflow-hidden leading-none> <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
<div flex="~" gap-2> <div flex="~" gap-2>
<ContentRich <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
line-clamp-1 ws-pre-wrap break-all text-base
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
<AccountBotIndicator v-if="account.bot" /> <AccountBotIndicator v-if="account.bot" />
</div> </div>
<AccountHandle text-sm :account="account" text-secondary-light /> <AccountHandle text-sm :account="account" text-secondary-light />

View File

@ -13,11 +13,7 @@ const { account, link = true } = defineProps<{
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
text-link-rounded text-link-rounded
> >
<ContentRich <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all />
font-bold line-clamp-1 ws-pre-wrap break-all
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
<AccountHandle :account="account" /> <AccountHandle :account="account" />
</NuxtLink> </NuxtLink>
</template> </template>