- Mobile navigation refactored

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
+42 -8
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-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/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/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.js": "/chunks/admin~chunks/platform.js?id=21e92b2f7b011b943c69",
"/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=f34c3f924e632de0bc6e", "/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.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~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", "/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/environment-setup.js": "/chunks/environment-setup.js?id=de64a0ce7c737b106d96",
"/chunks/files.js": "/chunks/files.js?id=1731c1b3a8bfbbeaa301", "/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-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/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/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-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/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", "/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-settings.js": "/chunks/plan-settings.js?id=7a6acca368d11e2a4815",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=260d274a422706d71809", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=260d274a422706d71809",
"/chunks/plans.js": "/chunks/plans.js?id=6d14bd88ebd6cf82fdc6", "/chunks/plans.js": "/chunks/plans.js?id=6d14bd88ebd6cf82fdc6",
"/chunks/platform.js": "/chunks/platform.js?id=1e70df954579133c32ad", "/chunks/platform.js": "/chunks/platform.js?id=653e253110ab4698e4d0",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=ffbda8c58183915cb55a", "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=d43c6021fdd724a3687d",
"/chunks/profile.js": "/chunks/profile.js?id=bdc92d734851c0d09b8c", "/chunks/profile.js": "/chunks/profile.js?id=bdc92d734851c0d09b8c",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a5e7ed872d1430177922", "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a5e7ed872d1430177922",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b35e751cdc1946a4fb60", "/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-storage.js": "/chunks/settings-storage.js?id=aa34712346ed9a2fc12d",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1bffa4ae7d545af08355", "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1bffa4ae7d545af08355",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=c6b88005b133268ed88f", "/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-files.js": "/chunks/shared-files.js?id=fdcae9524683fdf7a1a1",
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=aab96d6900885ccb90ed", "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=aab96d6900885ccb90ed",
"/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=b2fbe95c0ed7074377ce", "/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.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/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.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"
} }
@@ -70,8 +70,6 @@ export default {
}) })
events.$on('fileFullPreview:hide', () => { events.$on('fileFullPreview:hide', () => {
this.showFullPreview = false this.showFullPreview = false
events.$emit('mobile-navigation:hide')
}) })
} }
} }
@@ -51,11 +51,10 @@
}, },
methods: { methods: {
showMobileNavigation() { showMobileNavigation() {
events.$emit('mobile-navigation:show') events.$emit('mobile-menu:show', 'user-navigation')
events.$emit('mobileSelecting:stop') events.$emit('mobileSelecting:stop')
}, },
goBack() { goBack() {
let previousFolder = last(this.browseHistory) let previousFolder = last(this.browseHistory)
if (previousFolder.location === 'trash-root') { if (previousFolder.location === 'trash-root') {
@@ -21,6 +21,9 @@
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/> <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}"/> <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}"/> <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>
<div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}"> <div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }} {{ title }}
@@ -31,7 +34,10 @@
<script> <script>
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon' import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import { import {
PowerIcon,
SettingsIcon,
UsersIcon, UsersIcon,
UserIcon,
UploadCloudIcon, UploadCloudIcon,
HardDriveIcon, HardDriveIcon,
CornerDownRightIcon, CornerDownRightIcon,
@@ -65,11 +71,13 @@ import {
FolderPlusIcon, FolderPlusIcon,
HardDriveIcon, HardDriveIcon,
PaperclipIcon, PaperclipIcon,
SettingsIcon,
LifeBuoyIcon, LifeBuoyIcon,
CalendarIcon, CalendarIcon,
AlphabetIcon, AlphabetIcon,
Trash2Icon, Trash2Icon,
SmileIcon, SmileIcon,
PowerIcon,
UsersIcon, UsersIcon,
Edit2Icon, Edit2Icon,
TrashIcon, TrashIcon,
@@ -77,6 +85,7 @@ import {
StarIcon, StarIcon,
GridIcon, GridIcon,
ListIcon, ListIcon,
UserIcon,
EyeIcon, EyeIcon,
} }
} }
@@ -3,7 +3,7 @@
<!-- Go back--> <!-- Go back-->
<div @click="goBack" class="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> </div>
<!--Folder Title--> <!--Folder Title-->
@@ -35,7 +35,7 @@
}, },
methods: { methods: {
showMobileNavigation() { showMobileNavigation() {
events.$emit('mobile-navigation:show') events.$emit('mobile-menu:show', 'user-navigation')
}, },
goBack() { goBack() {
this.$router.back(); this.$router.back();
@@ -1,151 +1,64 @@
<template> <template>
<div class="mobile-main-navigation" v-if="user"> <MenuMobile name="user-navigation">
<transition name="context-menu"> <UserHeadline class="user-info" />
<nav v-if="isVisible" class="mobile-navigation">
<!--User Info--> <MenuMobileGroup>
<UserHeadline class="user-info"/> <OptionGroup>
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" />
<!--Navigation--> <Option @click.native="showUserProfileMenu" :title="$t('menu.settings')" icon="user" />
<MenuItemList :navigation="navigation" @menu="action"/> <Option @click.native="goToAdmin" :title="$t('menu.admin')" icon="settings" v-if="isAdmin" />
</nav> <Option @click.native="logOut" :title="$t('menu.logout')" icon="power" />
</transition> </OptionGroup>
</div> </MenuMobileGroup>
</MenuMobile>
</template> </template>
<script> <script>
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
import OptionGroup from '@/components/FilesView/OptionGroup'
import UserHeadline from '@/components/Sidebar/UserHeadline' 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 {mapGetters} from 'vuex'
import {events} from '@/bus'
export default { export default {
name: 'UserMobileNavigation', name: 'MobileNavigation',
components: { components: {
MenuItemList, MenuMobileGroup,
UserHeadline, UserHeadline,
OptionGroup,
MenuMobile,
Option,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'homeDirectory',
'user', 'user',
'homeDirectory'
]), ]),
navigation() { isAdmin() {
return [ return this.user && this.user.data.attributes.role === 'admin'
{
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,
} }
}, },
methods: { methods: {
action(name) { goToFiles() {
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
/*if (name === 'latest') { },
showUserProfileMenu() {
}
},
if (name === 'trash') { goToAdmin() {
}*/ },
logOut() {
if (name === 'hard-drive') { this.$store.dispatch('logOut')
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
}
if (name === 'power') {
this.$store.dispatch('logOut')
}
events.$emit('mobile-navigation:hide')
}, },
},
created() {
events.$on('mobile-navigation:show', () => this.isVisible = true)
events.$on('mobile-navigation:hide', () => this.isVisible = false)
} }
} }
</script> </script>
<style scoped lang="scss"> <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 { .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> </style>
@@ -27,7 +27,6 @@
closePopup() { closePopup() {
events.$emit('popup:close') events.$emit('popup:close')
events.$emit('mobile-menu:hide') events.$emit('mobile-menu:hide')
events.$emit('mobile-navigation:hide')
} }
}, },
created() { created() {
@@ -37,10 +36,8 @@
events.$on('alert:open', () => this.isVisibleVignette = true) events.$on('alert:open', () => this.isVisibleVignette = true)
events.$on('success:open', () => this.isVisibleVignette = true) events.$on('success:open', () => this.isVisibleVignette = true)
events.$on('confirm:open', () => this.isVisibleVignette = true) events.$on('confirm:open', () => this.isVisibleVignette = true)
events.$on('mobile-navigation:show', () => this.isVisibleVignette = true)
// Hide vignette // Hide vignette
events.$on('mobile-navigation:hide', () => this.isVisibleVignette = false)
events.$on('mobile-menu:hide', () => this.isVisibleVignette = false) events.$on('mobile-menu:hide', () => this.isVisibleVignette = false)
events.$on('popup:close', () => this.isVisibleVignette = false) events.$on('popup:close', () => this.isVisibleVignette = false)
} }
-2
View File
@@ -83,10 +83,8 @@
} }
}, },
mounted() { mounted() {
events.$on('mobile-navigation:show', () => this.isScaledDown = true)
events.$on('mobile-menu: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('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false) events.$on('mobile-menu:hide', () => this.isScaledDown = false)
} }
-2
View File
@@ -74,8 +74,6 @@
} }
}, },
mounted() { 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('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false) events.$on('fileItem:deselect', () => this.isScaledDown = false)