alert icon in mobile menu

2026-04-18 08:12:15 +00:00 · 2022-03-18 07:21:33 +01:00
parent 10f37e645b
commit 1ad8fbdd57
11 changed files with 171 additions and 41 deletions
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -15,7 +15,7 @@
            <!--More Actions-->
            <div class="flex items-center relative mr-[4px]">

-				<div @click="showMobileNavigation" class="cursor-pointer pr-1.5">
+				<div @click="showMobileNavigation" class="cursor-pointer p-1.5 -m-1.5">
 					<menu-icon size="17" class="vue-feather dark:text-gray-100" />
 				</div>
            </div>
--- a/resources/js/components/Notifications/Notification.vue
+++ b/resources/js/components/Notifications/Notification.vue
@@ -138,6 +138,7 @@ export default {
 		},
        closeCenter() {
            this.$store.commit('CLOSE_NOTIFICATION_CENTER')
+			this.$closePopup()
        },
    },
 	created() {
--- a/resources/js/components/Notifications/NotificationCenter.vue
+++ b/resources/js/components/Notifications/NotificationCenter.vue
@@ -15,7 +15,7 @@
 				</b>

 				<div class="px-2.5">
-					<MobileActionButton v-if="readNotifications.length || unreadNotifications.length" @click.native="deleteAllNotifications" icon="check-square" class="mb-2 dark:!bg-4x-dark-foreground">
+					<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>

@@ -71,18 +71,9 @@ export default {
 			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)
-			})
+		this.$store.dispatch('readAllNotifications')
 	}
 }
 </script>
--- a/resources/js/components/Others/NotificationsPopup.vue
+++ b/resources/js/components/Others/NotificationsPopup.vue
@@ -0,0 +1,94 @@
+<template>
+    <PopupWrapper name="notifications-mobile">
+        <!--Title-->
+        <PopupHeader :title="$t('Notifications')" icon="bell" />
+
+        <!--Content-->
+        <PopupContent>
+			<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>
+
+			<p v-if="!readNotifications.length && !unreadNotifications.length" class="text-sm text-gray-500">
+				{{ $t("There aren't any notifications.") }}
+			</p>
+
+            <b
+                v-if="unreadNotifications.length"
+                class="dark-text-theme mt-1.5 mb-2.5 block px-2.5 text-xs text-gray-400"
+            >
+                {{ $t('Unread') }}
+            </b>
+
+            <Notification
+                :notification="notification"
+                v-for="notification in unreadNotifications"
+                :key="notification.id"
+            />
+
+            <b v-if="readNotifications.length" 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 readNotifications"
+                :key="notification.id"
+            />
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('Close') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import MobileActionButton from '../FilesView/MobileActionButton'
+import Notification from '../Notifications/Notification'
+import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from './Popup/PopupWrapper'
+import PopupActions from './Popup/PopupActions'
+import PopupContent from './Popup/PopupContent'
+import PopupHeader from './Popup/PopupHeader'
+import vClickOutside from 'v-click-outside'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'NotificationsPopup',
+    components: {
+        MobileActionButton,
+        Notification,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        ButtonBase,
+    },
+    directives: {
+        clickOutside: vClickOutside.directive,
+    },
+    computed: {
+        ...mapGetters(['user', 'config']),
+        readNotifications() {
+            return this.user?.data.relationships.readNotifications.data
+        },
+        unreadNotifications() {
+            return this.user?.data.relationships.unreadNotifications.data
+        },
+    },
+    methods: {
+        clickOutside() {
+            if (this.isVisibleNotificationCenter) this.$store.commit('CLOSE_NOTIFICATION_CENTER')
+        },
+    },
+}
+</script>
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -10,6 +10,7 @@
                <users-icon v-if="icon === 'users'" size="18" class="vue-feather text-theme" />
                <user-plus-icon v-if="icon === 'user-plus'" size="18" class="vue-feather text-theme" />
                <credit-card-icon v-if="icon === 'credit-card'" size="18" class="vue-feather text-theme" />
