feat: role labels wrap (#2266)

This commit is contained in:
Florian Martinez 2023-07-25 17:29:54 +02:00 committed by GitHub
parent 22a1388d50
commit 0a933614fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 3 deletions

View file

@ -165,9 +165,9 @@ const personalNoteMaxLength = 2000
</div> </div>
</div> </div>
<div flex="~ col gap1" pt2> <div flex="~ col gap1" pt2>
<div flex gap2 items-center> <div flex gap2 items-center flex-wrap>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl /> <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
<AccountRoleIndicator v-for="role in account.roles" :key="role.id" :role="role" /> <AccountRolesIndicator :account="account" />
<AccountLockIndicator v-if="account.locked" show-label /> <AccountLockIndicator v-if="account.locked" show-label />
<AccountBotIndicator v-if="account.bot" show-label /> <AccountBotIndicator v-if="account.bot" show-label />
</div> </div>

View file

@ -23,7 +23,7 @@ const { account, as = 'div' } = defineProps<{
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none> <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
<div flex="~" gap-2> <div flex="~" gap-2>
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg /> <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
<AccountRoleIndicator v-for="role in account.roles" :key="role.id" :role="role" /> <AccountRolesIndicator :account="account" :limit="1" />
<AccountLockIndicator v-if="account.locked" text-xs /> <AccountLockIndicator v-if="account.locked" text-xs />
<AccountBotIndicator v-if="account.bot" text-xs /> <AccountBotIndicator v-if="account.bot" text-xs />
</div> </div>

View file

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
defineProps<{
account: mastodon.v1.Account
limit?: number
}>()
</script>
<template>
<div
flex="~ gap1" items-center
class="border border-base rounded-md px-1"
text-secondary-light
>
<slot name="prepend" />
<div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
<div :style="`color: ${role.color}; border-color: ${role.color}`">
{{ role.name }}
</div>
</div>
</div>
<div
v-if="limit && account.roles?.length > limit"
flex="~ gap1" items-center
class="border border-base rounded-md px-1"
text-secondary-light
>
+{{ account.roles?.length - limit }}
</div>
</template>