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

Initial commit

Browse Source
This commit is contained in:
MakingCG
2020-03-10 19:00:32 +01:00
commit 3285a7e1c2
165 changed files with 31472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<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>
<span class="back-directory-title">{{
directoryName
}}</span>
</div>
</div>
<!-- Tools-->
<div class="toolbar-tools">
<div class="toolbar-button-wrapper">
<SearchBar/>
</div>
<div class="toolbar-button-wrapper">
<ToolbarButtonUpload source="upload" action="Upload file"/>
<ToolbarButton
source="trash-alt"
action="Delete"
@click.native="deleteItems"
/>
<ToolbarButton
@click.native="createFolder"
source="folder-plus"
action="Create folder"
/>
</div>
<div class="toolbar-button-wrapper">
<ToolbarButton
:source="preview"
action=""
@click.native="$store.dispatch('changePreviewType')"
/>
<ToolbarButton
:class="{ active: fileInfoVisible }"
@click.native="$store.dispatch('fileInfoToggle')"
source="info"
/>
</div>
</div>
</div>
<UploadProgress />
</div>
</template>
<script>
import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'ToolBar',
components: {
ToolbarButtonUpload,
UploadProgress,
ToolbarButton,
SearchBar
},
computed: {
...mapGetters([
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'browseHistory',
'homeDirectory',
'preview_type',
]),
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.preview_type === 'list' ? 'th' : 'th-list'
}
},
data() {
return {
isSidebarMenu: false,
}
},
methods: {
showSidebarMenu() {
this.isSidebarMenu = ! this.isSidebarMenu
events.$emit('show:sidebar')
},
goBack() {
if (this.previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
this.$store.commit('FLUSH_BROWSER_HISTORY')
} else {
this.$store.dispatch('goToFolder', [this.previousFolder, true])
}
},
deleteItems() {
events.$emit('items:delete')
},
createFolder() {
this.$createFolder()
}
},
created() {
// Listen for hide sidebar
events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false
})
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.toolbar-wrapper {
padding-top: 15px;
padding-bottom: 15px;
display: flex;
position: relative;
z-index: 2;
> div {
width: 100%;
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
}
.directory-name {
vertical-align: middle;
@include font-size(17);
color: $text;
font-weight: 600;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.icon-back {
vertical-align: middle;
cursor: pointer;
margin-right: 12px;
}
.toolbar-go-back {
cursor: pointer;
.back-directory-title {
line-height: 1;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
}
}
.toolbar-position {
text-align: center;
span {
@include font-size(17);
font-weight: 600;
}
}
.toolbar-tools {
text-align: right;
.toolbar-button-wrapper {
margin-left: 75px;
display: inline-block;
vertical-align: middle;
&:first-child {
margin-left: 0 !important;
}
}
button {
margin-left: 20px;
&:first-child {
margin-left: 0;
}
}
}
@media (prefers-color-scheme: dark) {
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
}
</style>