+                <bell-icon v-if="icon === 'bell'" size="18" class="vue-feather text-theme" />
            </div>

            <b class="text-base font-bold">
@@ -24,6 +25,7 @@

 <script>
 import {
+	BellIcon,
 	UploadCloudIcon,
    CreditCardIcon,
    KeyIcon,
@@ -41,6 +43,7 @@ export default {
    name: 'PopupHeader',
    props: ['title', 'icon'],
    components: {
+		BellIcon,
 		UploadCloudIcon,
        CornerDownRightIcon,
        CreditCardIcon,
--- a/resources/js/components/Sidebar/UserHeadline.vue
+++ b/resources/js/components/Sidebar/UserHeadline.vue
@@ -1,38 +1,39 @@
 <template>
-	<div class="flex items-center justify-between">
-		<div class="flex items-center leading-none">
-			<MemberAvatar :size="52" :is-border="false" :member="user" />
-			<div class="pl-4">
-				<b class="mb-1 block font-bold leading-none">
-					{{ user.data.relationships.settings.data.attributes.name }}
-				</b>
-				<span class="text-theme text-sm font-semibold leading-none">
-					{{ user.data.attributes.email }}
-				</span>
-			</div>
-		</div>
-		<NotificationBell @click="openNotificationPopup" />
-	</div>
+    <div class="flex items-center justify-between">
+        <div class="flex items-center leading-none">
+            <MemberAvatar :size="52" :is-border="false" :member="user" />
+            <div class="pl-4">
+                <b class="mb-1 block font-bold leading-none">
+                    {{ user.data.relationships.settings.data.attributes.name }}
+                </b>
+                <span class="text-theme text-sm font-semibold leading-none">
+                    {{ user.data.attributes.email }}
+                </span>
+            </div>
+        </div>
+        <NotificationBell @click.native="openNotificationPopup" />
+    </div>
 </template>

 <script>
 import MemberAvatar from '../FilesView/MemberAvatar'
+import NotificationBell from './NotificationBell'
+import { events } from '../../bus'
 import { mapGetters } from 'vuex'
-import NotificationBell from "./NotificationBell";

 export default {
    name: 'UserHeadline',
    components: {
-		NotificationBell,
+        NotificationBell,
        MemberAvatar,
    },
    computed: {
        ...mapGetters(['user']),
    },
-	methods: {
-		openNotificationPopup() {
-
-		}
-	}
+    methods: {
+        openNotificationPopup() {
+            events.$emit('popup:open', { name: 'notifications-mobile' })
+        },
+    },
 }
 </script>
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -116,10 +116,21 @@ const actions = {
            .post(getters.api + '/folders/favourites/' + folder.data.id, {
                _method: 'delete',
            })
-            .catch(() => {
-                Vue.prototype.$isSomethingWrong()
+            .catch(() => Vue.prototype.$isSomethingWrong())
+    },
+    readAllNotifications: ({ commit }) => {
+        axios.post('/api/user/notifications/read')
+            .then(() => {
+                commit('UPDATE_NOTIFICATION_COUNT', 0)
            })
    },
+    deleteAllNotifications: ({ commit }) => {
+        axios.delete('/api/user/notifications')
+            .then(() => {
+                commit('FLUSH_NOTIFICATIONS')
+            })
+            .catch(() => Vue.prototype.$isSomethingWrong())
+    },
 }

 const mutations = {
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -15,6 +15,7 @@
        <ShareEditPopup />

        <CreateUploadRequestPopup />
+		<NotificationsPopup />
        <CreateFolderPopup />
        <RenameItemPopup />
        <MoveItemPopup />
@@ -77,10 +78,12 @@ import InfoSidebar from '../components/FilesView/InfoSidebar'
 import { events } from '../bus'
 import { mapGetters } from 'vuex'
 import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
+import NotificationsPopup from "../components/Others/NotificationsPopup";

 export default {
    name: 'Platform',
    components: {
+		NotificationsPopup,
 		CreateUploadRequestPopup,
        CreateTeamFolderPopup,
        PanelNavigationFiles,