keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-22 05:35:11 +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">
<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
<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 :class="$style.earLeft">
<div v-if="false" :class="$style.layer">
@ -37,6 +23,20 @@ SPDX-License-Identifier: AGPL-3.0-only
</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>
</template>
@ -115,7 +115,7 @@ function getDecorationOffset(decoration: Omit<Misskey.entities.UserDetailed['ava
}
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>();
@ -164,6 +164,7 @@ watch(() => props.user.avatarBlurhash, () => {
flex-shrink: 0;
border-radius: 100%; // sharkey: controlled by square avatars setting!
line-height: 16px;
z-index: 0; // sharkey: starts stacking context to help with showing decorations behind the avatar
}
.inner {