nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +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

50
public/mix-manifest.json
View File

@@ -7,8 +7,8 @@
"/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js?id=07a5f340da451bf2ae5d",
"/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js?id=319ba6f55c8fb5dca6ac",
"/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js?id=6f6e038b64009a752638",
"/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=8ce1dccd140966097677",
"/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=f34c3f924e632de0bc6e",
"/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=21e92b2f7b011b943c69",
"/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=2647be535081392cbdc3",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f779d10bf0f57bf3b08c",
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=075ff381293e1a20d167",
"/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=5f27527c258dada4aeb9",
@@ -34,10 +34,10 @@
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=de64a0ce7c737b106d96",
"/chunks/files.js": "/chunks/files.js?id=1731c1b3a8bfbbeaa301",
"/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=a930cc4a4f5af02460bb",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=f15ebd5d3d14a9cb7549",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=c24a48c0af1929dfb4b6",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js?id=ac54ac828e9a8667410f",
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js?id=a0dd218c154e83af8dee",
"/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=ed3a03e7c61f1223bf3e",
"/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=c691649626200a8d505d",
"/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=7f84c4b09fcf5b890775",
"/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=ff8043fe2c43e13a74e2",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=daaffc43387587cf4b57",
@@ -53,8 +53,8 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=7a6acca368d11e2a4815",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=260d274a422706d71809",
"/chunks/plans.js": "/chunks/plans.js?id=6d14bd88ebd6cf82fdc6",
"/chunks/platform.js": "/chunks/platform.js?id=1e70df954579133c32ad",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=ffbda8c58183915cb55a",
"/chunks/platform.js": "/chunks/platform.js?id=653e253110ab4698e4d0",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=d43c6021fdd724a3687d",
"/chunks/profile.js": "/chunks/profile.js?id=bdc92d734851c0d09b8c",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a5e7ed872d1430177922",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b35e751cdc1946a4fb60",
@@ -66,7 +66,7 @@
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=aa34712346ed9a2fc12d",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1bffa4ae7d545af08355",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=c6b88005b133268ed88f",
"/chunks/shared.js": "/chunks/shared.js?id=68165b2df75fd836ec22",
"/chunks/shared.js": "/chunks/shared.js?id=9646958a66d976078352",
"/chunks/shared-files.js": "/chunks/shared-files.js?id=fdcae9524683fdf7a1a1",
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=aab96d6900885ccb90ed",
"/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=b2fbe95c0ed7074377ce",
@@ -240,5 +240,39 @@
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.8471c87471b1dc8d1d0a.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.8471c87471b1dc8d1d0a.hot-update.js",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.01363a471b3d05f133f4.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.01363a471b3d05f133f4.hot-update.js",
"/chunks/platform.a36c1ff1761f27794e38.hot-update.js": "/chunks/platform.a36c1ff1761f27794e38.hot-update.js",
"/chunks/platform.e6bc793bad4299c41fa4.hot-update.js": "/chunks/platform.e6bc793bad4299c41fa4.hot-update.js"
"/chunks/platform.e6bc793bad4299c41fa4.hot-update.js": "/chunks/platform.e6bc793bad4299c41fa4.hot-update.js",
"/chunks/admin~chunks/platform.3273dc6ee711a5f9b03d.hot-update.js": "/chunks/admin~chunks/platform.3273dc6ee711a5f9b03d.hot-update.js",
"/chunks/admin~chunks/platform.d37c704740d4f435b1cd.hot-update.js": "/chunks/admin~chunks/platform.d37c704740d4f435b1cd.hot-update.js",
"/chunks/admin~chunks/platform.b8ce95ad8c622f907480.hot-update.js": "/chunks/admin~chunks/platform.b8ce95ad8c622f907480.hot-update.js",
"/chunks/platform~chunks/shared.b8ce95ad8c622f907480.hot-update.js": "/chunks/platform~chunks/shared.b8ce95ad8c622f907480.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared/file-browser.118b73ef9dbda7807015.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.118b73ef9dbda7807015.hot-update.js",
"/chunks/admin~chunks/platform.3acf8ee73cd8177b2686.hot-update.js": "/chunks/admin~chunks/platform.3acf8ee73cd8177b2686.hot-update.js",
"/chunks/admin~chunks/platform.c4516b2b2826dfd486ed.hot-update.js": "/chunks/admin~chunks/platform.c4516b2b2826dfd486ed.hot-update.js",
"/chunks/admin~chunks/platform.a5eb84601c7ec9c598f7.hot-update.js": "/chunks/admin~chunks/platform.a5eb84601c7ec9c598f7.hot-update.js",
"/js/main.6d36f6cecb42b6a6a97a.hot-update.js": "/js/main.6d36f6cecb42b6a6a97a.hot-update.js",
"/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=4145c54ff64f420b266f",
"/chunks/admin~chunks/platform.6d36f6cecb42b6a6a97a.hot-update.js": "/chunks/admin~chunks/platform.6d36f6cecb42b6a6a97a.hot-update.js",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.6d36f6cecb42b6a6a97a.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.6d36f6cecb42b6a6a97a.hot-update.js",
"/chunks/admin~chunks/platform.0a163987dacd5443283a.hot-update.js": "/chunks/admin~chunks/platform.0a163987dacd5443283a.hot-update.js",
"/chunks/admin~chunks/platform.10ab68881cf2fde84bf0.hot-update.js": "/chunks/admin~chunks/platform.10ab68881cf2fde84bf0.hot-update.js",
"/js/main.12001b0cbe2d130ee0b7.hot-update.js": "/js/main.12001b0cbe2d130ee0b7.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared/file-browser.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.12001b0cbe2d130ee0b7.hot-update.js",
"/chunks/platform.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/platform.12001b0cbe2d130ee0b7.hot-update.js",
"/chunks/platform~chunks/shared.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/platform~chunks/shared.12001b0cbe2d130ee0b7.hot-update.js",
"/chunks/shared.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/shared.12001b0cbe2d130ee0b7.hot-update.js",
"/chunks/admin~chunks/platform.c3082911cc1401b30a3c.hot-update.js": "/chunks/admin~chunks/platform.c3082911cc1401b30a3c.hot-update.js",
"/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.3df87368d0cc487bb888.hot-update.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.3df87368d0cc487bb888.hot-update.js",
"/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.442ee96ea862a363323d.hot-update.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.442ee96ea862a363323d.hot-update.js",
"/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1d7222eb3cf51ea269f7.hot-update.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1d7222eb3cf51ea269f7.hot-update.js",
"/chunks/admin~chunks/platform.979b92de0afecf67b16a.hot-update.js": "/chunks/admin~chunks/platform.979b92de0afecf67b16a.hot-update.js",
"/chunks/admin~chunks/platform.5a47aad2bb5ad3ec7609.hot-update.js": "/chunks/admin~chunks/platform.5a47aad2bb5ad3ec7609.hot-update.js",
"/chunks/admin~chunks/platform.349aee8463b21b83f0b7.hot-update.js": "/chunks/admin~chunks/platform.349aee8463b21b83f0b7.hot-update.js",
"/chunks/admin~chunks/platform.c8ac15e88509cf99cc1b.hot-update.js": "/chunks/admin~chunks/platform.c8ac15e88509cf99cc1b.hot-update.js",
"/chunks/admin~chunks/platform.56a125f9aada3f5a1ef5.hot-update.js": "/chunks/admin~chunks/platform.56a125f9aada3f5a1ef5.hot-update.js",
"/chunks/admin~chunks/platform.6ec4003e010fd435e728.hot-update.js": "/chunks/admin~chunks/platform.6ec4003e010fd435e728.hot-update.js",
"/chunks/admin~chunks/platform.f32a20e0da4e9ca5364d.hot-update.js": "/chunks/admin~chunks/platform.f32a20e0da4e9ca5364d.hot-update.js",
"/chunks/admin~chunks/platform.4f0f8c9610cddaded31e.hot-update.js": "/chunks/admin~chunks/platform.4f0f8c9610cddaded31e.hot-update.js",
"/chunks/admin~chunks/platform.0928091f0d152de0b93d.hot-update.js": "/chunks/admin~chunks/platform.0928091f0d152de0b93d.hot-update.js",
"/chunks/admin~chunks/platform.e9aa84461f9fdb6800a8.hot-update.js": "/chunks/admin~chunks/platform.e9aa84461f9fdb6800a8.hot-update.js",
"/chunks/admin~chunks/platform.cb8e3def1e6c3a9e92ee.hot-update.js": "/chunks/admin~chunks/platform.cb8e3def1e6c3a9e92ee.hot-update.js"
}

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

@@ -70,8 +70,6 @@ export default {
})
events.$on('fileFullPreview:hide', () => {
this.showFullPreview = false
events.$emit('mobile-navigation:hide')
})
}
}

3
resources/js/components/FilesView/MobileToolbar.vue
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') {

9
resources/js/components/FilesView/Option.vue
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,
}
}

4
resources/js/components/Mobile/MobileHeader.vue
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();

157
resources/js/components/Others/MobileNavigation.vue
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>

3
resources/js/components/Others/Vignette.vue
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)
}

2
resources/js/views/Platform.vue
View File

@@ -83,10 +83,8 @@
}
},
mounted() {
events.$on('mobile-navigation:show', () => this.isScaledDown = true)
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('mobile-navigation:hide', () => this.isScaledDown = false)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
}

2
resources/js/views/Shared.vue
View File

@@ -74,8 +74,6 @@
}
},
mounted() {
events.$on('mobile-navigation:show', () => this.isScaledDown = true)
events.$on('mobile-navigation:hide', () => this.isScaledDown = false)
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)