etc/Sharkey
0
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey synced 2024-11-22 14:05:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use negative z-index to position decorations behind the avatar

Browse source 
Co-authored-by: dakkar <dakkar@thenautilus.net>
This commit is contained in:
CenTdemeern1 2024-10-03 19:12:10 +02:00
parent e43c58a955
commit cb264dae75
1 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
packages/frontend/src/components/global/MkAvatar.vue
View file

@ -7,20 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/> <MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
<template v-if="showDecoration">
<img
v-for="decoration in decorations ?? user.avatarDecorations"
:class="[$style.decoration]"
:src="getDecorationUrl(decoration)"
:style="{
rotate: getDecorationAngle(decoration),
scale: getDecorationScale(decoration),
translate: getDecorationOffset(decoration),
zIndex: getDecorationZIndex(decoration),
}"
alt=""
>
</template>
<div v-if="user.isCat" :class="[$style.ears]"> <div v-if="user.isCat" :class="[$style.ears]">
<div :class="$style.earLeft"> <div :class="$style.earLeft">
<div v-if="false" :class="$style.layer"> <div v-if="false" :class="$style.layer">
@ -37,6 +23,20 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<template v-if="showDecoration">
<img
v-for="decoration in decorations ?? user.avatarDecorations"
:class="[$style.decoration]"
:src="getDecorationUrl(decoration)"
:style="{
rotate: getDecorationAngle(decoration),
scale: getDecorationScale(decoration),
translate: getDecorationOffset(decoration),
zIndex: getDecorationZIndex(decoration),
}"
alt=""
>
</template>
</component> </component>
</template> </template>
@ -115,7 +115,7 @@ function getDecorationOffset(decoration: Omit<Misskey.entities.UserDetailed['ava
} }
function getDecorationZIndex(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) { function getDecorationZIndex(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
return decoration.showBelow ? '0' : undefined; return decoration.showBelow ? '-1' : undefined;
} }
const color = ref<string | undefined>(); const color = ref<string | undefined>();
@ -164,6 +164,7 @@ watch(() => props.user.avatarBlurhash, () => {
flex-shrink: 0; flex-shrink: 0;
border-radius: 100%; // sharkey: controlled by square avatars setting! border-radius: 100%; // sharkey: controlled by square avatars setting!
line-height: 16px; line-height: 16px;
z-index: 0; // sharkey: starts stacking context to help with showing decorations behind the avatar
} }
.inner { .inner {