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

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

8
components/account/AccountBigCard.vue
View File

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

15
components/account/AccountDisplayName.vue 100644
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>

9
components/account/AccountHeader.vue
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">
<AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button>
<div flex flex-col>
<div flex="~ col gap1">
<div flex justify-between>
<ContentRich
font-bold sm:text-2xl text-xl
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
:markdown="false"
/>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
<AccountBotIndicator v-if="account.bot" />
</div>
<AccountHandle :account="account" />

6
components/account/AccountInfo.vue
View File

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

6
components/account/AccountInlineInfo.vue
View File

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

11
components/notification/NotificationCard.vue
View File

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

5
components/notification/NotificationGroupedFollow.vue
View File

@ -35,10 +35,9 @@ const lang = $computed(() => {
</span>
</template>
<template v-else>
<ContentRich
<AccountDisplayName
:account="items.items[0]?.account"
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>
{{ $t('notification.followed_you') }}

6
components/search/SearchAccountInfo.vue
View File

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

6
components/status/StatusAccountDetails.vue
View File

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