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

vue components refactoring

Browse Source
This commit is contained in:
Čarodej
2022-04-13 16:19:10 +02:00
parent 6a4bfa8bfe
commit 338f8664b7
251 changed files with 1068 additions and 1943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
resources/js/components/Layout/Toolbars/DesktopSharepageToolbar.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="hidden lg:block">
<div class="flex items-center justify-between py-3">
<NavigationBar />
<div class="flex items-center">
<!--Create button-->
<PopoverWrapper v-if="canEdit">
<ToolbarButton
@click.stop.native="showCreateMenu"
source="cloud-plus"
:action="$t('create_something')"
/>
<PopoverItem name="desktop-create" side="left">
<OptionGroup :title="$t('upload')">
<OptionUpload :title="$t('upload_files')" type="file" />
<OptionUpload :title="$t('upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup :title="$t('create')">
<Option
@click.native="$createFolder"
:title="$t('create_folder')"
icon="folder-plus"
/>
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
<!--Search bar-->
<SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
<!--File Controls-->
<div class="ml-5 flex items-center xl:ml-8">
<!--Action buttons-->
<div v-if="canEdit && !$isMobile()" class="flex items-center">
<ToolbarButton
@click.native="$moveFileOrFolder(clipboard[0])"
:class="{
'is-inactive': !canManipulate,
}"
source="move"
:action="$t('move')"
/>
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard[0])"
:class="{
'is-inactive': !canManipulate,
}"
source="trash"
:action="$t('delete')"
/>
</div>
</div>
<!--View Controls-->
<div class="ml-5 flex items-center xl:ml-8">
<PopoverWrapper>
<ToolbarButton
@click.stop.native="showSortingMenu"
source="preview-sorting"
:action="$t('sorting_view')"
/>
<PopoverItem name="desktop-sorting" side="left">
<FileSortingOptions />
</PopoverItem>
</PopoverWrapper>
<ToolbarButton
@click.native="$store.dispatch('fileInfoToggle')"
:action="$t('info_panel')"
source="info"
/>
</div>
</div>
</div>
<UploadProgress />
</div>
</template>
<script>
import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
import FileSortingOptions from '../../Menus/FileSortingOptions'
import PopoverItem from '../../UI/Popover/PopoverItem'
import UploadProgress from '../../UI/Others/UploadProgress'
import NavigationBar from './NavigationBar'
import ToolbarButton from '../../UI/Buttons/ToolbarButton'
import OptionUpload from '../../Menus/Components/OptionUpload'
import OptionGroup from '../../Menus/Components/OptionGroup'
import SearchBarButton from '../../UI/Buttons/SearchBarButton'
import { events } from '../../../bus'
import { mapGetters } from 'vuex'
import Option from '../../Menus/Components/Option'
export default {
name: 'DesktopSharepageToolbar',
components: {
FileSortingOptions,
SearchBarButton,
UploadProgress,
PopoverWrapper,
NavigationBar,
ToolbarButton,
OptionUpload,
OptionGroup,
PopoverItem,
Option,
},
computed: {
...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard']),
canEdit() {
return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
},
canManipulate() {
return this.clipboard[0]
},
},
methods: {
showCreateMenu() {
events.$emit('popover:open', 'desktop-create')
},
showSortingMenu() {
events.$emit('popover:open', 'desktop-sorting')
},
},
}
</script>