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