mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 19:10:40 +00:00
- Mobile menu components refactoring
- Components name renaming
This commit is contained in:
Peter Papp
@@ -4,14 +4,14 @@
|
||||
<!--Mobile Navigation-->
|
||||
<MobileNavigation />
|
||||
|
||||
<!--Confirm Popup-->
|
||||
<Confirm />
|
||||
<!--ConfirmPopup Popup-->
|
||||
<ConfirmPopup />
|
||||
|
||||
<!-- Create language popup -->
|
||||
<CreateLanguage/>
|
||||
|
||||
<!--Navigation Sidebar-->
|
||||
<MenuBar/>
|
||||
<SidebarNavigation/>
|
||||
|
||||
<ContentSidebar>
|
||||
|
||||
@@ -90,12 +90,12 @@
|
||||
|
||||
<script>
|
||||
import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
|
||||
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import CreateLanguage from '@/components/Others/CreateLanguage'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import Confirm from '@/components/Others/Popup/Confirm'
|
||||
import MenuBar from '@/components/Sidebar/MenuBar'
|
||||
import ConfirmPopup from '@/components/Others/Popup/ConfirmPopup'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
@@ -104,6 +104,7 @@
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
components: {
|
||||
SidebarNavigation,
|
||||
MobileNavigation,
|
||||
CreateLanguage,
|
||||
ContentSidebar,
|
||||
@@ -115,8 +116,7 @@
|
||||
MonitorIcon,
|
||||
UsersIcon,
|
||||
GlobeIcon,
|
||||
Confirm,
|
||||
MenuBar,
|
||||
ConfirmPopup,
|
||||
BoxIcon,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,118 +1,102 @@
|
||||
<template>
|
||||
<div id="application-wrapper">
|
||||
|
||||
<!--Full File Preview-->
|
||||
<FileFullPreview />
|
||||
<!--File preview window-->
|
||||
<FilePreview />
|
||||
|
||||
<!--Mobile Navigation-->
|
||||
<MobileNavigation />
|
||||
|
||||
<!--Processing popup-->
|
||||
<!--Popups-->
|
||||
<ProcessingPopup />
|
||||
<ConfirmPopup />
|
||||
|
||||
<!--Confirm Popup-->
|
||||
<Confirm />
|
||||
<ShareCreatePopup />
|
||||
<ShareEditPopup />
|
||||
|
||||
<!--Share Item popup-->
|
||||
<ShareCreate />
|
||||
<ShareEdit />
|
||||
<CreateFolderPopup />
|
||||
<RenameItemPopup />
|
||||
|
||||
<!--Rename folder/file item-->
|
||||
<RenameItem />
|
||||
<MoveItemPopup />
|
||||
|
||||
<!--Create folder mobile UI-->
|
||||
<CreateFolder />
|
||||
<!--Mobile components-->
|
||||
<FileSortingMobile />
|
||||
<FileMenuMobile />
|
||||
|
||||
<!--Move item popup-->
|
||||
<MoveItem />
|
||||
<MultiSelectToolbarMobile />
|
||||
|
||||
<!-- Mobile Menu for Multi selected items -->
|
||||
<MobileMultiSelectMenu />
|
||||
<!--Navigations-->
|
||||
<MobileNavigation />
|
||||
<SidebarNavigation />
|
||||
|
||||
<!--Drag UI-->
|
||||
<!--Others-->
|
||||
<DragUI />
|
||||
|
||||
<!--Mobile menu for selecting view and sorting-->
|
||||
<MobileSortingAndPreview />
|
||||
|
||||
<!--Mobile Menu-->
|
||||
<MobileMenu />
|
||||
|
||||
<!--Navigation Sidebar-->
|
||||
<MenuBar />
|
||||
|
||||
<!--File page-->
|
||||
<keep-alive :include="['Admin', 'Users']">
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
</keep-alive>
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
|
||||
import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
|
||||
import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
|
||||
import FileFullPreview from '@/components/FilesView/FileFullPreview'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import CreateFolder from '@/components/Others/CreateFolder'
|
||||
import MobileMenu from '@/components/FilesView/MobileMenu'
|
||||
import ShareCreate from '@/components/Others/ShareCreate'
|
||||
import Confirm from '@/components/Others/Popup/Confirm'
|
||||
import RenameItem from '@/components/Others/RenameItem'
|
||||
import ShareEdit from '@/components/Others/ShareEdit'
|
||||
import MoveItem from '@/components/Others/MoveItem'
|
||||
import DragUI from '@/components/FilesView/DragUI'
|
||||
import MenuBar from '@/components/Sidebar/MenuBar'
|
||||
import {includes} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
|
||||
import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
|
||||
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
|
||||
import CreateFolderPopup from '@/components/Others/CreateFolderPopup'
|
||||
import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import ShareCreatePopup from '@/components/Others/ShareCreatePopup'
|
||||
import FileMenuMobile from '@/components/FilesView/FileMenuMobile'
|
||||
import ConfirmPopup from '@/components/Others/Popup/ConfirmPopup'
|
||||
import RenameItemPopup from '@/components/Others/RenameItemPopup'
|
||||
import ShareEditPopup from '@/components/Others/ShareEditPopup'
|
||||
import MoveItemPopup from '@/components/Others/MoveItemPopup'
|
||||
import FilePreview from '@/components/FilesView/FilePreview'
|
||||
import DragUI from '@/components/FilesView/DragUI'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'Platform',
|
||||
components: {
|
||||
MobileSortingAndPreview,
|
||||
MobileMultiSelectMenu,
|
||||
MobileNavigation,
|
||||
FileFullPreview,
|
||||
ProcessingPopup,
|
||||
CreateFolder,
|
||||
ShareCreate,
|
||||
MobileMenu,
|
||||
RenameItem,
|
||||
ShareEdit,
|
||||
MoveItem,
|
||||
Confirm,
|
||||
MenuBar,
|
||||
DragUI,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScaledDown: false
|
||||
export default {
|
||||
name: 'Platform',
|
||||
components: {
|
||||
MultiSelectToolbarMobile,
|
||||
CreateFolderPopup,
|
||||
FileSortingMobile,
|
||||
SidebarNavigation,
|
||||
MobileNavigation,
|
||||
ShareCreatePopup,
|
||||
ProcessingPopup,
|
||||
RenameItemPopup,
|
||||
ShareEditPopup,
|
||||
FileMenuMobile,
|
||||
MoveItemPopup,
|
||||
ConfirmPopup,
|
||||
FilePreview,
|
||||
DragUI,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScaledDown: false
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('show:mobile-navigation', () => this.isScaledDown = true)
|
||||
events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
|
||||
events.$on('mobileMenu:show', () => this.isScaledDown = true)
|
||||
events.$on('fileItem:deselect', () => this.isScaledDown = false)
|
||||
events.$on('mobileSortingAndPreview', state => this.isScaledDown = state)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.is-scaled-down {
|
||||
@include transform(scale(0.95));
|
||||
.is-scaled-down {
|
||||
@include transform(scale(0.95));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,108 +1,114 @@
|
||||
<template>
|
||||
<div id="application-wrapper">
|
||||
|
||||
<!--Full File Preview-->
|
||||
<FileFullPreview />
|
||||
|
||||
<!--Loading Spinner-->
|
||||
<Spinner v-if="isLoading" />
|
||||
|
||||
<!--Move item popup-->
|
||||
<MoveItem />
|
||||
<!--File preview window-->
|
||||
<FilePreview />
|
||||
|
||||
<!-- Processing popup for zip -->
|
||||
<!--Popups-->
|
||||
<ProcessingPopup />
|
||||
|
||||
<!-- Mobile Menu for Multi selected items -->
|
||||
<MobileMultiSelectMenu />
|
||||
<CreateFolderPopup />
|
||||
<RenameItemPopup />
|
||||
|
||||
<!--Rename folder/file item-->
|
||||
<RenameItem />
|
||||
<MoveItemPopup />
|
||||
|
||||
<!--Create folder mobile UI-->
|
||||
<CreateFolder />
|
||||
<!-- Mobile components -->
|
||||
<FileSortingMobile />
|
||||
<FileMenuMobile />
|
||||
|
||||
<!--Drag UI-->
|
||||
<MultiSelectToolbarMobile />
|
||||
|
||||
<!--Others-->
|
||||
<Vignette />
|
||||
<DragUI />
|
||||
|
||||
<!--Mobile Menu-->
|
||||
<MobileMenu />
|
||||
|
||||
<!--Mobile menu for selecting view and sorting-->
|
||||
<MobileSortingAndPreview />
|
||||
|
||||
<!--System alerts-->
|
||||
<Alert />
|
||||
|
||||
<!--Background vignette-->
|
||||
<Vignette />
|
||||
|
||||
<!--Pages-->
|
||||
<router-view />
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
|
||||
import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
|
||||
import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
|
||||
import FileFullPreview from '@/components/FilesView/FileFullPreview'
|
||||
import CreateFolder from '@/components/Others/CreateFolder'
|
||||
import MobileMenu from '@/components/FilesView/MobileMenu'
|
||||
import RenameItem from '@/components/Others/RenameItem'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import MoveItem from '@/components/Others/MoveItem'
|
||||
import Vignette from '@/components/Others/Vignette'
|
||||
import DragUI from '@/components/FilesView/DragUI'
|
||||
import Alert from '@/components/FilesView/Alert'
|
||||
import {mapGetters} from 'vuex'
|
||||
import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
|
||||
import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
|
||||
import CreateFolderPopup from '@/components/Others/CreateFolderPopup'
|
||||
import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
|
||||
import FileMenuMobile from '@/components/FilesView/FileMenuMobile'
|
||||
import RenameItemPopup from '@/components/Others/RenameItemPopup'
|
||||
import MoveItemPopup from '@/components/Others/MoveItemPopup'
|
||||
import FilePreview from '@/components/FilesView/FilePreview'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import Vignette from '@/components/Others/Vignette'
|
||||
import DragUI from '@/components/FilesView/DragUI'
|
||||
import Alert from '@/components/FilesView/Alert'
|
||||
import {events} from '@/bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Platform',
|
||||
components: {
|
||||
MobileSortingAndPreview,
|
||||
MobileMultiSelectMenu,
|
||||
FileFullPreview,
|
||||
ProcessingPopup,
|
||||
CreateFolder,
|
||||
MobileMenu,
|
||||
RenameItem,
|
||||
MoveItem,
|
||||
Vignette,
|
||||
Spinner,
|
||||
DragUI,
|
||||
Alert,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
export default {
|
||||
name: 'Platform',
|
||||
components: {
|
||||
MultiSelectToolbarMobile,
|
||||
CreateFolderPopup,
|
||||
FileSortingMobile,
|
||||
ProcessingPopup,
|
||||
RenameItemPopup,
|
||||
FileMenuMobile,
|
||||
MoveItemPopup,
|
||||
FilePreview,
|
||||
Vignette,
|
||||
Spinner,
|
||||
DragUI,
|
||||
Alert,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isScaledDown: false
|
||||
}
|
||||
},
|
||||
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)
|
||||
|
||||
this.$store.dispatch('getShareDetail', this.$route.params.token)
|
||||
.then(response => {
|
||||
this.isLoading = false
|
||||
|
||||
// Show public file browser
|
||||
if (response.data.data.attributes.type === 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedFileBrowser') {
|
||||
this.$router.push({name: 'SharedFileBrowser'})
|
||||
}
|
||||
|
||||
// Show public single file
|
||||
if (response.data.data.attributes.type !== 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedSingleFile') {
|
||||
this.$router.push({name: 'SharedSingleFile'})
|
||||
}
|
||||
|
||||
// Show authentication page
|
||||
if (response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedAuthentication') {
|
||||
this.$router.push({name: 'SharedAuthentication'})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getShareDetail', this.$route.params.token)
|
||||
.then(response => {
|
||||
this.isLoading = false
|
||||
|
||||
// Show public file browser
|
||||
if (response.data.data.attributes.type === 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedFileBrowser') {
|
||||
this.$router.push({name: 'SharedFileBrowser'})
|
||||
}
|
||||
|
||||
// Show public single file
|
||||
if (response.data.data.attributes.type !== 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedSingleFile') {
|
||||
this.$router.push({name: 'SharedSingleFile'})
|
||||
}
|
||||
|
||||
// Show authentication page
|
||||
if (response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedAuthentication') {
|
||||
this.$router.push({name: 'SharedAuthentication'})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.is-scaled-down {
|
||||
@include transform(scale(0.95));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user