summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkNotificationToast.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
commit9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch)
treece5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkNotificationToast.vue
parentwip: retention for dashboard (diff)
downloadsharkey-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.vue68
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>