Merge pull request #10420 from misskey-dev/acid-chicken-patch-1

fix: #10413
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-03 13:01:24 +09:00 committed by GitHub
commit 58f3a2ee94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 8 deletions

View File

@ -5,7 +5,13 @@
- -
### Client ### Client
- - 「にゃああああああああああああああ!!!!!!!!!!!!」 (`isCat`) 有効時にアバターに表示される猫耳について挙動を変更
- 「UIにぼかし効果を使用」 (`useBlurEffect`) で次の挙動が有効になります
- 猫耳のアバター内部部分をぼかしでマスク表示してより猫耳っぽく見えるように
- 猫耳の色がアバター上部のピクセルから決定されます(無効化時はアバター全体の平均色)
- 左耳は上からおよそ 10%, 左からおよそ 20% の位置で決定します
- 右耳は上からおよそ 10%, 左からおよそ 80% の位置で決定します
- 「UIのアニメーションを減らす」 (`reduceAnimation`) で猫耳を撫でられなくなります
### Server ### Server
- -

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);
@ -86,6 +87,18 @@ watch(() => props.user.avatarBlurhash, () => {
to { transform: rotate(-37.6deg) skew(-30deg); } 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 { .root {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -144,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: eartightleft 6s infinite;
}
> .earRight {
animation: eartightright 6s infinite;
}
} }
> .earLeft, > .earLeft,
@ -225,7 +246,7 @@ watch(() => props.user.avatarBlurhash, () => {
} }
} }
&:hover { &.animation:hover {
> .ears { > .ears {
> .earLeft { > .earLeft {
animation: earwiggleleft 1s infinite; animation: earwiggleleft 1s infinite;

View File

@ -8,7 +8,9 @@
<template v-if="metadata"> <template v-if="metadata">
<div v-if="!hideTitle" :class="$style.titleContainer" @click="top"> <div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/> <div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
</div>
<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i> <i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
<div :class="$style.title"> <div :class="$style.title">
@ -249,13 +251,19 @@ onUnmounted(() => {
margin-left: 24px; margin-left: 24px;
} }
.titleAvatar { .titleAvatarContainer {
$size: 32px; $size: 32px;
display: inline-block; contain: strict;
overflow: clip;
width: $size; width: $size;
height: $size; height: $size;
vertical-align: bottom; padding: 8px;
margin: 0 8px; flex-shrink: 0;
}
.titleAvatar {
width: 100%;
height: 100%;
pointer-events: none; pointer-events: none;
} }