mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 11:00:39 +00:00
- New mobile navigation experience
This commit is contained in:
Peter Papp
@@ -2,13 +2,13 @@
|
||||
<MenuMobile name="file-filter">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" />
|
||||
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" />
|
||||
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" />
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" />
|
||||
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" />
|
||||
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
@@ -20,7 +20,6 @@ import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileMenuMobile',
|
||||
@@ -58,7 +57,7 @@ export default {
|
||||
goToParticipantUploads() {
|
||||
this.$store.dispatch('getParticipantUploads')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<li class="menu-option group">
|
||||
<div class="icon group-hover-text-theme">
|
||||
<li class="menu-option group" :class="{'hover-disabled': isHoverDisabled}">
|
||||
<div class="icon-left group-hover-text-theme">
|
||||
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
@@ -24,16 +24,35 @@
|
||||
<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}"/>
|
||||
<lock-icon v-if="icon === 'lock'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<cloud-icon v-if="icon === 'cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<file-text-icon v-if="icon === 'file-text'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<database-icon v-if="icon === 'database'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<globe-icon v-if="icon === 'globe'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<monitor-icon v-if="icon === 'monitor'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<box-icon v-if="icon === 'box'" 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 }}
|
||||
</div>
|
||||
<div v-if="isArrowRight" class="icon-right group-hover-text-theme">
|
||||
<chevron-right-icon size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
GlobeIcon,
|
||||
FileTextIcon,
|
||||
CreditCardIcon,
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
PowerIcon,
|
||||
SettingsIcon,
|
||||
UsersIcon,
|
||||
@@ -55,16 +74,28 @@ import {
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
CalendarIcon,
|
||||
DatabaseIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'Option',
|
||||
props:[
|
||||
'isHoverDisabled',
|
||||
'isArrowRight',
|
||||
'isActive',
|
||||
'title',
|
||||
'icon'
|
||||
],
|
||||
components: {
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
GlobeIcon,
|
||||
DatabaseIcon,
|
||||
ChevronRightIcon,
|
||||
FileTextIcon,
|
||||
CreditCardIcon,
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
UploadCloudIcon,
|
||||
@@ -106,7 +137,21 @@ import {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
.icon-right {
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
@include transform(translateY(3px));
|
||||
}
|
||||
|
||||
polyline {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
|
||||
@@ -124,10 +169,11 @@ import {
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover:not(.hover-disabled) {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.menu-option {
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<ul class="link-group">
|
||||
<li @click="goToItem(link)" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item">
|
||||
<div class="menu-icon">
|
||||
<hard-drive-icon v-if="link.icon === 'hard-drive'" size="17" />
|
||||
<share-icon v-if="link.icon === 'share'" size="17" />
|
||||
<trash2-icon v-if="link.icon === 'trash'" size="17" />
|
||||
<power-icon v-if="link.icon === 'power'" size="17" />
|
||||
<settings-icon v-if="link.icon === 'settings'" size="17" />
|
||||
<upload-cloud-icon v-if="link.icon === 'latest'" size="17" />
|
||||
<user-icon v-if="link.icon === 'user'" size="17" />
|
||||
<users-icon v-if="link.icon === 'users'" size="17" />
|
||||
<lock-icon v-if="link.icon === 'lock'" size="17" />
|
||||
<file-text-icon v-if="link.icon === 'file-text'" size="17" />
|
||||
<database-icon v-if="link.icon === 'database'" size="17" />
|
||||
<credit-card-icon v-if="link.icon === 'credit-card'" size="17" />
|
||||
<cloud-icon v-if="link.icon === 'cloud'" size="17" />
|
||||
<monitor-icon v-if="link.icon === 'monitor'" size="17" />
|
||||
<box-icon v-if="link.icon === 'box'" size="17" />
|
||||
<globe-icon v-if="link.icon === 'language'" size="17" />
|
||||
</div>
|
||||
<b class="menu-link">
|
||||
<span>{{ link.title }}</span>
|
||||
<chevron-right-icon size="15" class="arrow-right"/>
|
||||
</b>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
CreditCardIcon,
|
||||
HardDriveIcon,
|
||||
FileTextIcon,
|
||||
SettingsIcon,
|
||||
DatabaseIcon,
|
||||
MonitorIcon,
|
||||
Trash2Icon,
|
||||
CloudIcon,
|
||||
PowerIcon,
|
||||
GlobeIcon,
|
||||
ShareIcon,
|
||||
UsersIcon,
|
||||
UserIcon,
|
||||
LockIcon,
|
||||
BoxIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MenuItemList',
|
||||
components: {
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
CreditCardIcon,
|
||||
HardDriveIcon,
|
||||
DatabaseIcon,
|
||||
FileTextIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
CloudIcon,
|
||||
PowerIcon,
|
||||
GlobeIcon,
|
||||
UsersIcon,
|
||||
ShareIcon,
|
||||
LockIcon,
|
||||
UserIcon,
|
||||
},
|
||||
props: [
|
||||
'navigation'
|
||||
],
|
||||
methods: {
|
||||
goToItem(link) {
|
||||
this.$emit('menu', link.icon)
|
||||
|
||||
// Go to next route
|
||||
if (link.routeName !== this.$route.name)
|
||||
this.$router.push({name: link.routeName})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
padding: 17px 0;
|
||||
width: 100%;
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
|
||||
svg {
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $text;
|
||||
|
||||
span {
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.link-item {
|
||||
|
||||
.menu-icon {
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -61,12 +61,12 @@
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
|
||||
@@ -1,13 +1,51 @@
|
||||
<template>
|
||||
<MenuMobile name="user-navigation">
|
||||
<UserHeadline class="user-info" />
|
||||
|
||||
<!--User avatar-->
|
||||
<UserHeadline v-if="!clickedSubmenu" class="user-info" />
|
||||
|
||||
<!--Go back button-->
|
||||
<div v-if="clickedSubmenu" @click.stop="showSubmenu(undefined)" class="go-back">
|
||||
<chevron-left-icon size="19" class="text-theme" />
|
||||
<span class="title text-theme">{{ backTitle }}</span>
|
||||
</div>
|
||||
|
||||
<!--Menu links-->
|
||||
<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" />
|
||||
|
||||
<!--Main navigation-->
|
||||
<OptionGroup v-if="!clickedSubmenu">
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" is-hover-disabled="true"/>
|
||||
<Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" :is-arrow-right="true" is-hover-disabled="true"/>
|
||||
<Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" :is-arrow-right="true" is-hover-disabled="true"/>
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="!clickedSubmenu">
|
||||
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
|
||||
<!--Submenu: User settings-->
|
||||
<OptionGroup v-if="clickedSubmenu === 'settings'">
|
||||
<Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="clickedSubmenu === 'settings' && config.isSaaS">
|
||||
<Option v-if="" @click.native="goToRoute('Subscription')" :title="$t('menu.subscription')" icon="cloud" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('PaymentMethods')" :title="$t('menu.payment_cards')" icon="credit-card" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Invoice')" :title="$t('menu.invoices')" icon="file-text" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
|
||||
<!--Submenu: Admin settings-->
|
||||
<OptionGroup v-if="clickedSubmenu === 'admin'">
|
||||
<Option @click.native="goToRoute('Dashboard')" :title="$t('admin_menu.dashboard')" icon="box" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Users')" :title="$t('admin_menu.users')" icon="users" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('AppOthers')" :title="$t('admin_menu.settings')" icon="settings" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Pages')" :title="$t('admin_menu.pages')" icon="monitor" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Language')" :title="$t('languages')" icon="globe" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
|
||||
<Option v-if="" @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Invoices')" :title="$t('admin_menu.invoices')" icon="file-text" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
@@ -19,11 +57,13 @@
|
||||
import UserHeadline from '@/components/Sidebar/UserHeadline'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {ChevronLeftIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileNavigation',
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
MenuMobileGroup,
|
||||
UserHeadline,
|
||||
OptionGroup,
|
||||
@@ -33,21 +73,39 @@
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
isAdmin() {
|
||||
return this.user && this.user.data.attributes.role === 'admin'
|
||||
},
|
||||
backTitle() {
|
||||
let location = {
|
||||
'settings': this.$t('menu.settings'),
|
||||
'admin': this.$t('menu.admin')
|
||||
}
|
||||
|
||||
return 'Go back from ' + location[this.clickedSubmenu]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clickedSubmenu: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToRoute(route) {
|
||||
this.$router.push({name: route})
|
||||
this.clickedSubmenu = undefined
|
||||
},
|
||||
showSubmenu(name) {
|
||||
this.clickedSubmenu = name
|
||||
},
|
||||
goToFiles() {
|
||||
if (this.$route.name !== 'Files')
|
||||
this.$router.push({name: 'Files'})
|
||||
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
},
|
||||
showUserProfileMenu() {
|
||||
|
||||
},
|
||||
goToAdmin() {
|
||||
|
||||
},
|
||||
logOut() {
|
||||
this.$store.dispatch('logOut')
|
||||
@@ -57,8 +115,27 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vuefilemanager/_variables";
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.user-info {
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
.go-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px 20px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
polyline {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user