added notification center UI

2026-04-18 08:12:15 +00:00 · 2022-03-10 06:27:04 +01:00
parent 2a0b01e888
commit 26f7cdb80f
9 changed files with 464 additions and 258 deletions
--- a/resources/js/components/FilesView/FileIconThumbnail.vue
+++ b/resources/js/components/FilesView/FileIconThumbnail.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="flex items-center justify-center">
        <span
-            class="text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold"
+            class="text-theme absolute z-[5] mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold"
        >
            {{ entry.data.attributes.mimetype }}
        </span>
--- a/resources/js/components/Notifications/Notification.vue
+++ b/resources/js/components/Notifications/Notification.vue
@@ -0,0 +1,69 @@
+<template>
+	<article class="z-20 relative flex items-start p-2.5 mb-1.5 space-x-4 rounded-xl dark:hover:bg-4x-dark-foreground hover:bg-light-background bg-opacity-80">
+
+		<user-plus-icon v-if="notification.type === 'team-invitation'" size="20" class="vue-feather text-theme shrink-0" />
+		<upload-cloud-icon v-if="['file-request', 'remote-upload-done'].includes(notification.type)" size="20" class="vue-feather text-theme shrink-0" />
+
+		<div>
+			<b class="font-extrabold text-sm mb-1.5 block">
+				{{ notification.title }}
+			</b>
+
+			<p class="text-sm mb-1.5 dark:text-gray-500">
+				{{ notification.description }}
+			</p>
+
+			<div class="flex items-center mb-4">
+				<!--<MemberAvatar class="mr-2" :size="22" :is-border="false" :member="user" />-->
+				<time class=" block text-xs dark:text-gray-400 text-gray-400">
+					09. Mar. 2022, 08:27
+				</time>
+			</div>
+
+			<!--Accept or decline team invitation-->
+			<div v-if="notification.type === 'team-invitation'" class="flex items-center space-x-3">
+				<div class="flex items-center cursor-pointer py-1.5 px-2 rounded-xl transition-colors dark:hover:bg-green-900 hover:bg-green-100">
+					<check-icon size="16" class="vue-feather dark:text-green-600 text-green-600 mr-2" />
+					<span class="text-sm font-bold dark:text-green-600 text-green-600">
+						{{ $t('Accept') }}
+					</span>
+				</div>
+
+				<div class="flex items-center cursor-pointer py-1.5 px-2 rounded-xl transition-colors dark:hover:bg-rose-900 hover:bg-rose-100">
+					<x-icon size="16" class="vue-feather dark:text-rose-600 text-rose-600 mr-2" />
+					<span class="text-sm font-bold dark:text-rose-600 text-rose-600">
+						{{ $t('Decline') }}
+					</span>
+				</div>
+			</div>
+
+			<!--Go to route-->
+			<router-link v-if="['file-request', 'remote-upload-done'].includes(notification.type)" :to="{ name: 'Users' }" class="mt-4 flex items-center">
+				<span class="mr-2 whitespace-nowrap text-xs font-bold">
+					{{ $t('Show Files') }}
+				</span>
+				<chevron-right-icon size="16" class="text-theme vue-feather" />
+			</router-link>
+		</div>
+	</article>
+</template>
+<script>
+import {CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon} from 'vue-feather-icons'
+import MemberAvatar from '../FilesView/MemberAvatar'
+
+export default {
+	name: 'Notification',
+	props: [
+		'notification',
+	],
+	components: {
+		MemberAvatar,
+		ChevronRightIcon,
+		UploadCloudIcon,
+		UserPlusIcon,
+		CheckIcon,
+		MailIcon,
+		XIcon,
+	}
+}
+</script>
--- a/resources/js/components/Notifications/NotificationCenter.vue
+++ b/resources/js/components/Notifications/NotificationCenter.vue
@@ -0,0 +1,113 @@
+<template>
+	<transition name="popup">
+		<div class="fixed popup z-20 top-[27px] bottom-[27px] left-20 w-[360px]">
+
+			<!--Triangle-->
+			<div class="z-20 absolute left-0 top-[102px] w-4 translate-x-[-15px] overflow-hidden inline-block">
+				<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">
+
+				<!--Title-->
+				<b class="dark:text-gray-200 text-xl font-extrabold px-2.5 mb-2.5 block">
+					{{ $t('Notification Center') }}
+				</b>
+
+				<div class="px-2.5">
+					<MobileActionButton icon="check-square" class="mb-2 dark:!bg-4x-dark-foreground">
+						{{ $t('Clear all') }}
+					</MobileActionButton>
+				</div>
+
+				<b class="dark-text-theme mt-1.5 block px-2.5 mb-2.5 text-xs text-gray-400">
+					Today
+				</b>
+
+				<Notification :notification="notification" v-for="notification in todayNotifications" :key="notification.id" />
+
+				<b class="dark-text-theme mt-2.5 block px-2.5 mb-2.5 text-xs text-gray-400">
+					Later
+				</b>
+
+				<Notification :notification="notification" v-for="notification in laterNotifications" :key="notification.id" />
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+import Notification from "./Notification";
+import MobileActionButton from "../FilesView/MobileActionButton";
+
+export default {
+	name: 'NotificationCenter',
+	components: {
+		MobileActionButton,
+		Notification
+	},
+	data() {
+		return {
+			laterNotifications: [
+				{
+					id: 1,
+					seen: 1,
+					type: 'remote-upload-done',
+					title: 'Remote Upload Finished',
+					description: 'Your remote uploads has been done.',
+					time: '09. Mar. 2022, 08:27',
+					action: {
+						id: '12-abc'
+					}
+				},
+			],
+			todayNotifications: [
+				{
+					id: 2,
+					seen: 0,
+					type: 'team-invitation',
+					title: 'New Team Invitation',
+					description: 'Jane Doe invite you to join into “Work Documents” Team Folder.',
+					time: '09. Mar. 2022, 08:27',
+					action: {
+						id: '12-abc'
+					}
+				},
+				{
+					id: 3,
+					seen: 0,
+					type: 'file-request',
+					title: 'File Request Filled',
+					description: 'Your file request for “Videohive” folder was filled successfully.',
+					time: '09. Mar. 2022, 07:12',
+					action: {
+						id: '12-abc'
+					}
+				},
+			]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.popup-leave-active {
+		animation: popup-slide-in 0.15s ease reverse;
+	}
+
+	.popup-enter-active {
+		animation: popup-slide-in 0.25s 0.1s ease both;
+	}
+
+	@keyframes popup-slide-in {
+		0% {
+			opacity: 0;
+			transform: translateY(50px);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>
--- a/resources/js/components/Sidebar/ContentSidebar.vue
+++ b/resources/js/components/Sidebar/ContentSidebar.vue
@@ -1,6 +1,6 @@
 <template>
    <section
-        class="content-sidebar z-10 hidden w-52 flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block xl:w-56"
+        class="content-sidebar z-[9] hidden w-52 flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block xl:w-56"
        id="content-sidebar"
    >
        <slot></slot>
--- a/resources/js/components/Sidebar/SidebarNavigation.vue
+++ b/resources/js/components/Sidebar/SidebarNavigation.vue
@@ -21,7 +21,20 @@
            </div>

            <!--Navigation-->
-            <div class="mt-7">
+            <div class="mt-2 relative">
+                <div @click="toggleNotificationCenter" class="relative button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
+                    <bell-icon size="18" class="transition" :class="{'rotate-[30deg]': notificationCount}" />
+					<span v-if="notificationCount" class="absolute z-[9] right-1.5 bottom-1.5 flex items-center justify-center w-4 h-4 bg-theme text-white rounded-full text-xs font-bold">
+						{{ notificationCount }}
+					</span>
+					<span v-if="notificationCount" class="animate-ping absolute z-[8] right-1.5 bottom-1.5 flex items-center justify-center w-4 h-4 bg-theme text-white rounded-full text-xs font-bold"></span>
+                </div>
+            </div>
+
+			<NotificationCenter v-show="isNotificationCenter" />
+
+            <!--Navigation-->
+            <div class="mt-6">
                <router-link
                    v-for="(item, i) in navigation"
                    :to="{ name: item.route }"
@@ -66,27 +79,19 @@

 <script>
 import MemberAvatar from '../FilesView/MemberAvatar'
-import { mapGetters } from 'vuex'
-import {
-    MoonIcon,
-    SunIcon,
-    HardDriveIcon,
-    SettingsIcon,
-    Trash2Icon,
-    UserIcon,
-    PowerIcon,
-    ShareIcon,
-} from 'vue-feather-icons'
+import {mapGetters} from 'vuex'
+import {BellIcon, HardDriveIcon, MoonIcon, PowerIcon, SettingsIcon, SunIcon, UserIcon,} from 'vue-feather-icons'
+import NotificationCenter from "../Notifications/NotificationCenter"

 export default {
    name: 'SidebarNavigation',
    components: {
-        HardDriveIcon,
+		NotificationCenter,
+		HardDriveIcon,
        SettingsIcon,
        MemberAvatar,
-        Trash2Icon,
        PowerIcon,
-        ShareIcon,
+        BellIcon,
        UserIcon,
        MoonIcon,
        SunIcon,
@@ -133,7 +138,17 @@ export default {
            ]
        },
    },
+	data() {
+		return {
+			notificationCount: 2,
+			isNotificationCenter: false,
+		}
+	},
    methods: {
+		toggleNotificationCenter() {
+			this.notificationCount = 0
+			this.isNotificationCenter = ! this.isNotificationCenter
+		},
        isSection(section) {
            return this.$route.matched[0].name === section
        },
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -33,7 +33,7 @@

        <div
            v-if="user"
-            class="relative mx-auto w-full overflow-x-hidden px-2.5 pb-12 md:max-w-4xl md:px-6 lg:pt-6 lg:pb-0 xl:max-w-screen-lg"
+            class="relative mx-auto w-full overflow-x-hidden px-2.5 pb-12 md:max-w-4xl md:px-6 lg:pt-6 lg:pb-0 xl:max-w-screen-lg z-[5]"
        >
            <div v-if="!isLoading" id="page-content">
                <div class="card sticky top-0 z-10 shadow-card" style="padding-bottom: 0">