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

notification implementation into the toaster

Browse Source
This commit is contained in:
Čarodej
2022-03-12 08:40:35 +01:00
parent 0e45092795
commit 9e973b89ce
16 changed files with 294 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -20,7 +20,7 @@
</template>
<script>
import ToasterWrapper from './components/Others/Notifications/ToasterWrapper'
import ToasterWrapper from './components/Others/Notifications/ToasterNotifications'
import CookieDisclaimer from './components/Others/CookieDisclaimer'
import Spinner from './components/FilesView/Spinner'
import Vignette from './components/Others/Vignette'

14
resources/js/components/Notifications/Notification.vue
View File

@@ -1,21 +1,21 @@
<template>
<article
class="delay-[3000ms] duration-700 transition-all relative z-20 mb-1.5 flex items-start space-x-4 rounded-xl p-2.5"
class="delay-[3000ms] duration-700 transition-all relative z-[11] mb-1.5 flex items-start space-x-4 rounded-xl p-2.5"
:class="{'dark:bg-4x-dark-foreground bg-light-background/80': isUnread}"
>
<user-plus-icon
v-if="notification.data.attributes.type === 'team-invitation'"
size="20"
v-if="notification.data.attributes.category === 'team-invitation'"
size="22"
class="vue-feather text-theme shrink-0"
/>
<upload-cloud-icon
v-if="['file-request', 'remote-upload-done'].includes(notification.data.attributes.type)"
size="20"
v-if="['file-request', 'remote-upload-done'].includes(notification.data.attributes.category)"
size="22"
class="vue-feather text-theme shrink-0"
/>
<div>
<b class="mb-1.5 block text-sm font-extrabold">
<b class="mb-1.5 block font-extrabold">
{{ notification.data.attributes.title }}
</b>
@@ -119,7 +119,7 @@ export default {
})
},
closeCenter() {
this.$store.commit('TOGGLE_NOTIFICATION_CENTER')
this.$store.commit('CLOSE_NOTIFICATION_CENTER')
},
},
created() {

46
resources/js/components/Others/Notifications/Toaster.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<transition appear name="fade">
<div
class="relative w-full overflow-hidden rounded-xl bg-opacity-80 p-4 shadow-lg backdrop-blur-2xl"
:class="{
'bg-red-50 dark:bg-2x-dark-foreground': item.type === 'danger',
'bg-green-50 dark:bg-2x-dark-foreground': item.type === 'success',
}"
>
<!--Content-->
<div class="flex items-center justify-between">
<div class="flex items-start">
<div>
<check-icon v-if="item.type === 'success'" size="22" class="vue-feather dark:text-green-600 text-green-600" />
<x-icon v-if="item.type === 'danger'" size="22" class="vue-feather dark:text-red-600 text-red-600" />
</div>
<p
class="px-4 font-bold"
:class="{
'text-green-600': item.type === 'success',
'text-red-600': item.type === 'danger',
}"
>
{{ item.message }}
</p>
</div>
</div>
</div>
</transition>
</template>
<script>
import { CheckIcon } from 'vue-feather-icons'
export default {
name: 'Toaster',
components: {
CheckIcon,
},
props: [
'barColor',
'item',
],
}
</script>

101
resources/js/components/Others/Notifications/ToasterItem.vue
View File

@@ -1,101 +0,0 @@
<template>
<transition appear name="fade">
<div
v-if="isActive"
class="relative mt-4 w-full overflow-hidden rounded-xl bg-opacity-80 p-4 shadow-lg backdrop-blur-lg backdrop-filter md:w-96"
:class="{
'bg-red-50 dark:bg-2x-dark-foreground': isDanger,
'bg-green-50 dark:bg-2x-dark-foreground': isSuccess,
}"
>
<!--Content-->
<div class="flex items-center justify-between">
<div class="flex items-center">
<div>
<check-icon v-if="isSuccess" size="22" class="vue-feather dark:text-green-600 text-green-600" />
<x-icon v-if="isDanger" size="22" class="vue-feather dark:text-red-600 text-red-600" />
</div>
<p
class="px-4 font-bold"
:class="{
'text-green-600': isSuccess,
'text-red-600': isDanger,
}"
>
{{ item.message }}
</p>
</div>
<div @click="isActive = false" class="cursor-pointer p-2">
<x-icon size="16" class="vue-feather text-black opacity-50 dark:text-white" />
</div>
</div>
<!--Progress bar-->
<div class="absolute bottom-0 left-0 right-0">
<span
class="bar-animation block h-1 w-0"
:class="{
'bg-green-400': isSuccess,
'bg-red-400': isDanger,
}"
></span>
</div>
</div>
</transition>
</template>
<script>
import { XIcon, CheckIcon } from 'vue-feather-icons'
export default {
components: {
CheckIcon,
XIcon,
},
props: ['item'],
computed: {
isDanger() {
return this.item.type === 'danger'
},
isSuccess() {
return this.item.type === 'success'
},
},
data() {
return {
isActive: 1,
}
},
created() {
setTimeout(() => (this.isActive = 0), 6000)
},
}
</script>
<style lang="scss" scoped>
.bar-animation {
animation: progressbar 6s linear;
}
@keyframes progressbar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.fade-enter-active,
.fade-leave-active {
transition: 0.3s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100%);
}
</style>

