summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkPlusOneEffect.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2023-01-08 16:17:42 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2023-01-08 16:17:42 +0900
commit7c2d2676f77310c3a4269c532f5e1d17262a5608 (patch)
tree8486100cd2d0ee5602f7d9495fe00b326371493e /packages/frontend/src/components/MkPlusOneEffect.vue
parent13.0.0-beta.30 (diff)
downloadmisskey-7c2d2676f77310c3a4269c532f5e1d17262a5608.tar.gz
misskey-7c2d2676f77310c3a4269c532f5e1d17262a5608.tar.bz2
misskey-7c2d2676f77310c3a4269c532f5e1d17262a5608.zip
refactor
Diffstat (limited to 'packages/frontend/src/components/MkPlusOneEffect.vue')
-rw-r--r--packages/frontend/src/components/MkPlusOneEffect.vue72
1 files changed, 0 insertions, 72 deletions
diff --git a/packages/frontend/src/components/MkPlusOneEffect.vue b/packages/frontend/src/components/MkPlusOneEffect.vue
deleted file mode 100644
index af3a6c0e41..0000000000
--- a/packages/frontend/src/components/MkPlusOneEffect.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
- <span class="text" :class="{ up }">
- <MkReactionIcon class="icon" :reaction="reaction"/>
- </span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
-
-const props = withDefaults(defineProps<{
- reaction: string;
- x: number;
- y: number;
-}>(), {
-});
-
-const emit = defineEmits<{
- (ev: 'end'): void;
-}>();
-
-let up = $ref(false);
-const zIndex = os.claimZIndex('veryLow');
-const angle = (90 - (Math.random() * 180)) + 'deg';
-
-onMounted(() => {
- window.setTimeout(() => {
- up = true;
- }, 10);
-
- window.setTimeout(() => {
- emit('end');
- }, 1100);
-});
-</script>
-
-<style lang="scss" module>
-.root {
- pointer-events: none;
- position: fixed;
- width: 128px;
- height: 128px;
-
- &:global {
- > .text {
- display: block;
- height: 1em;
- text-align: center;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- color: var(--accent);
- font-size: 18px;
- font-weight: bold;
- transform: translateY(-30px);
- transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
- will-change: opacity, transform;
-
- &.up {
- opacity: 0;
- transform: translateY(-50px) rotateZ(v-bind(angle));
- }
- }
- }
-}
-</style>