alert icon in mobile menu

This commit is contained in:
Čarodej
2022-03-17 18:31:10 +01:00
parent ca883a6f93
commit 10f37e645b
6 changed files with 63 additions and 36 deletions
+5 -5
View File
@@ -1,6 +1,6 @@
{
"/js/main.js": "/js/main.js",
"/chunks/request.js": "/chunks/request.js?id=ce8a9447d1d7f2d7",
"/chunks/request.js": "/chunks/request.js?id=1a9ada603e8d364a",
"/chunks/request-upload.js": "/chunks/request-upload.js?id=35b65503f01ef52c",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
"/chunks/status-check.js": "/chunks/status-check.js?id=c7d5cfeb0120db76",
@@ -9,13 +9,13 @@
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=fc3886e258b9a9b9",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=7bae302e249c73a1",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=309dc20e668952e6",
"/chunks/shared.js": "/chunks/shared.js?id=d905a6a092bb71f8",
"/chunks/shared.js": "/chunks/shared.js?id=c1bd69381de51386",
"/chunks/shared/browser.js": "/chunks/shared/browser.js?id=7d78c21314593e88",
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=af632a9bdc82be95",
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=c303bb3ce8a22918",
"/chunks/not-found.js": "/chunks/not-found.js?id=5fbc874846003a91",
"/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=9c283755ffea5e90",
"/chunks/admin.js": "/chunks/admin.js?id=7a877695d727f316",
"/chunks/admin.js": "/chunks/admin.js?id=2872d2125afadd0f",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=3cb0b23a8ab78cbb",
"/chunks/invoices.js": "/chunks/invoices.js?id=f89964a5a55ace45",
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=62582c26b6288d7d",
@@ -57,12 +57,12 @@
"/chunks/sign-up.js": "/chunks/sign-up.js?id=d87ef46a15b3a4c3",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=63bc2a81117cee2f",
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=b7d1b17596c771c3",
"/chunks/settings.js": "/chunks/settings.js?id=fc77a4e0f3e058f2",
"/chunks/settings.js": "/chunks/settings.js?id=2c8f1d93e56030e0",
"/chunks/profile.js": "/chunks/profile.js?id=baa99177b1a788a2",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=29034c929a287e2a",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=80bca2eb75da275d",
"/chunks/billing.js": "/chunks/billing.js?id=9008d99558ed20a5",
"/chunks/platform.js": "/chunks/platform.js?id=21745aca8adae49d",
"/chunks/platform.js": "/chunks/platform.js?id=9b210e9d35286856",
"/chunks/files.js": "/chunks/files.js?id=535a172eef59e2f4",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=a6d8378911b23390",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ebfebefef781b070",
@@ -9,18 +9,15 @@
v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])"
size="28"
@click.stop.native="$showMobileMenu('team-menu')"
class="absolute right-9"
class="absolute right-10"
/>
<!--More Actions-->
<div class="relative">
<div
v-if="$checkPermission('master')"
@click="showMobileNavigation"
class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4"
>
<menu-icon size="17" />
</div>
<div class="flex items-center relative mr-[4px]">
<div @click="showMobileNavigation" class="cursor-pointer pr-1.5">
<menu-icon size="17" class="vue-feather dark:text-gray-100" />
</div>
</div>
</div>
</div>
@@ -21,7 +21,7 @@
<!--Folder Title-->
<b
:class="{ '-translate-x-4': !isLoadedFolder || !isNotHomepage }"
class="inline-block max-w-[200px] transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200"
class="inline-block lg:max-w-[210px] max-w-[190px] transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 dark:text-gray-100"
>
{{ $getCurrentLocationName() }}
</b>
@@ -0,0 +1,25 @@
<template>
<div class="relative button-icon inline-block cursor-pointer rounded-xl p-3">
<bell-icon size="18" class="vue-feather dark:text-gray-100 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>
</template>
<script>
import {mapGetters} from "vuex";
import {BellIcon} from "vue-feather-icons"
export default {
name: 'NotificationBell',
components: {
BellIcon,
},
computed: {
...mapGetters([
'notificationCount'
]),
}
}
</script>
@@ -22,13 +22,7 @@
<!--Navigation-->
<div class="mt-2 relative">
<div @click="$store.commit('TOGGLE_NOTIFICATION_CENTER')" 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>
<NotificationBell @click.native="$store.commit('TOGGLE_NOTIFICATION_CENTER')" class="hover:bg-light-300 dark:hover:bg-4x-dark-foreground" />
</div>
<NotificationCenter v-if="isVisibleNotificationCenter" />
@@ -80,24 +74,25 @@
<script>
import MemberAvatar from '../FilesView/MemberAvatar'
import {mapGetters} from 'vuex'
import {BellIcon, HardDriveIcon, MoonIcon, PowerIcon, SettingsIcon, SunIcon, UserIcon,} from 'vue-feather-icons'
import {HardDriveIcon, MoonIcon, PowerIcon, SettingsIcon, SunIcon, UserIcon,} from 'vue-feather-icons'
import NotificationCenter from "../Notifications/NotificationCenter"
import NotificationBell from "./NotificationBell";
export default {
name: 'SidebarNavigation',
components: {
NotificationBell,
NotificationCenter,
HardDriveIcon,
SettingsIcon,
MemberAvatar,
PowerIcon,
BellIcon,
UserIcon,
MoonIcon,
SunIcon,
},
computed: {
...mapGetters(['isVisibleNavigationBars', 'isDarkMode', 'config', 'user', 'isVisibleNotificationCenter', 'notificationCount']),
...mapGetters(['isVisibleNavigationBars', 'isDarkMode', 'config', 'user', 'isVisibleNotificationCenter']),
navigation() {
if (this.user.data.attributes.role === 'admin') {
return [
@@ -1,28 +1,38 @@
<template>
<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>
<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>
</template>
<script>
import MemberAvatar from '../FilesView/MemberAvatar'
import { mapGetters } from 'vuex'
import NotificationBell from "./NotificationBell";
export default {
name: 'UserHeadline',
components: {
NotificationBell,
MemberAvatar,
},
computed: {
...mapGetters(['user']),
},
methods: {
openNotificationPopup() {
}
}
}
</script>