nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Mobile navigation refactored

Browse Source
This commit is contained in:
Peter Papp
2021-04-14 17:13:36 +02:00
parent 213d6230ca
commit a7ba0719a5
9 changed files with 89 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FilePreview.vue
-2
View File
@@ -70,8 +70,6 @@ export default {
})
events.$on('fileFullPreview:hide', () => {
this.showFullPreview = false
events.$emit('mobile-navigation:hide')
})
}
}
resources/js/components/FilesView/MobileToolbar.vue
+1 -2
View File
@@ -51,11 +51,10 @@
},
methods: {
showMobileNavigation() {
events.$emit('mobile-navigation:show')
events.$emit('mobile-menu:show', 'user-navigation')
events.$emit('mobileSelecting:stop')
},
goBack() {
let previousFolder = last(this.browseHistory)
if (previousFolder.location === 'trash-root') {
resources/js/components/FilesView/Option.vue
+9
View File
@@ -21,6 +21,9 @@
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<users-icon v-if="icon === 'users'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-icon v-if="icon === 'user'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<settings-icon v-if="icon === 'settings'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<power-icon v-if="icon === 'power'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
<div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }}
@@ -31,7 +34,10 @@
<script>
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import {
PowerIcon,
SettingsIcon,
UsersIcon,
UserIcon,
UploadCloudIcon,
HardDriveIcon,
CornerDownRightIcon,
@@ -65,11 +71,13 @@ import {
FolderPlusIcon,
HardDriveIcon,
PaperclipIcon,
SettingsIcon,
LifeBuoyIcon,
CalendarIcon,
AlphabetIcon,
Trash2Icon,
SmileIcon,
PowerIcon,
UsersIcon,
Edit2Icon,
TrashIcon,
@@ -77,6 +85,7 @@ import {
StarIcon,
GridIcon,
ListIcon,
UserIcon,
EyeIcon,
}
}
resources/js/components/Mobile/MobileHeader.vue
+2 -2
View File
@@ -3,7 +3,7 @@
<!-- Go back-->
<div @click="goBack" class="go-back">
<chevron-left-icon size="17" class="icon"></chevron-left-icon>
<chevron-left-icon size="17" class="icon" />
</div>
<!--Folder Title-->
@@ -35,7 +35,7 @@
},
methods: {
showMobileNavigation() {
events.$emit('mobile-navigation:show')
events.$emit('mobile-menu:show', 'user-navigation')
},
goBack() {
this.$router.back();
resources/js/components/Others/MobileNavigation.vue
+35 -122
View File
@@ -1,151 +1,64 @@
<template>
<div class="mobile-main-navigation" v-if="user">
<transition name="context-menu">
<nav v-if="isVisible" class="mobile-navigation">
<MenuMobile name="user-navigation">
<UserHeadline class="user-info" />
<!--User Info-->
<UserHeadline class="user-info"/>
<!--Navigation-->
<MenuItemList :navigation="navigation" @menu="action"/>
</nav>
</transition>
</div>
<MenuMobileGroup>
<OptionGroup>
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" />
<Option @click.native="showUserProfileMenu" :title="$t('menu.settings')" icon="user" />
<Option @click.native="goToAdmin" :title="$t('menu.admin')" icon="settings" v-if="isAdmin" />
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" />
</OptionGroup>
</MenuMobileGroup>
</MenuMobile>
</template>
<script>
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
import OptionGroup from '@/components/FilesView/OptionGroup'
import UserHeadline from '@/components/Sidebar/UserHeadline'
import MenuItemList from '@/components/Mobile/MenuItemList'
import MenuMobile from '@/components/Mobile/MenuMobile'
import Option from '@/components/FilesView/Option'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'UserMobileNavigation',
name: 'MobileNavigation',
components: {
MenuItemList,
MenuMobileGroup,
UserHeadline,
OptionGroup,
MenuMobile,
Option,
},
computed: {
...mapGetters([
'homeDirectory',
'user',
'homeDirectory'
]),
navigation() {
return [
{
icon: 'hard-drive',
title: this.$t('menu.files'),
routeName: 'Files',
isVisible: true,
},
{
icon: 'user',
title: this.$t('menu.settings'),
routeName: 'UserProfileMobileMenu',
isVisible: true,
},
{
icon: 'settings',
title: this.$t('menu.admin'),
routeName: 'AdminMobileMenu',
isVisible: this.user.data.attributes.role === 'admin',
},
{
icon: 'power',
title: this.$t('menu.logout'),
routeName: 'LogOut',
isVisible: true,
},
]
},
},
data() {
return {
isVisible: false,
isAdmin() {
return this.user && this.user.data.attributes.role === 'admin'
}
},
methods: {
action(name) {
/*if (name === 'latest') {
}
if (name === 'trash') {
}*/
if (name === 'hard-drive') {
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
}
if (name === 'power') {
this.$store.dispatch('logOut')
}
events.$emit('mobile-navigation:hide')
goToFiles() {
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
},
showUserProfileMenu() {
},
goToAdmin() {
},
logOut() {
this.$store.dispatch('logOut')
},
},
created() {
events.$on('mobile-navigation:show', () => this.isVisible = true)
events.$on('mobile-navigation:hide', () => this.isVisible = false)
}
}
</script>
<style scoped lang="scss">
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
.mobile-navigation {
padding: 20px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background: white;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
max-height: 80%;
overflow-y: auto;
}
.user-info {
margin-bottom: 10px;
padding: 20px 20px 10px;
}
@media (prefers-color-scheme: dark) {
.mobile-navigation {
background: $dark_mode_background;
}
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 200ms;
}
.context-menu-leave-active,
.fade-leave-active {
transition: all 200ms;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.context-menu-leave-active {
position: absolute;
}
</style>
resources/js/components/Others/Vignette.vue
-3
View File
@@ -27,7 +27,6 @@
closePopup() {
events.$emit('popup:close')
events.$emit('mobile-menu:hide')
events.$emit('mobile-navigation:hide')
}
},
created() {
@@ -37,10 +36,8 @@
events.$on('alert:open', () => this.isVisibleVignette = true)
events.$on('success:open', () => this.isVisibleVignette = true)
events.$on('confirm:open', () => this.isVisibleVignette = true)
events.$on('mobile-navigation:show', () => this.isVisibleVignette = true)
// Hide vignette
events.$on('mobile-navigation:hide', () => this.isVisibleVignette = false)
events.$on('mobile-menu:hide', () => this.isVisibleVignette = false)
events.$on('popup:close', () => this.isVisibleVignette = false)
}