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

Mobile main navigation

Browse Source
This commit is contained in:
Peter Papp
2021-04-20 15:24:44 +02:00
parent 90051cec91
commit 33d45408d2
4 changed files with 137 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Oasis/Modules/Invoices/InvoicesList.vue
+33 -33
View File
@@ -1,52 +1,52 @@
<template>
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
<InvoiceDesktopToolbar/>
<InvoiceDesktopToolbar />
<InvoiceContextMenu />
<InvoiceBrowser/>
<InvoiceBrowser />
</div>
</template>
<script>
import InvoiceDesktopToolbar from '@/Oasis/Modules/Invoices/components/InvoiceDesktopToolbar'
import InvoiceBrowser from '@/Oasis/Modules/Invoices/components/InvoiceBrowser'
import InvoiceBrowser from '@/Oasis/Modules/Invoices/components/InvoiceBrowser'
import InvoiceContextMenu from '@/Oasis/Modules/Invoices/components/InvoiceContextMenu'
import {events} from '@/bus'
import {events} from '@/bus'
export default {
name: 'FilesView',
components: {
export default {
name: 'FilesView',
components: {
InvoiceDesktopToolbar,
InvoiceContextMenu,
InvoiceBrowser,
},
methods: {
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
},
}
InvoiceContextMenu,
InvoiceBrowser,
},
methods: {
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
},
}
</script>
<style lang="scss">
#files-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
overflow-y: hidden;
}
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
overflow-y: hidden;
}
@media only screen and (max-width: 690px) {
#files-view {
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (max-width: 690px) {
#files-view {
padding-left: 0;
padding-right: 0;
}
}
</style>
resources/js/components/Others/MobileNavigation.vue
+85 -81
View File
@@ -4,26 +4,27 @@
<!--User avatar-->
<UserHeadline v-if="!clickedSubmenu" class="user-info" />
<!--Go back button-->
<!--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-->
<!--Menu links-->
<MenuMobileGroup>
<!--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"/>
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" is-hover-disabled="true" />
<Option @click.native="goToInvoices" title="Invoices" icon="file-text" 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-->
<!--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" />
@@ -35,7 +36,7 @@
<Option @click.native="goToRoute('Invoice')" :title="$t('menu.invoices')" icon="file-text" is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: Admin settings-->
<!--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" />
@@ -53,89 +54,92 @@
<script>
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
import OptionGroup from '@/components/FilesView/OptionGroup'
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'
import OptionGroup from '@/components/FilesView/OptionGroup'
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,
MenuMobile,
Option,
},
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')
}
export default {
name: 'MobileNavigation',
components: {
ChevronLeftIcon,
MenuMobileGroup,
UserHeadline,
OptionGroup,
MenuMobile,
Option,
},
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'})
return 'Go back from ' + location[this.clickedSubmenu]
}
},
data() {
return {
clickedSubmenu: undefined,
}
},
methods: {
goToInvoices() {
this.$router.push({name: 'InvoicesList'})
},
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}])
},
logOut() {
this.$store.dispatch('logOut')
},
}
}
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
},
logOut() {
this.$store.dispatch('logOut')
},
}
}
</script>
<style scoped lang="scss">
@import "@assets/vuefilemanager/_variables";
@import "@assets/vuefilemanager/_mixins";
@import "@assets/vuefilemanager/_mixins";
.user-info {
padding: 20px 20px 10px;
}
.user-info {
padding: 20px 20px 10px;
}
.go-back {
display: flex;
align-items: center;
padding: 30px 20px 10px;
cursor: pointer;
.go-back {
display: flex;
align-items: center;
padding: 30px 20px 10px;
cursor: pointer;
.title {
@include font-size(14);
font-weight: 700;
margin-left: 10px;
}
.title {
@include font-size(14);
font-weight: 700;
margin-left: 10px;
}
polyline {
color: inherit;
}
}
polyline {
color: inherit;
}
}
</style>
resources/js/views/Auth/SignIn.vue
+2 -2
View File
@@ -91,8 +91,8 @@
return {
isLoading: false,
checkedAccount: undefined,
loginPassword: '',
loginEmail: '',
loginPassword: 'vuefilemanager',
loginEmail: 'howdy@hi5ve.digital',
}
},
methods: {