mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
notification implementation into the toaster
This commit is contained in:
Čarodej
@@ -37,7 +37,7 @@ return [
|
||||
'cluster' => env('PUSHER_APP_CLUSTER'),
|
||||
'encrypted' => true,
|
||||
'host' => env('PUSHER_APP_HOST'),
|
||||
'port' => 6001,
|
||||
'port' => 8002,
|
||||
'scheme' => env('APP_ENV') === 'local' ? 'http' : 'https',
|
||||
],
|
||||
],
|
||||
|
||||
BIN
public/audio/blop.wav
Normal file
BIN
public/audio/blop.wav
Normal file
Binary file not shown.
@@ -1,75 +1,75 @@
|
||||
{
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/chunks/request.js": "/chunks/request.js?id=9f35a28f17cf0081",
|
||||
"/chunks/request-upload.js": "/chunks/request-upload.js?id=143750d456a5d143",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=3c2fc454c3fce8d2",
|
||||
"/chunks/status-check.js": "/chunks/status-check.js?id=1ce085bce8a9e959",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=957577e6eb9bae5d",
|
||||
"/chunks/database.js": "/chunks/database.js?id=cd8195615624bf64",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=1153d1ccda1626d3",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=8f3130f31073813a",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=3ca1c2c54a26a225",
|
||||
"/chunks/shared.js": "/chunks/shared.js?id=061c5bef191b4eeb",
|
||||
"/chunks/shared/browser.js": "/chunks/shared/browser.js?id=838aefcacf6b225b",
|
||||
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=8cc8a58938f6a3c1",
|
||||
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=dc1a48627066c81d",
|
||||
"/chunks/not-found.js": "/chunks/not-found.js?id=026c52609cff0249",
|
||||
"/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=250d923cb7001cf2",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=69e6ada3d3062506",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=94dfb7c678309b6e",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=0817b6e71b0da736",
|
||||
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=aa4ca6695a4c43f2",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=b18e753a266e4d6e",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=0122891b250ee8c7",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=8950c28ea8d9273d",
|
||||
"/chunks/users.js": "/chunks/users.js?id=16f7770d2b8a7043",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js?id=5b1f7e752521c02a",
|
||||
"/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=44bbf94f2267d262",
|
||||
"/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=cfb50d511c78ec04",
|
||||
"/chunks/user.js": "/chunks/user.js?id=c12de27dc40aef36",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js?id=3c2bbf0a6ef97c1c",
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=e5c9e1b59264172a",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=21154e4250e890b3",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js?id=d6d72d8a0f08cac4",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js?id=b95a20df2fd09190",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=2444730c1a0a42fc",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=f75a62dc82dfd06d",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=889139d2e1679331",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=14cb6e7146563c8c",
|
||||
"/chunks/payments.js": "/chunks/payments.js?id=5ea275fedd8d638a",
|
||||
"/chunks/payments/billings.js": "/chunks/payments/billings.js?id=a0757d9c2608d7ad",
|
||||
"/chunks/payments/settings.js": "/chunks/payments/settings.js?id=09b5ed53c184aefc",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=b0ca7cdad56e46fd",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=47f92b72e275c2c8",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=6255a58886c31bc6",
|
||||
"/chunks/app-environment.js": "/chunks/app-environment.js?id=9d37862ac5c57c1e",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=918ccb0a9edff971",
|
||||
"/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=9e6099c710a1f774",
|
||||
"/chunks/app-adsense.js": "/chunks/app-adsense.js?id=ce66e5cd4d33b77f",
|
||||
"/chunks/app-server.js": "/chunks/app-server.js?id=000b75779c7b2df7",
|
||||
"/chunks/app-language.js": "/chunks/app-language.js?id=9fea501b5651db74",
|
||||
"/chunks/homepage.js": "/chunks/homepage.js?id=cc55de7273bd9699",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=a20e623585f77df6",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=5d02f74ec520ae00",
|
||||
"/chunks/successfully-email-verified.js": "/chunks/successfully-email-verified.js?id=cadce663beaa7f88",
|
||||
"/chunks/successfully-email-send.js": "/chunks/successfully-email-send.js?id=f14b81ce738531a5",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=5d8ffa33a3b2ef19",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=7ef0f23926cf5303",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=283220c4946806d4",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=59775b0f2612479a",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=1f116c3d7c5ddd10",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=ec621bd75eada0ee",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=3e094b17498f56df",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=cddf4c1f69a29992",
|
||||
"/chunks/billing.js": "/chunks/billing.js?id=9a21ec44813c1ac7",
|
||||
"/chunks/platform.js": "/chunks/platform.js?id=755afc245020a06e",
|
||||
"/chunks/files.js": "/chunks/files.js?id=ea0f4500b46bef98",
|
||||
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=5b98e7e6bd0ffb67",
|
||||
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=98c0b0670116e2e7",
|
||||
"/chunks/trash.js": "/chunks/trash.js?id=74b178eb50c86823",
|
||||
"/chunks/team-folders.js": "/chunks/team-folders.js?id=58560da0602c1d6c",
|
||||
"/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=c7b7a7703f4f6d11",
|
||||
"/chunks/invitation.js": "/chunks/invitation.js?id=4884f1794da246a6",
|
||||
"/chunks/request.js": "/chunks/request.js?id=33e1def79a2b3088",
|
||||
"/chunks/request-upload.js": "/chunks/request-upload.js?id=575487e7851294ba",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
|
||||
"/chunks/status-check.js": "/chunks/status-check.js?id=6bae83a7e38d3b1c",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=0d001d4505d2f5e9",
|
||||
"/chunks/database.js": "/chunks/database.js?id=d5695176ac8edfb9",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=c58071cb9d14e595",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=ad92e971daa0f86d",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=286b9872565b5e96",
|
||||
"/chunks/shared.js": "/chunks/shared.js?id=8bc860799e9e02e9",
|
||||
"/chunks/shared/browser.js": "/chunks/shared/browser.js?id=4646ca03695e5f24",
|
||||
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=ea864000ec2646d4",
|
||||
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=92c75a6c77689046",
|
||||
"/chunks/not-found.js": "/chunks/not-found.js?id=36763aa314e00327",
|
||||
"/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=a3906226272982b1",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=da1e0f1255856e3a",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=a554aec2e4a1d679",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=f89964a5a55ace45",
|
||||
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=62582c26b6288d7d",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=38c76f5552161514",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=dbdaf49f7c709ab9",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=b5e1384c6e697927",
|
||||
"/chunks/users.js": "/chunks/users.js?id=f41910a94ca4e36f",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js?id=c620606ec7eef9d7",
|
||||
"/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=5515d5a19259eadf",
|
||||
"/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=94d6ef85f6a58265",
|
||||
"/chunks/user.js": "/chunks/user.js?id=7e567c0cb7f641d6",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js?id=4b171a846c808667",
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=835667dbe1fdf9b1",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=6dbd7192bad160d9",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js?id=41e945a8e10bd4e4",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js?id=2184dc78049878ec",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=37a04161ac1973ad",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=2cc70b67d00bbda1",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b1d3ffbb79e69310",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=4e9d13b048f1d8f0",
|
||||
"/chunks/payments.js": "/chunks/payments.js?id=2a6dba57de536b0d",
|
||||
"/chunks/payments/billings.js": "/chunks/payments/billings.js?id=e8f23f4fb51d2bb2",
|
||||
"/chunks/payments/settings.js": "/chunks/payments/settings.js?id=4e3da3de7b57a89a",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=ac94675bfea2ac48",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=19980ab8fd75125c",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=d1722a2c5d30b142",
|
||||
"/chunks/app-environment.js": "/chunks/app-environment.js?id=7018c929bffb3a78",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=ecbfebacc4f269cb",
|
||||
"/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=11df2ce06e785892",
|
||||
"/chunks/app-adsense.js": "/chunks/app-adsense.js?id=ec2fa21b02c99cb9",
|
||||
"/chunks/app-server.js": "/chunks/app-server.js?id=8964b98aee4cca69",
|
||||
"/chunks/app-language.js": "/chunks/app-language.js?id=2ae6285274dacd0d",
|
||||
"/chunks/homepage.js": "/chunks/homepage.js?id=1b595dee57a8f161",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f8c67b2a376ff03e",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=3c7d7bba5e7fc172",
|
||||
"/chunks/successfully-email-verified.js": "/chunks/successfully-email-verified.js?id=261b02aed36069be",
|
||||
"/chunks/successfully-email-send.js": "/chunks/successfully-email-send.js?id=fe054c1e34d7863b",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=115555a1dd6fea58",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=098d7f41b85066bf",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d6193ed0b07e7957",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=d00212636148a14b",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=ed4299f11d4b0c3d",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=1217f457145491ec",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=b6704f4cbf14c67d",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=90ba712f3728443b",
|
||||
"/chunks/billing.js": "/chunks/billing.js?id=9bfdcd415e017b77",
|
||||
"/chunks/platform.js": "/chunks/platform.js?id=cafa4df1f4f3c021",
|
||||
"/chunks/files.js": "/chunks/files.js?id=edc3a874b5605183",
|
||||
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=3ba777e7f02d9b99",
|
||||
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=cf49fc14467d14b8",
|
||||
"/chunks/trash.js": "/chunks/trash.js?id=664fe8a996fb5a37",
|
||||
"/chunks/team-folders.js": "/chunks/team-folders.js?id=0a671d7d78a374c2",
|
||||
"/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=8dcb286ee97a19d8",
|
||||
"/chunks/invitation.js": "/chunks/invitation.js?id=d9f64dbf0aad8554",
|
||||
"/css/tailwind.css": "/css/tailwind.css",
|
||||
"/css/app.css": "/css/app.css"
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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
46
resources/js/components/Others/Notifications/Toaster.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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
3
resources/js/store/modules/app.js
vendored
@@ -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
24
resources/js/store/modules/broadcasting.js
vendored
@@ -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')
|
||||
});
|
||||
},
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<?php
|
||||
|
||||
namespace App\Console\Commands;
|
||||
|
||||
use App\Users\Models\User;
|
||||
@@ -27,7 +26,6 @@ class DemoNotificationDataCommand extends Command
|
||||
*/
|
||||
protected $description = 'Set up demo notifications data';
|
||||
|
||||
|
||||
/**
|
||||
* Execute the console command.
|
||||
*/
|
||||
@@ -74,7 +72,7 @@ class DemoNotificationDataCommand extends Command
|
||||
'data' => json_encode([
|
||||
'type' => 'team-invitation',
|
||||
'title' => 'New Team Invitation',
|
||||
'description' => "Jane Doe invite you to join into Team Folder.",
|
||||
'description' => 'Jane Doe invite you to join into Team Folder.',
|
||||
'action' => [
|
||||
'type' => 'invitation',
|
||||
'params' => [
|
||||
@@ -119,7 +117,7 @@ class DemoNotificationDataCommand extends Command
|
||||
'params' => [
|
||||
'route' => 'Files',
|
||||
'button' => 'Show Files',
|
||||
'id' => $fileRequestFolder->id,
|
||||
'id' => $fileRequestFolder->id,
|
||||
],
|
||||
],
|
||||
]),
|
||||
@@ -206,7 +204,7 @@ class DemoNotificationDataCommand extends Command
|
||||
// Create thumbnail only if image is larger than predefined image sizes
|
||||
if ($intervention->getWidth() > $size['size']) {
|
||||
// Generate thumbnail
|
||||
$intervention->resize($size['size'], null, fn($constraint) => $constraint->aspectRatio())->stream();
|
||||
$intervention->resize($size['size'], null, fn ($constraint) => $constraint->aspectRatio())->stream();
|
||||
|
||||
// Store thumbnail to disk
|
||||
Storage::put("files/$user->id/{$size['name']}-{$file_name}", $intervention);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<?php
|
||||
namespace App\Console;
|
||||
|
||||
use App\Console\Commands\DemoNotificationDataCommand;
|
||||
use Illuminate\Console\Scheduling\Schedule;
|
||||
use App\Console\Commands\SetupDevEnvironment;
|
||||
use App\Console\Commands\SetupProdEnvironment;
|
||||
use Support\Scheduler\Actions\ReportUsageAction;
|
||||
use App\Console\Commands\DemoNotificationDataCommand;
|
||||
use Support\Scheduler\Actions\DeleteFailedFilesAction;
|
||||
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
|
||||
use Support\Scheduler\Actions\DeleteUnverifiedUsersAction;
|
||||
|
||||
@@ -18,7 +18,7 @@ class NotificationResource extends JsonResource
|
||||
'id' => $this->id,
|
||||
'type' => $this->type,
|
||||
'attributes' => [
|
||||
'type' => $this->data['type'],
|
||||
'category' => $this->data['category'],
|
||||
'title' => $this->data['title'],
|
||||
'description' => $this->data['description'],
|
||||
'action' => $this->data['action'] ?? null,
|
||||
|
||||
@@ -59,7 +59,7 @@ class InvitationIntoTeamFolder extends Notification implements ShouldQueue
|
||||
public function toArray(mixed $notifiable): array
|
||||
{
|
||||
return [
|
||||
'type' => 'team-invitation',
|
||||
'category' => 'team-invitation',
|
||||
'title' => 'New Team Invitation',
|
||||
'description' => "{$this->invitation->inviter->settings->name} invite you to join into Team Folder.",
|
||||
'action' => [
|
||||
|
||||
@@ -49,7 +49,7 @@ class UploadRequestFulfilledNotification extends Notification implements ShouldQ
|
||||
public function toArray(mixed $notifiable): array
|
||||
{
|
||||
return [
|
||||
'type' => 'file-request',
|
||||
'category' => 'file-request',
|
||||
'title' => 'File Request Filled',
|
||||
'description' => "Your file request for '{$this->uploadRequest->parent->name}' folder was filled successfully.",
|
||||
'action' => [
|
||||
|
||||
Reference in New Issue
Block a user