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

v1.5-alpha.1

Browse Source
This commit is contained in:
carodej
2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -1,41 +1,57 @@
<template>
<div id="desktop-toolbar" v-if="! $isMinimalScale()">
<div id="desktop-toolbar">
<div class="toolbar-wrapper">
<!-- Go back-->
<div class="toolbar-go-back" v-if="homeDirectory">
<div @click="goBack" class="go-back-button">
<FontAwesomeIcon
v-if="browseHistory.length > 0"
class="icon-back"
icon="chevron-left"
></FontAwesomeIcon>
<chevron-left-icon size="17" :class="{'is-active': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
<span class="back-directory-title">
{{ directoryName }}
</span>
<span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options" id="folder-actions">
<more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
</span>
</div>
</div>
<!-- Tools-->
<div class="toolbar-tools">
<!--Search bar-->
<div class="toolbar-button-wrapper">
<SearchBar/>
</div>
<!--Files controlls-->
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<div class="toolbar-button-wrapper"
v-if="$checkPermission(['master', 'editor'])">
<ToolbarButtonUpload
source="upload"
:class="{'is-inactive': canUploadInView}"
:action="$t('actions.upload')"
/>
<ToolbarButton
source="trash-alt"
:action="$t('actions.delete')"
@click.native="deleteItems"
source="move"
:class="{'is-inactive': canMoveInView}"
action="Move"
@click.native="moveItem"
/>
<ToolbarButton
v-if="! $isThisLocation(['public'])"
source="share"
:class="{'is-inactive': canShareInView}"
action="Share"
@click.native="shareItem"
/>
<ToolbarButton
source="trash"
:class="{'is-inactive': canDeleteInView}"
:action="$t('actions.delete')"
@click.native="deleteItem"
/>
<ToolbarButton
:class="{'is-inactive': canCreateFolderInView}"
@click.native="createFolder"
source="folder-plus"
:action="$t('actions.create_folder')"
@@ -63,89 +79,108 @@
<script>
import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import UploadProgress from '@/components/FilesView/UploadProgress'
import ToolbarButton from '@/components/FilesView/ToolbarButton'
import SearchBar from '@/components/FilesView/SearchBar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import {last} from 'lodash'
export default {
name: 'ToolBar',
components: {
ToolbarButtonUpload,
MoreHorizontalIcon,
ChevronLeftIcon,
UploadProgress,
ToolbarButton,
SearchBar
},
computed: {
...mapGetters([
'FilePreviewType',
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'browseHistory',
'homeDirectory',
'FilePreviewType',
]),
directoryName() {
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
},
previousFolder() {
const length = this.browseHistory.length - 2
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
},
preview() {
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
},
},
data() {
return {
isSidebarMenu: false,
canCreateFolderInView() {
return ! this.$isThisLocation(['base', 'public'])
},
canDeleteInView() {
return ! this.$isThisLocation(['trash', 'trash-root', 'base', 'participant_uploads', 'latest', 'shared', 'public'])
},
canUploadInView() {
return ! this.$isThisLocation(['base', 'public'])
},
canMoveInView() {
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
},
canShareInView() {
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
}
},
methods: {
showSidebarMenu() {
this.isSidebarMenu = ! this.isSidebarMenu
events.$emit('show:sidebar')
},
goBack() {
// Get previous folder
let previousFolder = last(this.browseHistory)
if (this.previousFolder.location === 'trash-root') {
if (! previousFolder)
return
if (previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
this.$store.commit('FLUSH_BROWSER_HISTORY')
} else if (previousFolder.location === 'shared') {
this.$store.dispatch('getShared')
} else {
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.previousFolder, true])
this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
} else {
this.$store.dispatch('getFolder', [this.previousFolder, true])
this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
}
}
},
deleteItems() {
folderActions() {
events.$emit('folder:actions', this.currentFolder)
},
deleteItem() {
events.$emit('items:delete')
},
createFolder() {
if (! this.$isThisLocation(['trash', 'trash-root']))
this.$createFolder()
this.$createFolder()
},
moveItem() {
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
},
shareItem() {
if (this.fileInfoDetail.shared) {
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
} else {
events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
}
}
},
created() {
// Listen for hide sidebar
events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.toolbar-wrapper {
padding-top: 15px;
padding-bottom: 15px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
position: relative;
z-index: 2;
@@ -171,13 +206,48 @@
.icon-back {
vertical-align: middle;
cursor: pointer;
margin-right: 12px;
margin-right: 6px;
opacity: 0.15;
pointer-events: none;
@include transition(150ms);
&.is-active {
opacity: 1;
pointer-events: initial;
}
}
.toolbar-go-back {
cursor: pointer;
.folder-options {
vertical-align: middle;
margin-left: 6px;
padding: 1px 4px;
line-height: 0;
border-radius: 3px;
@include transition(150ms);
svg circle {
@include transition(150ms);
}
&:hover {
background: $light_background;
svg circle {
stroke: $theme;
}
}
.icon-more {
vertical-align: middle;
}
}
.back-directory-title {
@include font-size(15);
line-height: 1;
font-weight: 700;
overflow: hidden;
@@ -201,7 +271,7 @@
text-align: right;
.toolbar-button-wrapper {
margin-left: 75px;
margin-left: 28px;
display: inline-block;
vertical-align: middle;
@@ -210,8 +280,13 @@
}
}
button {
margin-left: 20px;
.button {
margin-left: 5px;
&.is-inactive {
opacity: 0.25;
pointer-events: none;
}
&:first-child {
margin-left: 0;
@@ -219,6 +294,33 @@
}
}
@media only screen and (max-width: 1024px) {
.toolbar-go-back .back-directory-title {
max-width: 120px;
}
.toolbar-tools {
.button {
margin-left: 0;
height: 40px;
width: 40px;
}
.toolbar-button-wrapper {
margin-left: 25px;
}
}
}
@media only screen and (max-width: 960px) {
#desktop-toolbar {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.toolbar .directory-name {
color: $dark_mode_text_primary;
@@ -229,6 +331,13 @@
.back-directory-title {
color: $dark_mode_text_primary;
}
.folder-options {
&:hover {
background: $dark_mode_foreground;
}
}
}
}
</style>