nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-17 15:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

triangle fix in notification center

Browse Source
This commit is contained in:
Čarodej
2022-05-18 10:03:43 +02:00
parent aa30b519fa
commit 1e10ff32a8
1 changed files with 111 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
resources/js/components/Notifications/NotificationCenter.vue
View File

@@ -1,101 +1,133 @@
<template>
<transition name="popup">
<div class="fixed popup z-20 top-[27px] bottom-[27px] left-20 w-[360px]">
<transition name="popup">
<div class="popup fixed top-[27px] bottom-[27px] left-20 z-20 w-[360px]">
<!--Triangle-->
<div
v-if="! isEmpty"
class="absolute left-0 z-20 inline-block w-4 translate-x-[-15px] overflow-hidden"
:class="{
'top-[64px]': config.subscriptionType !== 'metered',
'top-[102px]': config.subscriptionType === 'metered',
}"
>
<div
class="h-12 origin-top-right -rotate-45 transform bg-white bg-opacity-80 backdrop-blur-2xl dark:bg-2x-dark-foreground"
></div>
</div>
<!--Triangle-->
<div class="z-20 absolute left-0 top-[64px] w-4 translate-x-[-15px] overflow-hidden inline-block" :class="{'!top-[102px]': config.subscriptionType === 'metered'}">
<div class="h-12 -rotate-45 transform origin-top-right dark:bg-2x-dark-foreground bg-white bg-opacity-80 backdrop-blur-2xl"></div>
</div>
<div
v-click-outside="clickOutside"
class="max-h-full overflow-y-auto rounded-xl bg-white bg-opacity-80 p-3 text-left shadow-xl backdrop-blur-2xl dark:bg-2x-dark-foreground dark:bg-opacity-80 dark:backdrop-blur-2xl"
>
<!--Title-->
<b class="mb-2.5 block px-2.5 text-xl font-extrabold dark:text-gray-200">
{{ $t('notification_center') }}
</b>
<div v-click-outside="clickOutside" class="dark:bg-2x-dark-foreground bg-white dark:bg-opacity-80 dark:backdrop-blur-2xl bg-opacity-80 backdrop-blur-2xl shadow-xl rounded-xl text-left p-3 overflow-y-auto max-h-full">
<div class="px-2.5">
<MobileActionButton
v-if="readNotifications.length || unreadNotifications.length"
@click.native="$store.dispatch('deleteAllNotifications')"
icon="check-square"
class="mb-2 dark:!bg-4x-dark-foreground"
>
{{ $t('clear_all') }}
</MobileActionButton>
<!--Title-->
<b class="dark:text-gray-200 text-xl font-extrabold px-2.5 mb-2.5 block">
{{ $t('notification_center') }}
</b>
<p v-if="isEmpty" class="mt-1 text-sm">
{{ $t('not_any_notifications') }}
</p>
</div>
<div class="px-2.5">
<MobileActionButton v-if="readNotifications.length || unreadNotifications.length" @click.native="$store.dispatch('deleteAllNotifications')" icon="check-square" class="mb-2 dark:!bg-4x-dark-foreground">
{{ $t('clear_all') }}
</MobileActionButton>
<b
v-if="unreadNotifications.length"
class="dark-text-theme mt-1.5 mb-2.5 block px-2.5 text-xs text-gray-400"
>
{{ $t('unread') }}
</b>
<p v-if="!readNotifications.length && !unreadNotifications.length" class="text-sm mt-8">
{{ $t("not_any_notifications") }}
</p>
</div>
<Notification
:notification="notification"
v-for="notification in unreadNotifications"
:key="notification.id"
/>
<b v-if="unreadNotifications.length" class="dark-text-theme mt-1.5 block px-2.5 mb-2.5 text-xs text-gray-400">
{{ $t('unread') }}
</b>
<b
v-if="readNotifications.length"
class="dark-text-theme mt-2.5 mb-2.5 block px-2.5 text-xs text-gray-400"
>
{{ $t('read') }}
</b>
<Notification :notification="notification" v-for="notification in unreadNotifications" :key="notification.id" />
<b v-if="readNotifications.length" class="dark-text-theme mt-2.5 block px-2.5 mb-2.5 text-xs text-gray-400">
{{ $t('read') }}
</b>
<Notification :notification="notification" v-for="notification in readNotifications" :key="notification.id" />
</div>
</div>
</transition>
<Notification
:notification="notification"
v-for="notification in readNotifications"
:key="notification.id"
/>
</div>
</div>
</transition>
</template>
<script>
import MobileActionButton from "../UI/Buttons/MobileActionButton"
import Notification from "./Components/Notification"
import MobileActionButton from '../UI/Buttons/MobileActionButton'
import Notification from './Components/Notification'
import vClickOutside from 'v-click-outside'
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: 'NotificationCenter',
components: {
MobileActionButton,
Notification
},
directives: {
clickOutside: vClickOutside.directive
},
computed: {
...mapGetters([
'user', 'config', 'isVisibleNotificationCenter',
]),
readNotifications() {
return this.user.data.relationships.readNotifications.data
},
unreadNotifications() {
return this.user.data.relationships.unreadNotifications.data
}
},
methods: {
clickOutside() {
if (this.isVisibleNotificationCenter)
this.$store.commit('CLOSE_NOTIFICATION_CENTER')
},
},
created() {
this.$store.dispatch('readAllNotifications')
}
name: 'NotificationCenter',
components: {
MobileActionButton,
Notification,
},
directives: {
clickOutside: vClickOutside.directive,
},
computed: {
...mapGetters(['user', 'config', 'isVisibleNotificationCenter']),
isEmpty() {
return (
!this.user.data.relationships.readNotifications.data.length &&
!this.user.data.relationships.unreadNotifications.data.length
)
},
readNotifications() {
return this.user.data.relationships.readNotifications.data
},
unreadNotifications() {
return this.user.data.relationships.unreadNotifications.data
},
},
methods: {
clickOutside() {
if (this.isVisibleNotificationCenter) this.$store.commit('CLOSE_NOTIFICATION_CENTER')
},
},
created() {
this.$store.dispatch('readAllNotifications')
},
}
</script>
<style lang="scss" scoped>
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
}
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
}
.popup-enter-active {
animation: popup-slide-in 0.25s 0.1s ease both;
}
.popup-enter-active {
animation: popup-slide-in 0.25s 0.1s ease both;
}
@keyframes popup-slide-in {
0% {
opacity: 0;
transform: translateY(50px);
}
@keyframes popup-slide-in {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>