79
resources/js/components/Others/Notifications/ToasterNotifications.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div
v-if="toasters.length || notifications.length"
class="fixed bottom-4 right-4 left-4 z-50 sm:w-[360px] sm:left-auto lg:bottom-8 lg:right-8"
>
<ToasterWrapper
v-for="notification in notifications"
:key="notification.data.id"
class="mt-4 overflow-hidden rounded-xl dark:bg-2x-dark-foreground bg-white/80 backdrop-blur-2xl shadow-xl"
bar-color="bg-theme"
>
<Notification :notification="notification" class="z-10 !mb-0 !px-4 !pt-4 !pb-5" />
</ToasterWrapper>
<ToasterWrapper
v-for="(toaster, i) in toasters"
:key="i"
class="mt-4 overflow-hidden rounded-xl shadow-xl"
:bar-color="getToasterColor(toaster)"
>
<Toaster :item="toaster" />
</ToasterWrapper>
</div>
</template>
<script>
import Notification from '../../Notifications/Notification'
import ToasterWrapper from './ToasterWrapper'
import {events} from '../../../bus'
import Toaster from './Toaster'
export default {
components: {
ToasterWrapper,
Notification,
Toaster,
},
data() {
return {
notifications: [],
toasters: [],
}
},
methods: {
getToasterColor(toaster) {
return {
danger: 'bg-red-400',
success: 'bg-green-400',
}[toaster.type]
}
},
created() {
events.$on('toaster', (toaster) => this.toasters.push(toaster))
events.$on('notification', (notification) => this.notifications.push(notification))
/*events.$emit('notification', {
data: {
type: 'file-request',
id: 'df954d23-f9d4-4677-85c8-abfd48aaa090',
attributes: {
action: {
type: 'route',
params: {
route: 'Files',
button: 'Show Files',
id: 'ae37b1d8-c147-489a-83ab-2a3c7cb86263',
},
},
created_at: '',
description: "Your file request for 'Multi Level Folder' folder was filled successfully.",
read_at: '',
title: 'File Request Filled',
category: 'file-request',
},
},
})*/
},
}
</script>

76
resources/js/components/Others/Notifications/ToasterWrapper.vue
View File

@@ -1,24 +1,64 @@
<template>
<div v-if="notifications.length > 0" class="fixed bottom-4 right-4 left-4 z-50 md:left-auto lg:bottom-8 lg:right-8">
<ToasterItem :item="item" v-for="(item, i) in notifications" :key="i" />
</div>
<transition v-if="isActive" appear name="fade">
<div class="relative">
<div @click="isActive = false" class="absolute z-[20] right-0 top-0 cursor-pointer p-2">
<x-icon size="16" class="vue-feather text-black opacity-10 dark:text-white" />
</div>
<slot />
<!--Progress bar-->
<div class="absolute bottom-0 left-0 right-0 z-20">
<span class="bar-animation block h-1 w-0" :class="barColor"></span>
</div>
</div>
</transition>
</template>
<script>
import ToasterItem from './ToasterItem'
import { events } from '../../../bus'
import { XIcon } from 'vue-feather-icons'
export default {
components: {
ToasterItem,
},
data() {
return {
notifications: [],
}
},
created() {
events.$on('toaster', (notification) => this.notifications.push(notification))
},
}
export default {
name: 'Toast',
props: [
'barColor'
],
components: {
XIcon,
},
data() {
return {
isActive: 1,
}
},
created() {
setTimeout(() => (this.isActive = 0), 6000)
},
}
</script>
<style lang="scss" scoped>
.bar-animation {
animation: progressbar 6s linear both;
}
@keyframes progressbar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.fade-enter-active,
.fade-leave-active {
transition: 0.3s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100%);
}
</style>

3
resources/js/store/modules/app.js vendored
View File

@@ -175,6 +175,9 @@ const mutations = {
TOGGLE_NOTIFICATION_CENTER(state) {
state.isVisibleNotificationCenter = !state.isVisibleNotificationCenter
},
CLOSE_NOTIFICATION_CENTER(state) {
state.isVisibleNotificationCenter = false
},
}
const getters = {

24
resources/js/store/modules/broadcasting.js vendored
View File

@@ -1,3 +1,5 @@
import {events} from "../../bus";
const defaultState = {
isRunningConnection: false,
}
@@ -8,8 +10,26 @@ const actions = {
commit('SET_RUNNING_COMMUNICATION')
Echo.private(`App.Users.Models.User.${getters.user.data.id}`)
.notification(() => {
// TODO: call sound
.notification((notification) => {
// Play audio
new Audio('/audio/blop.wav').play();
// Call toaster notification
events.$emit('notification', {
data: {
type: notification.category,
id: notification.id,
attributes: {
action: notification.action,
description: notification.description,
title: notification.title,
category: notification.category,
},
},
})
// Reload user data to update notifications
dispatch('getAppData')
});
},