mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-26 06:34:41 +00:00
reorganization of FileView
This commit is contained in:
Peter Papp
@@ -1,288 +0,0 @@
|
||||
<template>
|
||||
<section id="viewport" v-if="user">
|
||||
|
||||
<ContentSidebar>
|
||||
|
||||
<!--Empty storage warning-->
|
||||
<ContentGroup v-if="config.storageLimit && storage.used > 95">
|
||||
<UpgradeSidebarBanner/>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('sidebar.locations_title')">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
|
||||
<div class="icon text-theme">
|
||||
<home-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.home') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}" @click="getLatest">
|
||||
<div class="icon text-theme">
|
||||
<upload-cloud-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.latest') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared">
|
||||
<div class="icon text-theme">
|
||||
<link-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.my_shared') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['trash', 'trash-root'])}" @click="getTrash">
|
||||
<div class="icon text-theme">
|
||||
<trash2-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('locations.trash') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('Collaboration')" :can-collapse="true">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Team Folders') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}" @click="getLatest">
|
||||
<div class="icon text-theme">
|
||||
<user-check-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Shared with Me') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
|
||||
<span class="empty-note navigator" v-if="tree.length === 0">
|
||||
{{ $t('sidebar.folders_empty') }}
|
||||
</span>
|
||||
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Favourites-->
|
||||
<ContentGroup :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
|
||||
|
||||
<div class="menu-list-wrapper vertical favourites" :class="{ 'is-dragenter': area }" @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)">
|
||||
<transition-group tag="div" class="menu-list" name="folder-item">
|
||||
<span class="empty-note favourites" v-if="favourites.length == 0" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</span>
|
||||
|
||||
<a @click.stop="openFolder(folder)" class="menu-list-item" :class="{'is-current': (folder && currentFolder) && (currentFolder.id === folder.id)}" v-for="folder in favourites" :key="folder.id">
|
||||
<div class="text-theme">
|
||||
<folder-icon size="17" class="folder-icon text-theme"></folder-icon>
|
||||
<span class="label text-theme">{{ folder.name }}</span>
|
||||
</div>
|
||||
<x-icon size="17" @click.stop="removeFavourite(folder)" class="delete-icon"></x-icon>
|
||||
</a>
|
||||
</transition-group>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
<ContentFileView/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
|
||||
import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
|
||||
import ContentFileView from '/resources/js/components/Others/ContentFileView'
|
||||
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
|
||||
import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
|
||||
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '/resources/js/bus'
|
||||
import {
|
||||
UploadCloudIcon,
|
||||
UserCheckIcon,
|
||||
FolderIcon,
|
||||
Trash2Icon,
|
||||
UsersIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
XIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
UpgradeSidebarBanner,
|
||||
TreeMenuNavigator,
|
||||
ContentFileView,
|
||||
UploadCloudIcon,
|
||||
ContentSidebar,
|
||||
UserCheckIcon,
|
||||
TitlePreview,
|
||||
ContentGroup,
|
||||
FolderIcon,
|
||||
Trash2Icon,
|
||||
UsersIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory',
|
||||
'currentFolder',
|
||||
'clipboard',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
favourites() {
|
||||
return this.user.data.relationships.favourites.data.attributes.folders
|
||||
},
|
||||
tree() {
|
||||
return this.user.data.attributes.folders
|
||||
},
|
||||
storage() {
|
||||
return this.$store.getters.user.data.attributes.storage
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
area: false,
|
||||
draggedItem: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getShared() {
|
||||
this.$store.dispatch('getShared', [{back: false, init: false}])
|
||||
},
|
||||
getTrash() {
|
||||
this.$store.dispatch('getTrash')
|
||||
},
|
||||
getLatest() {
|
||||
this.$store.dispatch('getLatest')
|
||||
},
|
||||
goHome() {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.homeDirectory, back: false, init: true }])
|
||||
},
|
||||
openFolder(folder) {
|
||||
this.$store.dispatch('getFolder', [{ folder: folder, back: false, init: false }])
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
dragFinish() {
|
||||
this.area = false
|
||||
|
||||
events.$emit('drop')
|
||||
|
||||
// Check if dragged item is folder
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
// Check if folder exist in favourites
|
||||
if (this.favourites.find(folder => folder.id == this.draggedItem.id)) return
|
||||
|
||||
// Prevent to move folders to self
|
||||
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
|
||||
|
||||
// Store favourites folder
|
||||
|
||||
//Add to favourites non selected folder
|
||||
if (!this.clipboard.includes(this.draggedItem)) {
|
||||
this.$store.dispatch('addToFavourites', this.draggedItem)
|
||||
}
|
||||
|
||||
//Add to favourites selected folders
|
||||
if (this.clipboard.includes(this.draggedItem)) {
|
||||
this.$store.dispatch('addToFavourites', null)
|
||||
}
|
||||
},
|
||||
removeFavourite(folder) {
|
||||
this.$store.dispatch('removeFromFavourites', folder)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.goHome()
|
||||
|
||||
// Listen for dragstart folder items
|
||||
events.$on('dragstart', (item) => {
|
||||
this.draggedItem = item
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.empty-note {
|
||||
|
||||
&.navigator {
|
||||
padding: 5px 25px 10px;
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
padding: 5px 23px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigator {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.empty-note {
|
||||
|
||||
&.navigator {
|
||||
padding: 5px 20px 10px;
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
padding: 5px 18px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.folder-item-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.folder-item-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<ContextMenu>
|
||||
|
||||
</ContextMenu>
|
||||
<FileBrowser/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('getFolder', this.$route.params.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--Empty storage warning-->
|
||||
<ContentGroup v-if="config.storageLimit && storage.used > 95">
|
||||
<UpgradeSidebarBanner/>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('sidebar.locations_title')">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<a class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<home-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.home') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<upload-cloud-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.latest') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<link-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('sidebar.my_shared') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<trash2-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('locations.trash') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('Collaboration')" slug="collaboration" :can-collapse="true">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<a class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Team Folders') }}
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<user-check-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
{{ $t('Shared with Me') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
|
||||
<span class="empty-note navigator" v-if="tree.length === 0">
|
||||
{{ $t('sidebar.folders_empty') }}
|
||||
</span>
|
||||
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id"/>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Favourites-->
|
||||
<ContentGroup :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
|
||||
|
||||
<div @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)" :class="{ 'is-dragenter': area }" class="menu-list-wrapper vertical favourites">
|
||||
<transition-group tag="div" class="menu-list" name="folder-item">
|
||||
<span class="empty-note favourites" v-if="favourites.length === 0" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</span>
|
||||
|
||||
<a class="menu-list-item" v-for="folder in favourites" :key="folder.id">
|
||||
<div class="text-theme">
|
||||
<folder-icon size="17" class="folder-icon text-theme"></folder-icon>
|
||||
<span class="label text-theme">{{ folder.name }}</span>
|
||||
</div>
|
||||
<x-icon size="17" @click.stop="$removeFavourite(folder)" class="delete-icon"></x-icon>
|
||||
</a>
|
||||
</transition-group>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
|
||||
import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
|
||||
import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
|
||||
import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
|
||||
import {events} from "../../bus";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "NavigationPanel",
|
||||
components: {
|
||||
UpgradeSidebarBanner,
|
||||
TreeMenuNavigator,
|
||||
ContentGroup,
|
||||
UploadCloudIcon,
|
||||
UserCheckIcon,
|
||||
FolderIcon,
|
||||
Trash2Icon,
|
||||
UsersIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
favourites() {
|
||||
return this.user.data.relationships.favourites.data.attributes.folders
|
||||
},
|
||||
storage() {
|
||||
return this.$store.getters.user.data.attributes.storage
|
||||
},
|
||||
tree() {
|
||||
return this.user.data.attributes.folders
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggedItem: undefined,
|
||||
area: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragFinish() {
|
||||
this.area = false
|
||||
|
||||
events.$emit('drop')
|
||||
|
||||
// Check if dragged item is folder
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
// Check if folder exist in favourites
|
||||
if (this.favourites.find(folder => folder.id === this.draggedItem.id)) return
|
||||
|
||||
// Prevent to move folders to self
|
||||
if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return
|
||||
|
||||
// Store favourites folder
|
||||
|
||||
//Add to favourites non selected folder
|
||||
if (!this.clipboard.includes(this.draggedItem)) {
|
||||
this.$store.dispatch('addToFavourites', this.draggedItem)
|
||||
}
|
||||
|
||||
//Add to favourites selected folders
|
||||
if (this.clipboard.includes(this.draggedItem)) {
|
||||
this.$store.dispatch('addToFavourites', null)
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Listen for dragstart folder items
|
||||
events.$on('dragstart', item => this.draggedItem = item)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.empty-note {
|
||||
|
||||
&.navigator {
|
||||
padding: 5px 25px 10px;
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
padding: 5px 23px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigator {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.empty-note {
|
||||
|
||||
&.navigator {
|
||||
padding: 5px 20px 10px;
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
padding: 5px 18px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.folder-item-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.folder-item-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -36,13 +36,19 @@
|
||||
<!--Others-->
|
||||
<DragUI />
|
||||
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
<!--Sidebar-->
|
||||
<ContentSidebar>
|
||||
<NavigationPanel v-if="user" />
|
||||
</ContentSidebar>
|
||||
|
||||
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
|
||||
<DesktopToolbar/>
|
||||
<router-view :key="$route.fullPath" :class="{'is-scaled-down': isScaledDown}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup"
|
||||
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
|
||||
import MultiSelectToolbarMobile from '/resources/js/components/FilesView/MultiSelectToolbarMobile'
|
||||
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
|
||||
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
|
||||
@@ -52,15 +58,20 @@
|
||||
import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup'
|
||||
import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
|
||||
import ShareCreatePopup from '/resources/js/components/Others/ShareCreatePopup'
|
||||
import DesktopToolbar from '/resources/js/components/FilesView/DesktopToolbar'
|
||||
import FileMenuMobile from '/resources/js/components/FilesView/FileMenuMobile'
|
||||
import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup"
|
||||
import ConfirmPopup from '/resources/js/components/Others/Popup/ConfirmPopup'
|
||||
import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
|
||||
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
|
||||
import ShareEditPopup from '/resources/js/components/Others/ShareEditPopup'
|
||||
import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
|
||||
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
|
||||
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
|
||||
import DragUI from '/resources/js/components/FilesView/DragUI'
|
||||
import {mapGetters} from 'vuex'
|
||||
import NavigationPanel from "./FileView/NavigationPanel"
|
||||
import {events} from '/resources/js/bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Platform',
|
||||
@@ -75,9 +86,12 @@
|
||||
MobileNavigation,
|
||||
ShareCreatePopup,
|
||||
ProcessingPopup,
|
||||
NavigationPanel,
|
||||
RenameItemPopup,
|
||||
ShareEditPopup,
|
||||
DesktopToolbar,
|
||||
FileMenuMobile,
|
||||
ContentSidebar,
|
||||
MoveItemPopup,
|
||||
ConfirmPopup,
|
||||
FilePreview,
|
||||
@@ -86,7 +100,12 @@
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
'config',
|
||||
'homeDirectory',
|
||||
'currentFolder',
|
||||
'clipboard',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
@@ -99,7 +118,10 @@
|
||||
if (e.key === 'k' && e.metaKey) {
|
||||
events.$emit('spotlight:show');
|
||||
}
|
||||
}
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('mobile-menu:show', () => this.isScaledDown = true)
|
||||
@@ -117,6 +139,19 @@
|
||||
<style lang="scss">
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.is-scaled-down {
|
||||
|
||||
Reference in New Issue
Block a user