graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 16:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2023-01-07 17:37:30 +09:00
parent 6f4ad581dc
commit b8248bdd65
2 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/components/MkPlusOneEffect.vue
View file

@ -1,14 +1,18 @@
<template> <template>
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"> <div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<span class="text" :class="{ up }">+1</span> <span class="text" :class="{ up }">
<XReactionIcon class="icon" :reaction="reaction"/>
</span>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import XReactionIcon from '@/components/MkReactionIcon.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
reaction: string;
x: number; x: number;
y: number; y: number;
}>(), { }>(), {
@ -20,6 +24,7 @@ const emit = defineEmits<{
let up = $ref(false); let up = $ref(false);
const zIndex = os.claimZIndex('veryLow'); const zIndex = os.claimZIndex('veryLow');
const angle = (90 - (Math.random() * 180)) + 'deg';
onMounted(() => { onMounted(() => {
window.setTimeout(() => { window.setTimeout(() => {
@ -55,10 +60,11 @@ onMounted(() => {
font-weight: bold; font-weight: bold;
transform: translateY(-30px); transform: translateY(-30px);
transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5); transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
will-change: opacity, transform;
&.up { &.up {
opacity: 0; opacity: 0;
transform: translateY(-50px); transform: translateY(-50px) rotateZ(v-bind(angle));
} }
} }
} }

2
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -61,7 +61,7 @@ const anime = () => {
const rect = buttonRef.value.getBoundingClientRect(); const rect = buttonRef.value.getBoundingClientRect();
const x = rect.left + (buttonRef.value.offsetWidth / 2); const x = rect.left + (buttonRef.value.offsetWidth / 2);
const y = rect.top + (buttonRef.value.offsetHeight / 2); const y = rect.top + (buttonRef.value.offsetHeight / 2);
os.popup(MkPlusOneEffect, { x, y }, {}, 'end'); os.popup(MkPlusOneEffect, { reaction: props.reaction, x, y }, {}, 'end');
}; };
watch(() => props.count, (newCount, oldCount) => { watch(() => props.count, (newCount, oldCount) => {