diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ec4ae4fec239d6782ff1a4509b815f5a566fe59..8612220c869277e5878f9f020fe78ccd936f8dea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,13 @@ - ### Client -- +- 「ã«ã‚ƒã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ã‚ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ã€ (`isCat`) 有効時ã«ã‚¢ãƒã‚¿ãƒ¼ã«è¡¨ç¤ºã•ã‚Œã‚‹çŒ«è€³ã«ã¤ã„ã¦æŒ™å‹•ã‚’変更 + - 「UIã«ã¼ã‹ã—効果を使用〠(`useBlurEffect`) ã§æ¬¡ã®æŒ™å‹•ãŒæœ‰åŠ¹ã«ãªã‚Šã¾ã™ + - 猫耳ã®ã‚¢ãƒã‚¿ãƒ¼å†…部部分をã¼ã‹ã—ã§ãƒžã‚¹ã‚¯è¡¨ç¤ºã—ã¦ã‚ˆã‚ŠçŒ«è€³ã£ã½ã見ãˆã‚‹ã‚ˆã†ã« + - 猫耳ã®è‰²ãŒã‚¢ãƒã‚¿ãƒ¼ä¸Šéƒ¨ã®ãƒ”クセルã‹ã‚‰æ±ºå®šã•ã‚Œã¾ã™ï¼ˆç„¡åŠ¹åŒ–時ã¯ã‚¢ãƒã‚¿ãƒ¼å…¨ä½“ã®å¹³å‡è‰²ï¼‰ + - 左耳ã¯ä¸Šã‹ã‚‰ãŠã‚ˆã 10%, å·¦ã‹ã‚‰ãŠã‚ˆã 20% ã®ä½ç½®ã§æ±ºå®šã—ã¾ã™ + - å³è€³ã¯ä¸Šã‹ã‚‰ãŠã‚ˆã 10%, å·¦ã‹ã‚‰ãŠã‚ˆã 80% ã®ä½ç½®ã§æ±ºå®šã—ã¾ã™ + - 「UIã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’減らã™ã€ (`reduceAnimation`) ã§çŒ«è€³ã‚’æ’«ã§ã‚‰ã‚Œãªããªã‚Šã¾ã™ ### Server - diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 814ab53d27197b6064a44238853406c3653e2bef..9a21941c8d84db60df7c8d1751b1e1cf4d6013f0 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -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; @@ -144,6 +157,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, @@ -225,7 +246,7 @@ watch(() => props.user.avatarBlurhash, () => { } } - &:hover { + &.animation:hover { > .ears { > .earLeft { animation: earwiggleleft 1s infinite; diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index 0d229a937072df1d872e0c00ae4dcb6cfdc7b150..710edd797ae5e8615338e4af78df85ccc83ee393 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -8,7 +8,9 @@ <template v-if="metadata"> <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> <div :class="$style.title"> @@ -249,13 +251,19 @@ onUnmounted(() => { margin-left: 24px; } -.titleAvatar { +.titleAvatarContainer { $size: 32px; - display: inline-block; + contain: strict; + overflow: clip; width: $size; height: $size; - vertical-align: bottom; - margin: 0 8px; + padding: 8px; + flex-shrink: 0; +} + +.titleAvatar { + width: 100%; + height: 100%; pointer-events: none; }