click outside of notification center hide notification popup

config/vuefilemanager.php

@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'version' => '2.0.0-Rc.4',
+    'version' => '2.0.0-Rc.5',
 
     'is_demo' => env('APP_DEMO', false),
 

package-lock.json

@@ -8596,6 +8596,11 @@
             "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
             "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         },
+        "v-click-outside": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.1.2.tgz",
+            "integrity": "sha512-gMdRqfRE6m6XU6SiFi3dyBlFB2MWogiXpof8Aa3LQysrl9pzTndqp/iEaAphLoadaQUFnQ0ec6fLLaxr7LiY6A=="
+        },
         "validate-npm-package-license": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -36,6 +36,7 @@
         "pdfvuer": "^1.9.2",
         "tailwind-scrollbar-hide": "^1.1.7",
         "twemoji": "^13.1.0",
+        "v-click-outside": "^3.1.2",
         "vee-validate": "^3.4.14",
         "vue": "^2.6.14",
         "vue-feather-icons": "^5.1.0",

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=33e1def79a2b3088",
-    "/chunks/request-upload.js": "/chunks/request-upload.js?id=575487e7851294ba",
+    "/chunks/request.js": "/chunks/request.js?id=a02bb284b171b79e",
+    "/chunks/request-upload.js": "/chunks/request-upload.js?id=c7249af97da5af7f",
     "/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",
@@ -9,13 +9,13 @@
     "/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.js": "/chunks/shared.js?id=173341f105562db8",
+    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=9c7b162466a60cea",
+    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=34e05a8b937a1436",
     "/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/admin.js": "/chunks/admin.js?id=6dea03915d850408",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=a554aec2e4a1d679",
     "/chunks/invoices.js": "/chunks/invoices.js?id=f89964a5a55ace45",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=62582c26b6288d7d",
@@ -57,18 +57,18 @@
     "/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/settings.js": "/chunks/settings.js?id=54988316fe8af165",
     "/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/platform.js": "/chunks/platform.js?id=fc1ae07b12955bbe",
+    "/chunks/files.js": "/chunks/files.js?id=be80dc24b4e2cdef",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=51c9f16538ee342b",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=020b5dbe91fcb0cf",
+    "/chunks/trash.js": "/chunks/trash.js?id=d53c63e74bda9bd5",
+    "/chunks/team-folders.js": "/chunks/team-folders.js?id=234ae7bd06906201",
+    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=27e9dff715abf563",
     "/chunks/invitation.js": "/chunks/invitation.js?id=d9f64dbf0aad8554",
     "/css/tailwind.css": "/css/tailwind.css",
     "/css/app.css": "/css/app.css"

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="currentFile" class="absolute top-[56px] left-0 right-0 bottom-0 select-none lg:top-[66px]">
         <!--Arrow navigation-->
-        <div v-if="!$isMobile() && files.length > 1" class="">
+        <div v-if="!$isMobile() && files.length > 1">
             <div @click.prevent="prev" class="fixed top-1/2 left-0 z-20 cursor-pointer p-3">
                 <chevron-left-icon size="20" />
             </div>

resources/js/components/Notifications/NotificationCenter.vue

@@ -7,7 +7,7 @@
 				<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 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 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">
 
 				<!--Title-->
 				<b class="dark:text-gray-200 text-xl font-extrabold px-2.5 mb-2.5 block">
@@ -41,8 +41,9 @@
 </template>
 
 <script>
-import Notification from "./Notification";
-import MobileActionButton from "../FilesView/MobileActionButton";
+import MobileActionButton from "../FilesView/MobileActionButton"
+import Notification from "./Notification"
+import vClickOutside from 'v-click-outside'
 import {mapGetters} from "vuex";
 
 export default {
@@ -51,15 +52,8 @@ export default {
 		MobileActionButton,
 		Notification
 	},
-	watch: {
-		isVisibleNotificationCenter: function (visibility) {
-			if (visibility) {
-				axios.post('/api/user/notifications/read')
-					.then(() => {
-						this.$store.commit('UPDATE_NOTIFICATION_COUNT', 0)
-					})
-			}
-		}
+	directives: {
+		clickOutside: vClickOutside.directive
 	},
 	computed: {
 		...mapGetters([
@@ -73,12 +67,22 @@ export default {
 		}
 	},
 	methods: {
+		clickOutside() {
+			if (this.isVisibleNotificationCenter)
+				this.$store.commit('CLOSE_NOTIFICATION_CENTER')
+		},
 		deleteAllNotifications() {
 			axios.delete('/api/user/notifications')
 				.then(() => {
 					this.$store.commit('FLUSH_NOTIFICATIONS')
 				})
 		}
+	},
+	created() {
+		axios.post('/api/user/notifications/read')
+			.then(() => {
+				this.$store.commit('UPDATE_NOTIFICATION_COUNT', 0)
+			})
 	}
 }
 </script>

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -31,7 +31,7 @@
                 </div>
             </div>
 
-			<NotificationCenter v-show="isVisibleNotificationCenter" />
+			<NotificationCenter v-if="isVisibleNotificationCenter" />
 
             <!--Navigation-->
             <div class="mt-6">