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

reorganization of FileView

Browse Source
This commit is contained in:
Peter Papp
2021-08-20 09:04:56 +02:00
parent e13a2cd18f
commit c57a244ae1
13 changed files with 528 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/DesktopToolbar.vue
+2 -2
View File
@@ -17,9 +17,9 @@
<ToolbarWrapper>
<!--Search bar-->
<!-- <ToolbarGroup style="margin-left: 0">
<ToolbarGroup v-if="false" style="margin-left: 0">
<SearchBar />
</ToolbarGroup>-->
</ToolbarGroup>
<!--Creating controls-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor'])">
resources/js/components/FilesView/FileItemList.vue
+4 -2
View File
@@ -223,7 +223,8 @@ export default {
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
//this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
this.$router.push({name: 'Files', params: {id: this.item.id}})
}
} else {
@@ -260,7 +261,8 @@ export default {
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
//this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
this.$router.push({name: 'Files', params: {id: this.item.id}})
}
}
},
resources/js/components/FilesView/FileSortingOptions.vue
+5 -2
View File
@@ -72,8 +72,11 @@ export default {
// Update sorting state in vuex
this.$store.commit('UPDATE_SORTING')
// Get data using the application location
this.$getDataByLocation()
// Get dara of user with favourites tree
this.$store.dispatch('getAppData')
// Get data of Navigator tree
this.$store.dispatch('getFolderTree')
},
changePreview(previewType) {
this.$store.dispatch('changePreviewType', previewType)
resources/js/helpers.js → resources/js/helpers/functionHelpers.js
Vendored
+8 -75
View File
@@ -1,57 +1,12 @@
import i18n from '/resources/js/i18n/index'
import store from './store/index'
import store from '../store/index'
import {debounce, isArray} from "lodash";
import {events} from './bus'
import {events} from '../bus'
import axios from 'axios'
const Helpers = {
const FunctionHelpers = {
install(Vue) {
Vue.prototype.$renameFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'rename-item', item: entry})
}
Vue.prototype.$moveFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'move', item: [entry]})
}
Vue.prototype.$createTeamFolder = function (entry) {
events.$emit('popup:open', {name: 'create-team-folder'})
}
Vue.prototype.$updateTeamFolder = function (entry) {
events.$emit('popup:open', {name: 'create-team-folder', item: [entry]})
}
Vue.prototype.$deleteFileOrFolder = function (entry) {
if (!this.$store.getters.clipboard.includes(entry)) {
this.$store.dispatch('deleteItem', entry)
}
if (this.$store.getters.clipboard.includes(entry)) {
this.$store.dispatch('deleteItem')
}
}
Vue.prototype.$restoreFileOrFolder = function (entry) {
if (!this.$store.getters.clipboard.includes(entry))
this.$store.dispatch('restoreItem', entry)
if (this.$store.getters.clipboard.includes(entry))
this.$store.dispatch('restoreItem', null)
}
Vue.prototype.$shareFileOrFolder = function (entry) {
let event = entry.shared
? 'share-edit'
: 'share-create'
events.$emit('popup:open', {
name: event,
item: entry
})
}
Vue.prototype.$updateText = debounce(function (route, name, value, allowEmpty = false) {
if ((value === '' || value === ' ' || typeof value === 'object') && !allowEmpty) return
@@ -252,10 +207,6 @@ const Helpers = {
anchor.click()
}
Vue.prototype.$closePopup = function () {
events.$emit('popup:close')
}
Vue.prototype.$isThisRoute = function (route, locations) {
return locations.includes(route.name)
@@ -353,28 +304,6 @@ const Helpers = {
return validate
}
Vue.prototype.$getDataByLocation = function () {
let folder = store.getters.currentFolder
let actions = {
'base': ['getFolder', [{folder: folder, back: true, init: false, sorting: true}]],
'public': ['browseShared', [{folder: folder, back: true, init: false, sorting: true}]],
'trash': ['getFolder', [{folder: folder, back: true, init: false, sorting: true}]],
'trash-root': ['getTrash'],
'latest': ['getLatest'],
'shared': ['getShared']
}
this.$store.dispatch(...actions[folder.location])
// Get dara of user with favourites tree
this.$store.dispatch('getAppData')
// Get data of Navigator tree
this.$store.dispatch('getFolderTree')
}
// Detect windows
Vue.prototype.$checkOS = function () {
if (navigator.userAgent.indexOf('Windows') != -1) {
@@ -398,7 +327,11 @@ const Helpers = {
return navigator.userAgent.match(toMatchItem)
})
}
Vue.prototype.$closePopup = function () {
events.$emit('popup:close')
}
}
}
export default Helpers
export default FunctionHelpers
resources/js/helpers/itemHelpers.js
Vendored
+60
View File
@@ -0,0 +1,60 @@
import {events} from "../bus";
import {debounce, isArray} from "lodash";
import axios from "axios";
import i18n from "../i18n";
import store from "../store";
const itemHelpers = {
install(Vue) {
Vue.prototype.$renameFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'rename-item', item: entry})
}
Vue.prototype.$moveFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'move', item: [entry]})
}
Vue.prototype.$createTeamFolder = function (entry) {
events.$emit('popup:open', {name: 'create-team-folder'})
}
Vue.prototype.$updateTeamFolder = function (entry) {
events.$emit('popup:open', {name: 'create-team-folder', item: [entry]})
}
Vue.prototype.$removeFavourite = function (folder) {
this.$store.dispatch('removeFromFavourites', folder)
}
Vue.prototype.$deleteFileOrFolder = function (entry) {
if (!this.$store.getters.clipboard.includes(entry)) {
this.$store.dispatch('deleteItem', entry)
}
if (this.$store.getters.clipboard.includes(entry)) {
this.$store.dispatch('deleteItem')
}
}
Vue.prototype.$restoreFileOrFolder = function (entry) {
if (!this.$store.getters.clipboard.includes(entry))
this.$store.dispatch('restoreItem', entry)
if (this.$store.getters.clipboard.includes(entry))
this.$store.dispatch('restoreItem', null)
}
Vue.prototype.$shareFileOrFolder = function (entry) {
let event = entry.shared
? 'share-edit'
: 'share-create'
events.$emit('popup:open', {
name: event,
item: entry
})
}
}
}
export default itemHelpers
resources/js/main.js
Vendored
+4 -2
View File
@@ -6,7 +6,8 @@ import router from "./router";
import App from "./App.vue";
import store from "./store";
import {events} from "./bus";
import Helpers from "./helpers";
import functionHelpers from "./helpers/functionHelpers";
import itemHelpers from "./helpers/itemHelpers"
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
@@ -85,7 +86,8 @@ library.add(
Vue.component("FontAwesomeIcon", FontAwesomeIcon);
Vue.use(VueRouter);
Vue.use(Helpers);
Vue.use(functionHelpers);
Vue.use(itemHelpers);
Vue.config.productionTip = false;
resources/js/router.js
Vendored
+2 -2
View File
@@ -398,9 +398,9 @@ const routesUser = [
children: [
{
name: 'Files',
path: '/platform/files',
path: '/platform/files/:id?',
component: () =>
import(/* webpackChunkName: "chunks/files" */ './views/FilePages/Files'),
import(/* webpackChunkName: "chunks/files" */ './views/FileView/Home/Files'),
meta: {
requiresAuth: true
},
resources/js/store/modules/fileBrowser.js
Vendored
+2 -17
View File
@@ -7,9 +7,7 @@ import i18n from '/resources/js/i18n/index'
const defaultState = {
currentFolder: undefined,
navigation: undefined,
isLoading: true,
browseHistory: [],
fastPreview: undefined,
clipboard: [],
@@ -17,24 +15,11 @@ const defaultState = {
}
const actions = {
getFolder: ({commit, getters}, [payload]) => {
getFolder: ({commit, getters}, id) => {
commit('LOADING_STATE', {loading: true, data: []})
if (payload.init)
commit('FLUSH_FOLDER_HISTORY')
// Set folder location
payload.folder.location = payload.folder.deleted_at || payload.folder.location === 'trash' ? 'trash' : 'base'
if (!payload.back && !payload.sorting)
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
let url = payload.folder.location === 'trash'
? '/browse/folders/' + payload.folder.id + getters.sorting.URI + '&trash=true'
: '/browse/folders/' + payload.folder.id + getters.sorting.URI
axios
.get(getters.api + url)
.get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`)
.then(response => {
commit('LOADING_STATE', {loading: false, data: response.data})
commit('STORE_CURRENT_FOLDER', payload.folder)
resources/js/views/FilePages/Files.vue
-288
View File
@@ -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>
resources/js/views/FileView/Home/Files.vue
+36
View File
@@ -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>
resources/js/views/FileView/NavigationPanel.vue
+242
View File
@@ -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>
resources/js/views/Platform.vue
+41 -6
View File
@@ -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 {