diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkNotificationToast.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | sharkey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz sharkey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2 sharkey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip | |
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/MkNotificationToast.vue')
| -rw-r--r-- | packages/client/src/components/MkNotificationToast.vue | 68 |
1 files changed, 0 insertions, 68 deletions
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue deleted file mode 100644 index 07640792c0..0000000000 --- a/packages/client/src/components/MkNotificationToast.vue +++ /dev/null @@ -1,68 +0,0 @@ -<template> -<div class="mk-notification-toast" :style="{ zIndex }"> - <transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')"> - <XNotification v-if="showing" :notification="notification" class="notification _acrylic"/> - </transition> -</div> -</template> - -<script lang="ts" setup> -import { onMounted } from 'vue'; -import XNotification from '@/components/MkNotification.vue'; -import * as os from '@/os'; - -defineProps<{ - notification: any; // TODO -}>(); - -const emit = defineEmits<{ - (ev: 'closed'): void; -}>(); - -const zIndex = os.claimZIndex('high'); -let showing = $ref(true); - -onMounted(() => { - window.setTimeout(() => { - showing = false; - }, 6000); -}); -</script> - -<style lang="scss" scoped> -.notification-toast-enter-active, .notification-toast-leave-active { - transition: opacity 0.3s, transform 0.3s !important; -} -.notification-toast-enter-from, .notification-toast-leave-to { - opacity: 0; - transform: translateX(-250px); -} - -.mk-notification-toast { - position: fixed; - left: 0; - width: 250px; - top: 32px; - padding: 0 32px; - pointer-events: none; - container-type: inline-size; - - @media (max-width: 700px) { - top: initial; - bottom: 112px; - padding: 0 16px; - } - - @media (max-width: 500px) { - bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); - padding: 0 8px; - } - - > .notification { - height: 100%; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - border-radius: 8px; - overflow: hidden; - } -} -</style> |