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

Merge branch 'develop' of https://github.com/misskey-dev/misskey into storybook

Browse source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-03 13:44:32 +09:00
commit 8d90e88e16
No known key found for this signature in database
GPG key ID: 3E87B98A3F6BAB99
22 changed files with 190 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$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">
<img :class="$style.inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
<div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]">
@ -27,6 +27,7 @@ import { acct, userPage } from '@/filters/user';
import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
import { defaultStore } from '@/store';
const animation = $ref(defaultStore.state.animation);
const squareAvatars = $ref(defaultStore.state.squareAvatars);
const useBlurEffect = $ref(defaultStore.state.useBlurEffect);
@ -86,6 +87,18 @@ watch(() => props.user.avatarBlurhash, () => {
to { transform: rotate(-37.6deg) skew(-30deg); }
}
@keyframes eartightleft {
from { transform: rotate(37.6deg) skew(30deg); }
50% { transform: rotate(37.4deg) skew(30deg); }
to { transform: rotate(37.6deg) skew(30deg); }
}
@keyframes eartightright {
from { transform: rotate(-37.6deg) skew(-30deg); }
50% { transform: rotate(-37.4deg) skew(-30deg); }
to { transform: rotate(-37.6deg) skew(-30deg); }
}
.root {
position: relative;
display: inline-block;
@ -145,6 +158,14 @@ watch(() => props.user.avatarBlurhash, () => {
mask:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><filter id="a"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter><circle cx="16" cy="16" r="15" filter="url(%23a)"/></svg>') exclude center / 50% 50%,
linear-gradient(#fff, #fff); // polyfill of `image(#fff)`
> .earLeft {
animation: eartightleft 6s infinite;
}
> .earRight {
animation: eartightright 6s infinite;
}
}
> .earLeft,
@ -226,7 +247,7 @@ watch(() => props.user.avatarBlurhash, () => {
}
}
&:hover {
&.animation:hover {
> .ears {
> .earLeft {
animation: earwiggleleft 1s infinite;