usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add cheek squishing (mochimochi) feature to avatars 

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2025-10-23 10:15:05 +00:00
parent 47cf6dabad
commit f18ee937c4
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/frontend/src/components/global/MkAvatar.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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"> <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.mochimochi]: isMochimochi }]" :style="{ color }" :title="acct(user)" @click="onClick">
<MkImgWithBlurhash v-if="prefer.s.enableHighQualityImagePlaceholders" :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/> <MkImgWithBlurhash v-if="prefer.s.enableHighQualityImagePlaceholders" :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
<img v-else :class="$style.inner" :src="url" alt="" decoding="async" style="pointer-events: none;"/> <img v-else :class="$style.inner" :src="url" alt="" decoding="async" style="pointer-events: none;"/>
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
@ -55,6 +55,7 @@ import { prefer } from '@/preferences.js';
const animation = ref(prefer.s.animation); const animation = ref(prefer.s.animation);
const squareAvatars = ref(prefer.s.squareAvatars); const squareAvatars = ref(prefer.s.squareAvatars);
const isMochimochi = ref(false);
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
user: Misskey.entities.User; user: Misskey.entities.User;
@ -91,6 +92,13 @@ const url = computed(() => {
function onClick(ev: MouseEvent): void { function onClick(ev: MouseEvent): void {
if (props.link) return; if (props.link) return;
emit('click', ev); emit('click', ev);
// Trigger mochimochi animation
if (animation.value) {
isMochimochi.value = true;
setTimeout(() => {
isMochimochi.value = false;
}, 600);
}
} }
function getDecorationUrl(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) { function getDecorationUrl(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
@ -344,4 +352,29 @@ watch(() => props.user.avatarBlurhash, () => {
filter: brightness(1); filter: brightness(1);
} }
} }
@keyframes mochimochi {
0% {
transform: scale(1, 1);
}
20% {
transform: scale(0.9, 1.1);
}
40% {
transform: scale(1.1, 0.9);
}
60% {
transform: scale(0.95, 1.05);
}
80% {
transform: scale(1.02, 0.98);
}
100% {
transform: scale(1, 1);
}
}
.mochimochi {
animation: mochimochi 0.6s ease-in-out;
}
</style> </style>