mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
vue components refactoring
This commit is contained in:
Čarodej
60
resources/js/components/EntriesView/EmptyFilePage.vue
Normal file
60
resources/js/components/EntriesView/EmptyFilePage.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center fixed top-20 bottom-0 left-0 right-0 md:px-0 px-4" v-if="isLoading || isEmpty">
|
||||
<!--Show message for user-->
|
||||
<div v-if="!isLoading" class="text-content text-center">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!--Show spinner when loading content-->
|
||||
<div v-else class="fixed top-0 bottom-0 sm:relative">
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Spinner from '../UI/Others/Spinner'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'EmptyFilePage',
|
||||
components: {
|
||||
Spinner,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLoading', 'entries']),
|
||||
isEmpty() {
|
||||
return this.entries && this.entries.length === 0
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
@import '../../../sass/vuefilemanager/mixins';
|
||||
|
||||
.title {
|
||||
@include font-size(20);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(13);
|
||||
color: $text-muted;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
resources/js/components/EntriesView/FileBrowser.vue
Normal file
145
resources/js/components/EntriesView/FileBrowser.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{
|
||||
'opacity-75': isDragging,
|
||||
'grid-view': itemViewType === 'grid' && !isVisibleSidebar,
|
||||
'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar,
|
||||
}"
|
||||
class="px-4 lg:h-full lg:w-full lg:overflow-y-auto lg:px-0"
|
||||
@drop.stop.prevent="uploadDroppedItems($event)"
|
||||
@keydown.delete="deleteItems"
|
||||
@dragover="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent
|
||||
tabindex="-1"
|
||||
@click.self="deselect"
|
||||
>
|
||||
<ItemHandler
|
||||
@click.native="hideContextMenu"
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.stop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:class="draggedItems.includes(item) ? 'opacity-60' : ''"
|
||||
v-for="item in entries"
|
||||
:key="item.data.id"
|
||||
:item="item"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ItemHandler from './ItemHandler'
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FileBrowser',
|
||||
components: {
|
||||
ItemHandler,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard', 'entries', 'config']),
|
||||
draggedItems() {
|
||||
// Set opacity for dragged items
|
||||
if (!this.clipboard.includes(this.draggingId)) {
|
||||
return [this.draggingId]
|
||||
}
|
||||
|
||||
if (this.clipboard.includes(this.draggingId)) {
|
||||
return this.clipboard
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggingId: undefined,
|
||||
isDragging: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteItems() {
|
||||
if ((this.clipboard.length > 0 && this.$checkPermission('master')) || this.$checkPermission('editor')) {
|
||||
this.$store.dispatch('deleteItem')
|
||||
}
|
||||
},
|
||||
uploadDroppedItems(event) {
|
||||
this.$uploadDraggedFiles(event, this.currentFolder.data.id)
|
||||
|
||||
this.isDragging = false
|
||||
},
|
||||
dragEnter() {
|
||||
this.isDragging = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.isDragging = false
|
||||
},
|
||||
dragStart(data) {
|
||||
let img = document.createElement('img')
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
event.dataTransfer.setDragImage(img, 0, 0)
|
||||
|
||||
events.$emit('dragstart', data)
|
||||
|
||||
// Store dragged folder
|
||||
this.draggingId = data
|
||||
|
||||
// TODO: founded issue on firefox
|
||||
},
|
||||
dragFinish(data, event) {
|
||||
if (event.dataTransfer.items.length === 0) {
|
||||
// Prevent to drop on file or image
|
||||
if (data.data.type !== 'folder' || this.draggingId === data) return
|
||||
|
||||
// Prevent move selected folder to folder if in between selected folders
|
||||
if (this.clipboard.find((item) => item === data && this.clipboard.length > 1)) return
|
||||
|
||||
// Move item if is not included in selected items
|
||||
if (!this.clipboard.includes(this.draggingId)) {
|
||||
this.$store.dispatch('moveItem', {
|
||||
to_item: data,
|
||||
item: this.draggingId,
|
||||
})
|
||||
}
|
||||
|
||||
// Move selected items to folder
|
||||
if (this.clipboard.length > 0 && this.clipboard.includes(this.draggingId)) {
|
||||
this.$store.dispatch('moveItem', {
|
||||
to_item: data,
|
||||
item: null,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// Get id from current folder
|
||||
const id = data.data.type !== 'folder' ? this.currentFolder?.data.id : data.data.id
|
||||
|
||||
// Upload external file
|
||||
this.$uploadDraggedFiles(event, id)
|
||||
}
|
||||
|
||||
this.isDragging = false
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('context-menu:show', event, item)
|
||||
},
|
||||
hideContextMenu() {
|
||||
events.$emit('context-menu:hide')
|
||||
},
|
||||
deselect() {
|
||||
// Hide context menu
|
||||
events.$emit('context-menu:hide')
|
||||
|
||||
// Clear clipboard
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('drop', () => {
|
||||
this.isDragging = false
|
||||
|
||||
setTimeout(() => {
|
||||
this.draggingId = undefined
|
||||
}, 10)
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
467
resources/js/components/EntriesView/ItemHandler.vue
Normal file
467
resources/js/components/EntriesView/ItemHandler.vue
Normal file
@@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<div>
|
||||
<ItemList
|
||||
v-if="itemViewType === 'list'"
|
||||
:entry="item"
|
||||
:highlight="true"
|
||||
:mobile-handler="true"
|
||||
@mouseup.stop.native="clickFilter"
|
||||
@dragstart.native="$emit('dragstart')"
|
||||
@drop.native="drop()"
|
||||
@dragleave.native="dragLeave"
|
||||
@dragover.prevent.native="dragEnter"
|
||||
:class="{ 'border-theme': area }"
|
||||
/>
|
||||
|
||||
<ItemGrid
|
||||
v-if="itemViewType === 'grid'"
|
||||
:entry="item"
|
||||
:highlight="true"
|
||||
:mobile-handler="true"
|
||||
:can-hover="true"
|
||||
@mouseup.stop.native="clickFilter"
|
||||
@dragstart.native="$emit('dragstart')"
|
||||
@drop.native="drop()"
|
||||
@dragleave.native="dragLeave"
|
||||
@dragover.prevent.native="dragEnter"
|
||||
:class="{ 'border-theme': area }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '../../bus'
|
||||
import ItemList from '../UI/Entries/ItemList'
|
||||
import ItemGrid from '../UI/Entries/ItemGrid'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ItemHandler',
|
||||
props: ['disableHighlight', 'item'],
|
||||
components: {
|
||||
ItemList,
|
||||
ItemGrid,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isMultiSelectMode', 'itemViewType', 'clipboard', 'entries', 'user']),
|
||||
isFolder() {
|
||||
return this.item.data.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.item.data.type === 'file'
|
||||
},
|
||||
isImage() {
|
||||
return this.item.data.type === 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.item.data.attributes.mimetype === 'pdf'
|
||||
},
|
||||
isVideo() {
|
||||
return this.item.data.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
|
||||
return mimetypes.includes(this.item.data.attributes.mimetype) && this.item.data.type === 'audio'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
area: false,
|
||||
|
||||
delay: 220,
|
||||
clicks: 0,
|
||||
timer: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickFilter(e) {
|
||||
// Handle click for mobile device
|
||||
if (this.$isMobile()) {
|
||||
this.clickedItem(e)
|
||||
}
|
||||
|
||||
// Handle click & double click for desktop
|
||||
if (!this.$isMobile()) {
|
||||
this.clicks++
|
||||
|
||||
if (this.clicks === 1) {
|
||||
let self = this
|
||||
|
||||
this.timer = setTimeout(() => {
|
||||
this.clickedItem(e)
|
||||
self.clicks = 0
|
||||
}, this.delay)
|
||||
} else {
|
||||
clearTimeout(this.timer)
|
||||
|
||||
this.goToItem(e)
|
||||
this.clicks = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
drop() {
|
||||
this.area = false
|
||||
events.$emit('drop')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.item.data.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
clickedItem(e) {
|
||||
// Disabled right click
|
||||
if (e.button === 2) return
|
||||
|
||||
if (!this.$isMobile()) {
|
||||
// After click deselect new folder rename input
|
||||
if (document.getSelection().toString().length) {
|
||||
document.getSelection().removeAllRanges()
|
||||
}
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
// Click + Ctrl
|
||||
if (this.clipboard.some((item) => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item.data.id)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
} else if (e.shiftKey) {
|
||||
// Click + Shift
|
||||
let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1])
|
||||
let clickedItem = this.entries.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
}
|
||||
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
for (let i = lastItem; i <= clickedItem; i++) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
//Shift selecting from bottom to top
|
||||
} else {
|
||||
for (let i = lastItem; i >= clickedItem; i--) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Click
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.isMultiSelectMode && this.$isMobile()) {
|
||||
if (this.isFolder) {
|
||||
this.$goToFileView(this.item.data.id)
|
||||
} else {
|
||||
if (this.isImage || this.isVideo || this.isAudio || this.isPdf) {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
events.$emit('file-preview:show')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isMultiSelectMode && this.$isMobile()) {
|
||||
if (this.clipboard.some((item) => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item.data.id)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage || this.isVideo || this.isAudio || this.isPdf) {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
events.$emit('file-preview:show')
|
||||
} else if (this.isFile || (!this.isFolder && !this.isVideo && !this.isAudio && !this.isImage)) {
|
||||
this.$downloadFile(
|
||||
this.item.data.attributes.file_url,
|
||||
this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype
|
||||
)
|
||||
} else if (this.isFolder) {
|
||||
this.$goToFileView(this.item.data.id)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/variables';
|
||||
@import '../../../sass/vuefilemanager/mixins';
|
||||
|
||||
.slide-from-left-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.slide-from-left-enter-active,
|
||||
.slide-from-right-enter-active,
|
||||
.slide-from-left-leave-active,
|
||||
.slide-from-right-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.slide-from-left-enter,
|
||||
.slide-from-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-from-right-enter,
|
||||
.slide-from-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.check-box {
|
||||
margin-right: 15px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 0 12px 6px;
|
||||
|
||||
.icon-action {
|
||||
margin-top: 9px;
|
||||
@include font-size(14);
|
||||
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(52);
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
|
||||
&.is-dragenter {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&.no-clicked {
|
||||
background: white !important;
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
&.no-clicked {
|
||||
background: $dark_mode_background !important;
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground !important;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
resources/js/components/EntriesView/NavigationSharePanel.vue
Normal file
152
resources/js/components/EntriesView/NavigationSharePanel.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<ContentSidebar
|
||||
v-if="navigationTree && navigationTree.length >= 1 && isVisibleNavigationBars"
|
||||
class="relative lg:!grid"
|
||||
>
|
||||
<!--Full screen button-->
|
||||
<div
|
||||
@click="$store.dispatch('toggleNavigationBars')"
|
||||
class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-20 transition-all duration-200 hover:opacity-70"
|
||||
>
|
||||
<chevrons-left-icon size="18" />
|
||||
</div>
|
||||
|
||||
<div class="mb-auto">
|
||||
<!--Locations-->
|
||||
<ContentGroup :title="$t('base')">
|
||||
<b
|
||||
@click="goHome"
|
||||
class="flex cursor-pointer items-center py-2.5"
|
||||
:class="{ 'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id }"
|
||||
>
|
||||
<home-icon size="17" class="vue-feather icon-active mr-2.5" />
|
||||
<small class="text-active text-xs font-bold">
|
||||
{{ $t('home') }}
|
||||
</small>
|
||||
</b>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup :title="$t('navigator')" can-collapse="true">
|
||||
<TreeMenuNavigator
|
||||
class="folder-tree"
|
||||
:depth="0"
|
||||
:nodes="folder"
|
||||
v-for="folder in navigationTree"
|
||||
:key="folder.id"
|
||||
/>
|
||||
</ContentGroup>
|
||||
</div>
|
||||
|
||||
<ContentGroup class="mt-auto">
|
||||
<router-link
|
||||
v-if="!config.isAuthenticated"
|
||||
:to="{ name: 'SignIn' }"
|
||||
class="group flex cursor-pointer items-center py-2.5"
|
||||
>
|
||||
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
|
||||
<user-icon size="14" class="vue-feather group-hover-text-theme" />
|
||||
</div>
|
||||
<b class="group-hover-text-theme text-xs"> Sign In or Create Account </b>
|
||||
</router-link>
|
||||
<div
|
||||
@click="$store.dispatch('toggleThemeMode')"
|
||||
:title="$t('dark_mode_toggle')"
|
||||
class="group flex cursor-pointer items-center py-2.5"
|
||||
>
|
||||
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
|
||||
<sun-icon v-if="isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
|
||||
<moon-icon v-if="!isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
|
||||
</div>
|
||||
<b class="group-hover-text-theme text-xs"> Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode </b>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
UserIcon,
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
ChevronsLeftIcon,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
Trash2Icon,
|
||||
UploadCloudIcon,
|
||||
UserCheckIcon,
|
||||
UsersIcon,
|
||||
XIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import TreeMenuNavigator from '../UI/Trees/TreeMenuNavigator'
|
||||
import ContentSidebar from '../Sidebar/ContentSidebar'
|
||||
import ContentGroup from '../Sidebar/ContentGroup'
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'NavigationSharePanel',
|
||||
components: {
|
||||
TreeMenuNavigator,
|
||||
ContentSidebar,
|
||||
ContentGroup,
|
||||
UserIcon,
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
UploadCloudIcon,
|
||||
ChevronsLeftIcon,
|
||||
UserCheckIcon,
|
||||
FolderIcon,
|
||||
Trash2Icon,
|
||||
UsersIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sharedDetail',
|
||||
'navigation',
|
||||
'clipboard',
|
||||
'config',
|
||||
'user',
|
||||
'isVisibleNavigationBars',
|
||||
'isDarkMode',
|
||||
]),
|
||||
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
|
||||
},
|
||||
navigationTree() {
|
||||
return this.navigation ? this.navigation[0].folders : undefined
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggedItem: undefined,
|
||||
area: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goHome() {
|
||||
this.$router.replace({
|
||||
name: 'Public',
|
||||
params: {
|
||||
token: this.sharedDetail.data.attributes.token,
|
||||
id: this.sharedDetail.data.attributes.item_id,
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Listen for dragstart folder items
|
||||
events.$on('dragstart', (item) => (this.draggedItem = item))
|
||||
},
|
||||
}
|
||||
</script>
|
||||
252
resources/js/components/EntriesView/PanelNavigationFiles.vue
Normal file
252
resources/js/components/EntriesView/PanelNavigationFiles.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<ContentSidebar v-if="isVisibleNavigationBars" class="relative">
|
||||
<!--Full screen button-->
|
||||
<div
|
||||
@click="$store.dispatch('toggleNavigationBars')"
|
||||
class="absolute top-[11px] right-1 inline-block cursor-pointer p-3 opacity-20 transition-all duration-200 hover:opacity-70"
|
||||
>
|
||||
<chevrons-left-icon size="18" />
|
||||
</div>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup
|
||||
v-for="(menu, i) in nav"
|
||||
:key="i"
|
||||
:title="menu.groupTitle"
|
||||
:slug="menu.groupTitle"
|
||||
:can-collapse="menu.groupCollapsable"
|
||||
>
|
||||
<router-link
|
||||
v-for="(item, i) in menu.groupLinks"
|
||||
:key="i"
|
||||
@click.native="resetData"
|
||||
:to="{ name: item.route }"
|
||||
class="flex items-center py-2.5"
|
||||
>
|
||||
<home-icon v-if="item.icon === 'home'" size="17" class="vue-feather icon-active mr-2.5" />
|
||||
<upload-cloud-icon
|
||||
v-if="item.icon === 'upload-cloud'"
|
||||
size="17"
|
||||
class="vue-feather icon-active mr-2.5"
|
||||
/>
|
||||
<link-icon v-if="item.icon === 'link'" size="17" class="vue-feather icon-active mr-2.5" />
|
||||
<trash2-icon v-if="item.icon === 'trash'" size="17" class="vue-feather icon-active mr-2.5" />
|
||||
<users-icon size="17" v-if="item.icon === 'users'" class="vue-feather icon-active mr-2.5" />
|
||||
<user-check-icon size="17" v-if="item.icon === 'user-check'" class="vue-feather icon-active mr-2.5" />
|
||||
|
||||
<b class="text-active text-xs font-bold">
|
||||
{{ item.title }}
|
||||
</b>
|
||||
</router-link>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup v-if="navigation" :title="$t('navigator')" slug="navigator" :can-collapse="true">
|
||||
<small v-if="tree.length === 0" class="text-xs text-gray-500 dark:text-gray-500">
|
||||
{{ $t("not_any_folder") }}
|
||||
</small>
|
||||
<TreeMenuNavigator :depth="0" :nodes="folder" v-for="folder in tree" :key="folder.id" />
|
||||
</ContentGroup>
|
||||
|
||||
<!--Favourites-->
|
||||
<ContentGroup v-if="user" :title="$t('favourites')" slug="favourites" :can-collapse="true">
|
||||
<div
|
||||
@dragover.prevent="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@drop="dragFinish($event)"
|
||||
:class="{ 'border-theme': area }"
|
||||
class="-ml-5 rounded-lg border-2 border-dashed border-transparent pl-5"
|
||||
>
|
||||
<!--Empty message-->
|
||||
<small v-if="favourites.length === 0" class="text-xs text-gray-500 dark:text-gray-500" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</small>
|
||||
|
||||
<!--Folder item-->
|
||||
<div
|
||||
@click="goToFolder(folder)"
|
||||
v-for="folder in favourites"
|
||||
:key="folder.data.id"
|
||||
class="group flex cursor-pointer items-center justify-between py-2.5"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<folder-icon
|
||||
size="17"
|
||||
class="vue-feather mr-2.5"
|
||||
:class="{
|
||||
'text-theme': $route.params.id === folder.data.id,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="max-w-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold"
|
||||
:class="{
|
||||
'text-theme': $route.params.id === folder.data.id,
|
||||
}"
|
||||
>
|
||||
{{ folder.data.attributes.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div @click.stop="$removeFavourite(folder)" class="-m-2 p-2">
|
||||
<x-icon size="12" class="mr-5 opacity-0 group-hover:opacity-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ChevronsLeftIcon,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
Trash2Icon,
|
||||
UploadCloudIcon,
|
||||
UserCheckIcon,
|
||||
UsersIcon,
|
||||
XIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import TreeMenuNavigator from '../UI/Trees/TreeMenuNavigator'
|
||||
import ContentSidebar from '../Sidebar/ContentSidebar'
|
||||
import ContentGroup from '../Sidebar/ContentGroup'
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'PanelNavigationFiles',
|
||||
components: {
|
||||
TreeMenuNavigator,
|
||||
ContentSidebar,
|
||||
ContentGroup,
|
||||
ChevronsLeftIcon,
|
||||
UploadCloudIcon,
|
||||
UserCheckIcon,
|
||||
FolderIcon,
|
||||
Trash2Icon,
|
||||
UsersIcon,
|
||||
HomeIcon,
|
||||
LinkIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isVisibleNavigationBars', 'navigation', 'clipboard', 'config', 'user']),
|
||||
favourites() {
|
||||
return this.user.data.relationships.favourites.data
|
||||
},
|
||||
storage() {
|
||||
return this.$store.getters.user.data.attributes.storage
|
||||
},
|
||||
tree() {
|
||||
return {
|
||||
RecentUploads: this.navigation[0].folders,
|
||||
MySharedItems: this.navigation[0].folders,
|
||||
Trash: this.navigation[0].folders,
|
||||
Public: this.navigation[0].folders,
|
||||
Files: this.navigation[0].folders,
|
||||
TeamFolders: this.navigation[1].folders,
|
||||
SharedWithMe: this.navigation[2].folders,
|
||||
}[this.$route.name]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggedItem: undefined,
|
||||
area: false,
|
||||
nav: [
|
||||
{
|
||||
groupCollapsable: false,
|
||||
groupTitle: this.$t('sidebar.locations_title'),
|
||||
groupLinks: [
|
||||
{
|
||||
icon: 'home',
|
||||
route: 'Files',
|
||||
title: this.$t('sidebar.home'),
|
||||
},
|
||||
{
|
||||
icon: 'upload-cloud',
|
||||
route: 'RecentUploads',
|
||||
title: this.$t('sidebar.latest'),
|
||||
},
|
||||
{
|
||||
icon: 'link',
|
||||
route: 'MySharedItems',
|
||||
title: this.$t('publicly_shared'),
|
||||
},
|
||||
{
|
||||
icon: 'trash',
|
||||
route: 'Trash',
|
||||
title: this.$t('locations.trash'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupCollapsable: true,
|
||||
groupTitle: this.$t('collaboration'),
|
||||
groupLinks: [
|
||||
{
|
||||
icon: 'users',
|
||||
route: 'TeamFolders',
|
||||
title: this.$t('team_folders'),
|
||||
},
|
||||
{
|
||||
icon: 'user-check',
|
||||
route: 'SharedWithMe',
|
||||
title: this.$t('shared_with_me'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetData() {
|
||||
this.$store.commit('SET_CURRENT_TEAM_FOLDER', null)
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
},
|
||||
goToFolder(folder) {
|
||||
this.$router.push({ name: 'Files', params: { id: folder.data.id } })
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.draggedItem && this.draggedItem.data.type !== 'folder') return
|
||||
|
||||
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.data.type !== 'folder')) return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragFinish() {
|
||||
this.area = false
|
||||
|
||||
events.$emit('drop')
|
||||
|
||||
// Check if dragged item is folder
|
||||
if (this.draggedItem && this.draggedItem.data.type !== 'folder') return
|
||||
|
||||
// Check if folder exist in favourites
|
||||
if (this.favourites.find((folder) => folder.data.id === this.draggedItem.data.id)) return
|
||||
|
||||
// Prevent to move folders to self
|
||||
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.data.type !== 'folder')) return
|
||||
|
||||
// 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))
|
||||
|
||||
this.$store.dispatch('getFolderTree')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user