mirror of
https://github.com/elk-zone/elk
synced 2024-11-23 14:46:08 +09:00
feat: use square avatars for logged in user
This commit is contained in:
parent
640075fed1
commit
e5a9bd7370
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -7,6 +7,7 @@
|
||||
h-8
|
||||
w-8
|
||||
:draggable="false"
|
||||
square
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
@ -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" />
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user