nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Mobile menu components refactoring

Browse Source 
- Components name renaming
This commit is contained in:
Peter Papp
2021-04-14 11:17:29 +02:00
parent 16b7575fca
commit eba8903792
40 changed files with 1044 additions and 1340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/js/components/Mobile/MenuItemList.vue
View File

@@ -1,29 +1,29 @@
<template>
<ul class="link-group">
<router-link :to="{name: link.routeName}" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item" @click.native="$emit('menu', link.icon)">
<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"></hard-drive-icon>
<share-icon v-if="link.icon === 'share'" size="17"></share-icon>
<trash2-icon v-if="link.icon === 'trash'" size="17"></trash2-icon>
<power-icon v-if="link.icon === 'power'" size="17"></power-icon>
<settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
<upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
<user-icon v-if="link.icon === 'user'" size="17"></user-icon>
<users-icon v-if="link.icon === 'users'" size="17"></users-icon>
<lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
<file-text-icon v-if="link.icon === 'file-text'" size="17"></file-text-icon>
<database-icon v-if="link.icon === 'database'" size="17"></database-icon>
<credit-card-icon v-if="link.icon === 'credit-card'" size="17"></credit-card-icon>
<cloud-icon v-if="link.icon === 'cloud'" size="17"></cloud-icon>
<monitor-icon v-if="link.icon === 'monitor'" size="17"></monitor-icon>
<box-icon v-if="link.icon === 'box'" size="17"></box-icon>
<globe-icon v-if="link.icon === 'language'" size="17"></globe-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"></chevron-right-icon>
<chevron-right-icon size="15" class="arrow-right"/>
</b>
</router-link>
</li>
</ul>
</template>
@@ -49,7 +49,7 @@
} from 'vue-feather-icons'
export default {
name: 'MenuBar',
name: 'MenuItemList',
components: {
BoxIcon,
MonitorIcon,
@@ -72,6 +72,15 @@
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>
@@ -85,20 +94,6 @@
padding: 17px 0;
width: 100%;
&.power {
.menu-icon {
path, line, polyline, rect, circle, ellipse {
stroke: $red;
}
}
.menu-link {
color: $red;
}
}
.menu-icon {
display: block;
margin-right: 20px;

93
resources/js/components/Mobile/MenuMobile.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<transition name="context-menu">
<div v-if="isVisible" @click="closeMenu" class="options">
<slot></slot>
</div>
</transition>
</template>
<script>
import {events} from '@/bus'
export default {
name: 'MenuMobile',
props: [
'name'
],
data() {
return {
isVisible: false,
}
},
methods: {
closeMenu() {
this.isVisible = false
events.$emit('mobile-menu:hide')
}
},
created() {
events.$on('mobile-menu:show', name => {
if (name === this.name)
this.isVisible = !this.isVisible
})
events.$on('mobile-menu:hide', () => this.isVisible = false)
}
}
</script>
<style scoped lang="scss">
@import "@assets/vuefilemanager/_variables";
@import "@assets/vuefilemanager/_mixins";
.options {
position: absolute;
padding-bottom: 12px;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
overflow: hidden;
background: white;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
&.showed {
display: block;
}
}
// 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;
}
@media (prefers-color-scheme: dark) {
.options {
background: $dark_mode_foreground;
}
}
</style>

35
resources/js/components/Mobile/MenuMobileGroup.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="menu-options">
<slot></slot>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'MenuMobileGroup',
components: {
},
computed: {
...mapGetters(['config']),
},
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/vuefilemanager/_variables";
@import "@assets/vuefilemanager/_mixins";
.menu-options {
margin-top: 10px;
list-style: none;
width: 100%;
}
</style>

4
resources/js/components/Mobile/MobileHeader.vue
View File

@@ -25,7 +25,7 @@
} from 'vue-feather-icons'
export default {
name: 'MenuBar',
name: 'MobileHeader',
props: [
'title'
],
@@ -35,7 +35,7 @@
},
methods: {
showMobileNavigation() {
events.$emit('show:mobile-navigation')
events.$emit('mobile-navigation:show')
},
goBack() {
this.$router.back();