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

🎨

Browse source
This commit is contained in:
syuilo 2024-08-20 10:51:02 +09:00
parent 59e83605ac
commit 1b5f0571f7
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-if="showDecoration"> <template v-if="showDecoration">
<img <img
v-for="decoration in decorations ?? user.avatarDecorations" v-for="decoration in decorations ?? user.avatarDecorations"
:class="[$style.decoration]" :class="[$style.decoration, { [$style.decorationBlink]: decoration.blink }]"
:src="getDecorationUrl(decoration)" :src="getDecorationUrl(decoration)"
:style="{ :style="{
rotate: getDecorationAngle(decoration), rotate: getDecorationAngle(decoration),
@ -60,7 +60,7 @@ const props = withDefaults(defineProps<{
link?: boolean; link?: boolean;
preview?: boolean; preview?: boolean;
indicator?: boolean; indicator?: boolean;
decorations?: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>[]; decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[];
forceShowDecoration?: boolean; forceShowDecoration?: boolean;
}>(), { }>(), {
target: null, target: null,
@ -330,4 +330,17 @@ watch(() => props.user.avatarBlurhash, () => {
width: 200%; width: 200%;
pointer-events: none; pointer-events: none;
} }
.decorationBlink {
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% {
filter: brightness(2);
}
50% {
filter: brightness(1);
}
}
</style> </style>

1
packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
View file

@ -96,6 +96,7 @@ const decorationsForPreview = computed(() => {
flipH: flipH.value, flipH: flipH.value,
offsetX: offsetX.value, offsetX: offsetX.value,
offsetY: offsetY.value, offsetY: offsetY.value,
blink: true,
}; };
const decorations = [...$i.avatarDecorations]; const decorations = [...$i.avatarDecorations];
if (props.usingIndex != null) { if (props.usingIndex != null) {