nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

alert icon in mobile menu

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -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>

2
resources/js/components/FilesView/NavigationBar.vue
View File

@@ -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>

25
resources/js/components/Sidebar/NotificationBell.vue Normal file
View File

@@ -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>

15
resources/js/components/Sidebar/SidebarNavigation.vue
View File

@@ -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 [

32
resources/js/components/Sidebar/UserHeadline.vue
View File

@@ -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>