feat: use square avatars for logged in user

This commit is contained in:
patak 2023-01-05 13:10:22 +01:00
parent 640075fed1
commit e5a9bd7370
6 changed files with 9 additions and 6 deletions

View file

@ -3,6 +3,7 @@ import type { Account } from 'masto'
defineProps<{
account: Account
square?: boolean
}>()
const loaded = $ref(false)
@ -17,8 +18,7 @@ const error = $ref(false)
:src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
:alt="$t('account.avatar_description', [account.username])"
loading="lazy"
rounded-full
:class="loaded ? 'bg-base' : 'bg-gray:10'"
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' rounded-3' : ' rounded-full')"
v-bind="$attrs"
@load="loaded = true"
@error="error = true"

View file

@ -6,11 +6,12 @@ import type { Account } from 'masto'
defineProps<{
account: Account
square?: boolean
}>()
</script>
<template>
<div :key="account.avatar" v-bind="$attrs" rounded-full bg-base w-54px h-54px flex items-center justify-center>
<AccountAvatar :account="account" w-48px h-48px />
<AccountAvatar :account="account" w-48px h-48px :square="square" />
</div>
</template>

View file

@ -5,6 +5,7 @@ const { account, as = 'div' } = defineProps<{
account: Account
as?: string
hoverCard?: boolean
square?: boolean
}>()
defineOptions({
@ -17,7 +18,7 @@ defineOptions({
<template>
<component :is="as" flex gap-3 v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account">
<AccountBigAvatar :account="account" shrink-0 />
<AccountBigAvatar :account="account" shrink-0 :square="square" />
</AccountHoverWrapper>
<div flex="~ col" shrink overflow-hidden justify-center leading-none>
<div flex="~" gap-2>

View file

@ -7,6 +7,7 @@
h-8
w-8
:draggable="false"
square
/>
</div>

View file

@ -2,7 +2,7 @@
<VDropdown :distance="0" placement="top-start">
<button btn-action-icon :aria-label="$t('action.switch_account')">
<div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
<AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 />
<AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square />
</button>
<template #popper="{ hide }">
<UserSwitcher @click="hide" />

View file

@ -28,7 +28,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
hover:bg-active cursor-pointer transition-100
:to="getAccountRoute(currentUser.account)"
>
<AccountInfo :account="currentUser.account" md:break-words />
<AccountInfo :account="currentUser.account" md:break-words square />
</NuxtLink>
<UserDropdown />
</div>