oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat: Avatar decoration (#12096)

Browse source 
* wip

* Update ja-JP.yml

* Update profile.vue

* .js

* Update home.test.ts
This commit is contained in:
syuilo 2023-10-21 18:38:07 +09:00 • committed by GitHub
parent 101e5d622d
commit 2c0a139da6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 888 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<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"/>
<div v-if="user.isCat" :class="[$style.ears]">
<div :class="$style.earLeft">
@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
<img v-if="decoration || user.avatarDecorations.length > 0" :class="[$style.decoration]" :src="decoration ?? user.avatarDecorations[0].url" alt="">
</component>
</template>
@ -47,6 +48,7 @@ const props = withDefaults(defineProps<{
link?: boolean;
preview?: boolean;
indicator?: boolean;
decoration?: string;
}>(), {
target: null,
link: false,
@ -134,7 +136,7 @@ watch(() => props.user.avatarBlurhash, () => {
.indicator {
position: absolute;
z-index: 1;
z-index: 2;
bottom: 0;
left: 0;
width: 20%;
@ -278,4 +280,13 @@ watch(() => props.user.avatarBlurhash, () => {
}
}
}
.decoration {
position: absolute;
z-index: 1;
top: -50%;
left: -50%;
width: 200%;
pointer-events: none;
}
</style>