Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement "Show Below Avatar" for Avatar Decorations

Browse source
This commit is contained in:
CenTdemeern1 2024-10-02 23:49:30 +02:00
parent c224ed031f
commit 28aa99b273
9 changed files with 42 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,20 @@ 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">
@ -23,19 +37,6 @@ 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),
}"
alt=""
>
</template>
</component>
</template>
@ -113,6 +114,11 @@ function getDecorationOffset(decoration: Omit<Misskey.entities.UserDetailed['ava
return offsetX === 0 && offsetY === 0 ? undefined : `${offsetX * 100}% ${offsetY * 100}%`;
}
function getDecorationZIndex(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
const zIndex = decoration.showBelow ? 0 : 1;
return zIndex === 1 ? undefined : `${zIndex}`;
}
const color = ref<string | undefined>();
watch(() => props.user.avatarBlurhash, () => {