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

empty page refactored

Browse Source
This commit is contained in:
Peter Papp
2021-08-20 17:51:58 +02:00
parent b5a8fe8b1a
commit b23259309c
15 changed files with 85 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/DesktopToolbar.vue
-2
View File
@@ -121,8 +121,6 @@
'isVisibleSidebar',
'FilePreviewType',
'currentFolder',
'browseHistory',
'homeDirectory',
'clipboard',
]),
isLoadedFolder() {
resources/js/components/FilesView/EmptyFilePage.vue
+3 -31
View File
@@ -1,31 +1,10 @@
<template>
<div class="empty-page" v-if="isLoading || isEmpty">
<div class="empty-state">
<!--Shared empty message-->
<div class="text-content" v-if="$isThisLocation(['shared']) && ! isLoading">
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
<div v-if="!isLoading" class="text-content">
<slot></slot>
</div>
<!--Trash empty message-->
<div class="text-content" v-if="$isThisLocation(['trash', 'trash-root']) && ! isLoading">
<h1 class="title">{{ $t('empty_page.title') }}</h1>
</div>
<!--Base file browser empty message-->
<div class="text-content" v-if="$isThisLocation(['base', 'public', 'latest']) && !isLoading">
<h1 class="title">{{ $t('empty_page.title') }}</h1>
<p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
<ButtonUpload
v-if="$checkPermission(['master', 'editor'])"
button-style="theme"
>
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</div>
<!--Spinner-->
<div class="text-content" v-if="isLoading">
<div v-else class="text-content">
<Spinner />
</div>
</div>
@@ -33,23 +12,16 @@
</template>
<script>
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
import Spinner from '/resources/js/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
export default {
name: 'EmptyFilePage',
props: [
'title',
'description'
],
components: {
ButtonUpload,
Spinner,
},
computed: {
...mapGetters([
'currentFolder',
'isLoading',
'entries',
]),
resources/js/components/FilesView/FileBrowser.vue
+6 -4
View File
@@ -20,9 +20,14 @@
<!--Mobile Actions-->
<FileActionsMobile>
<slot name="file-actions-mobile"></slot>
<slot name="file-actions-mobile" />
</FileActionsMobile>
<!--Show empty page if no content-->
<EmptyFilePage>
<slot name="empty-file-page" />
</EmptyFilePage>
<!--Item previews list-->
<div v-if="isList" class="file-list-wrapper">
<transition-group
@@ -64,9 +69,6 @@
/>
</transition-group>
</div>
<!--Show empty page if folder is empty-->
<EmptyFilePage />
</div>
<!--File Info Panel-->
resources/js/components/FilesView/FileFilterMobile.vue
+1 -6
View File
@@ -29,14 +29,9 @@ export default {
MenuMobile,
Option,
},
computed: {
...mapGetters([
'homeDirectory'
]),
},
methods: {
goToFiles() {
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
this.$store.dispatch('getFolder')
},
goToLatest() {
this.$store.dispatch('getLatest')
resources/js/components/FilesView/MobileToolbar.vue
+20 -26
View File
@@ -3,7 +3,7 @@
<!-- Go back-->
<div @click="goBack" class="go-back-button">
<chevron-left-icon size="17" class="icon-back" :class="{'is-visible': browseHistory.length > 1}" />
<chevron-left-icon size="17" class="icon-back" :class="{'is-visible': isLoadedFolder }" />
<!--Folder Title-->
<div class="directory-name">
@@ -26,7 +26,6 @@
import { MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import {last} from 'lodash'
export default {
name: 'MobileToolBar',
@@ -41,39 +40,34 @@
'isVisibleSidebar',
'FilePreviewType',
'currentFolder',
'browseHistory',
'homeDirectory',
]),
directoryName() {
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
}
directoryName() {
if (this.currentFolder) {
return this.currentFolder.name
} else {
return {
'RecentUploads': this.$t('Recent'),
'MySharedItems': this.$t('Shared'),
'Trash': this.$t('Trash'),
'Public': this.$t('Files'),
'Files': this.$t('Files'),
}[this.$route.name]
}
},
isLoadedFolder() {
return this.$route.params.id
},
},
methods: {
showMobileNavigation() {
events.$emit('mobile-menu:show', 'user-navigation')
events.$emit('mobileSelecting:stop')
},
goBack() {
let previousFolder = last(this.browseHistory)
if (previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
} else if (previousFolder.location === 'shared') {
this.$store.dispatch('getShared')
} else {
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
}
}
},
goBack() {
if (this.isLoadedFolder) this.$router.back()
},
},
created() {
// Listen for hide sidebar
events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false
})
resources/js/components/Others/MobileNavigation.vue
+1 -2
View File
@@ -72,7 +72,6 @@
},
computed: {
...mapGetters([
'homeDirectory',
'config',
'user',
]),
@@ -105,7 +104,7 @@
if (this.$route.name !== 'Files')
this.$router.push({name: 'Files'})
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
this.$store.dispatch('getFolder')
},
logOut() {
this.$store.dispatch('logOut')
resources/js/store/modules/app.js
Vendored
-3
View File
@@ -7,7 +7,6 @@ const defaultState = {
FilePreviewType: localStorage.getItem('preview_type') || 'list',
config: undefined,
index: undefined,
homeDirectory: undefined,
requestedPlan: undefined,
emojis: undefined,
sorting: {
@@ -1029,7 +1028,6 @@ const mutations = {
},
INIT(state, data) {
state.config = data.config
state.homeDirectory = data.rootDirectory
},
SET_SAAS(state, data) {
state.config.isSaaS = data
@@ -1064,7 +1062,6 @@ const getters = {
teamPermissions: state => state.teamPermissions,
FilePreviewType: state => state.FilePreviewType,
expirationList: state => state.expirationList,
homeDirectory: state => state.homeDirectory,
requestedPlan: state => state.requestedPlan,
currencyList: state => state.currencyList,
countries: state => state.countries,
resources/js/store/modules/fileBrowser.js
Vendored
-2
View File
@@ -9,7 +9,6 @@ const defaultState = {
fastPreview: undefined,
navigation: undefined,
isLoading: true,
browseHistory: [],
clipboard: [],
entries: [],
}
@@ -189,7 +188,6 @@ const mutations = {
const getters = {
currentFolder: state => state.currentFolder,
browseHistory: state => state.browseHistory,
fastPreview: state => state.fastPreview,
navigation: state => state.navigation,
clipboard: state => state.clipboard,
resources/js/store/modules/fileFunctions.js
Vendored
+2 -2
View File
@@ -333,9 +333,9 @@ const actions = {
if (data.id === getters.currentFolder.id) {
if (getters.currentFolder.location === 'public') {
dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
dispatch('browseShared')
} else {
dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
dispatch('getFolder')
}
}
}
resources/js/views/FileView/Files.vue
+13
View File
@@ -45,11 +45,23 @@
<template v-slot:file-actions-mobile>
<!-- todo: Implement mobile buttons-->
</template>
<template v-slot:empty-file-page>
<h1 class="title">{{ $t('empty_page.title') }}</h1>
<p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
<ButtonUpload
v-if="$checkPermission(['master', 'editor'])"
button-style="theme"
>
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
</FileBrowser>
</div>
</template>
<script>
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -60,6 +72,7 @@
export default {
name: 'Files',
components: {
ButtonUpload,
OptionGroup,
FileBrowser,
ContextMenu,
resources/js/views/FileView/MySharedItems.vue
+4
View File
@@ -37,6 +37,10 @@
<template v-slot:file-actions-mobile>
<!-- todo: Implement mobile buttons-->
</template>
<template v-slot:empty-file-page>
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</template>
</FileBrowser>
</div>
</template>
resources/js/views/FileView/Trash.vue
+4
View File
@@ -36,6 +36,10 @@
<template v-slot:file-actions-mobile>
<!-- todo: Implement mobile buttons-->
</template>
<template v-slot:empty-file-page>
<h1 class="title">{{ $t('empty_page.title') }}</h1>
</template>
</FileBrowser>
</div>
</template>
resources/js/views/Platform.vue
-2
View File
@@ -100,8 +100,6 @@
},
computed: {
...mapGetters([
'config',
'homeDirectory',
'currentFolder',
'clipboard',
'config',
resources/js/views/Shared/SharedFileBrowser.vue
+1 -12
View File
@@ -64,25 +64,14 @@
return this.navigation ? this.navigation[0].folders : undefined
},
},
data() {
return {
homeDirectory: undefined,
}
},
methods: {
goHome() {
this.$store.dispatch('browseShared', [{folder: this.homeDirectory, back: false, init: true}])
this.$store.dispatch('browseShared')
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
initFileBrowser() {
this.homeDirectory = {
id: this.sharedDetail.item_id,
name: this.$t('locations.home'),
location: 'public',
}
// Get folder tree
this.$store.dispatch('getFolderTree')