monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

chore: respect the animation preference

Browse source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-03-27 05:16:39 +00:00 committed by GitHub
parent 07cfab0489
commit 4d3f0be419
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <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"/> <img :class="$style.inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
<div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]"> <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 MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
const animation = $ref(defaultStore.state.animation);
const squareAvatars = $ref(defaultStore.state.squareAvatars); const squareAvatars = $ref(defaultStore.state.squareAvatars);
const useBlurEffect = $ref(defaultStore.state.useBlurEffect); const useBlurEffect = $ref(defaultStore.state.useBlurEffect);
@ -156,6 +157,14 @@ watch(() => props.user.avatarBlurhash, () => {
mask: 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%, 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)` linear-gradient(#fff, #fff); // polyfill of `image(#fff)`
> .earLeft {
animation: eartightright 6s infinite;
}
> .earRight {
animation: eartightleft 6s infinite;
}
} }
> .earLeft, > .earLeft,
@ -196,7 +205,6 @@ watch(() => props.user.avatarBlurhash, () => {
> .earLeft { > .earLeft {
transform: rotate(37.5deg) skew(30deg); transform: rotate(37.5deg) skew(30deg);
animation: eartightleft 6s infinite;
&, &::after { &, &::after {
border-radius: 0 75% 75%; border-radius: 0 75% 75%;
@ -218,7 +226,6 @@ watch(() => props.user.avatarBlurhash, () => {
> .earRight { > .earRight {
transform: rotate(-37.5deg) skew(-30deg); transform: rotate(-37.5deg) skew(-30deg);
animation: eartightright 6s infinite;
&, &::after { &, &::after {
border-radius: 75% 0 75% 75%; border-radius: 75% 0 75% 75%;
@ -239,7 +246,7 @@ watch(() => props.user.avatarBlurhash, () => {
} }
} }
&:hover { &.animation:hover {
> .ears { > .ears {
> .earLeft { > .earLeft {
animation: earwiggleleft 1s infinite; animation: earwiggleleft 1s infinite;