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

File item refactoring

Browse Source
This commit is contained in:
Čarodej
2021-10-27 16:48:43 +02:00
parent cd44274690
commit 407f2d2874
12 changed files with 234 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/components/FilesView/FileActionsMobile.vue
View File

@@ -2,12 +2,12 @@
<div class="sticky dark:bg-dark-background bg-white top-12 pb-3 px-4 z-10 whitespace-nowrap overflow-x-auto md:hidden block">
<!--Show Buttons-->
<div v-if="! isSelectMode" class="mobile-actions">
<div v-if="! isMultiSelectMode" class="mobile-actions">
<slot></slot>
</div>
<!-- Multi select mode -->
<div v-if="isSelectMode" class="mobile-actions">
<div v-if="isMultiSelectMode" class="mobile-actions">
<MobileActionButton @click.native="selectAll" icon="check-square">
{{ $t('mobile_selecting.select_all') }}
</MobileActionButton>
@@ -28,6 +28,7 @@
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import UploadProgress from '/resources/js/components/FilesView/UploadProgress'
import {events} from '/resources/js/bus'
import {mapGetters} from "vuex";
export default {
name: 'FileActionsMobile',
@@ -35,11 +36,11 @@
MobileActionButton,
UploadProgress,
},
data() {
return {
isSelectMode: false,
}
},
computed: {
...mapGetters([
'isMultiSelectMode'
])
},
methods: {
selectAll() {
this.$store.commit('ADD_ALL_ITEMS_TO_CLIPBOARD')
@@ -48,14 +49,8 @@
this.$store.commit('CLIPBOARD_CLEAR')
},
disableMultiSelectMode() {
this.isSelectMode = false
events.$emit('mobile-select:stop')
this.$store.commit('TOGGLE_MULTISELECT_MODE')
},
},
mounted() {
events.$on('mobile-select:stop', () => this.isSelectMode = false)
events.$on('mobile-select:start', () => this.isSelectMode = true)
}
}
</script>

12
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -13,7 +13,7 @@
>
<!--Item previews list-->
<div v-if="isList" class="file-list-wrapper">
<div v-if="isList" class="file-list-wrapper md:px-0 px-4">
<transition-group
name="file"
tag="section"
@@ -98,17 +98,10 @@
}
}
},
watch: {
query(val) {
this.$searchFiles(val)
}
},
data() {
return {
draggingId: undefined,
isDragging: false,
isMultiSelect: false,
query: '',
}
},
methods: {
@@ -179,9 +172,6 @@
}
},
created() {
events.$on('mobile-select:start', () => this.isMultiSelect = true)
events.$on('mobile-select:stop', () => this.isMultiSelect = false)
events.$on('drop', () => {
this.isDragging = false

175
resources/js/components/FilesView/FileItemList.vue
View File

@@ -1,83 +1,18 @@
<template>
<div class="file-wrapper" @mouseup.stop="clickFilter" spellcheck="false">
<div
:draggable="canDrag"
@dragstart="$emit('dragstart')"
@drop="drop()"
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && $isMobile(), 'is-dragenter': area }"
>
<!-- MultiSelecting for the mobile version -->
<transition name="slide-from-left">
<CheckBox v-if="mobileMultiSelect" :is-clicked="isClicked" class="check-box"/>
</transition>
<!--Thumbnail for item-->
<div class="icon-item">
<MemberAvatar
v-if="user && canShowAuthor"
:size="28"
:is-border="true"
:member="item.data.relationships.user"
class="absolute -right-2 -bottom-2 z-10"
/>
<!--If is file or image, then link item-->
<span v-if="isFile || isVideo || (isImage && !item.data.attributes.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.data.attributes.mimetype | limitCharacters }}
</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || isVideo || (isImage && !item.data.attributes.thumbnail)" class="file-icon" icon="file" />
<!--Image thumbnail-->
<img loading="lazy" v-if="isImage && item.data.attributes.thumbnail" class="image" :src="item.data.attributes.thumbnail" :alt="item.data.attributes.name" />
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder svg-color-theme" />
</div>
<!--Name-->
<div class="item-name">
<b :ref="item.data.id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
<div class="item-info">
<!--Shared Icon-->
<div v-if="$checkPermission('master') && item.data.relationships.shared" class="item-shared">
<link-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div>
<!--Filesize and timestamp-->
<span v-if="!isFolder" class="item-size">{{ item.data.attributes.filesize }}, {{ timeStamp }}</span>
<!--Folder item counts-->
<span v-if="isFolder" class="item-length"> {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
</div>
</div>
<!--Show item actions-->
<transition name="slide-from-right">
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
<span @mousedown.stop="showItemActions" class="show-actions">
<MoreVerticalIcon size="16" class="icon-action text-theme dark-text-theme" />
</span>
</div>
</transition>
</div>
</div>
<ItemList
:entry="item"
@mouseup.stop.native="clickFilter"
@dragstart.native="$emit('dragstart')"
@drop.native="drop()"
@dragleave.native="dragLeave"
@dragover.prevent.native="dragEnter"
:class="{'border-theme': area }"
/>
</template>
<script>
import {LinkIcon, MoreVerticalIcon} from 'vue-feather-icons'
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
import CheckBox from '/resources/js/components/FilesView/CheckBox'
import MemberAvatar from "./MemberAvatar";
import {events} from '/resources/js/bus'
import {debounce} from 'lodash'
import ItemList from './ItemList'
import {mapGetters} from 'vuex'
export default {
@@ -87,27 +22,15 @@ export default {
'item',
],
components: {
MoreVerticalIcon,
MemberAvatar,
FolderIcon,
CheckBox,
LinkIcon,
ItemList,
},
computed: {
...mapGetters([
'FilePreviewType',
'isMultiSelectMode',
'clipboard',
'entries',
'user',
]),
canShowAuthor() {
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders'])
&& !this.isFolder
&& this.user.data.id !== this.item.data.relationships.user.data.id
},
isClicked() {
return !this.disableHighlight && this.clipboard.some(element => element.data.id === this.item.data.id)
},
isFolder() {
return this.item.data.type === 'folder'
},
@@ -127,36 +50,10 @@ export default {
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
return mimetypes.includes(this.item.data.attributes.mimetype) && this.item.data.type === 'audio'
},
canEditName() {
return !this.$isMobile() && !this.$isThisRoute(this.$route, ['Trash']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
},
canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
},
timeStamp() {
return this.item.data.attributes.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.item.data.attributes.deleted_at}) : this.item.data.attributes.created_at
},
folderItems() {
return this.item.data.attributes.deleted_at ? this.item.data.attributes.trashed_items : this.item.data.attributes.items
},
isDeleted() {
return this.item.data.attributes.deleted_at
}
},
filters: {
limitCharacters(str) {
if (str.length > 3) {
return str.substring(0, 3) + '...'
} else {
return str.substring(0, 3)
}
}
},
data() {
return {
area: false,
itemName: undefined,
mobileMultiSelect: false,
delay: 220,
clicks: 0,
@@ -186,13 +83,6 @@ export default {
this.area = false
events.$emit('drop')
},
showItemActions() {
this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
events.$emit('mobile-menu:show', 'file-menu')
events.$emit('mobile-context-menu:show', this.item)
},
dragEnter() {
if (this.item.data.type !== 'folder') return
@@ -250,7 +140,7 @@ export default {
}
}
if (!this.mobileMultiSelect && this.$isMobile()) {
if (!this.isMultiSelectMode && this.$isMobile()) {
if (this.isFolder) {
this.$goToFileView(this.item.data.id)
@@ -266,7 +156,7 @@ export default {
}
}
if (this.mobileMultiSelect && this.$isMobile()) {
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)
} else {
@@ -286,43 +176,6 @@ export default {
this.$goToFileView(this.item.data.id)
}
},
renameItem: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
id: this.item.data.id,
type: this.item.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
this.itemName = this.item.data.attributes.name
events.$on('newFolder:focus', (id) => {
if (this.item.data.id === id && !this.$isMobile()) {
this.$refs[id].focus()
document.execCommand('selectAll')
}
})
events.$on('mobile-select:start', () => {
this.mobileMultiSelect = true
this.$store.commit('CLIPBOARD_CLEAR')
})
events.$on('mobile-select:stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLIPBOARD_CLEAR')
})
// Change item name
events.$on('change:name', item => {
if (this.item.data.id === item.id) this.itemName = item.name
})
}
}
</script>

185
resources/js/components/FilesView/ItemList.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div :class="{'bg-light-background': isClicked}" class="flex items-center px-2.5 py-2 rounded-lg select-none border-2 border-transparent border-dashed" :draggable="canDrag" spellcheck="false">
<!--MultiSelecting for the mobile version-->
<CheckBox v-if="isMultiSelectMode" :is-clicked="isClicked" class="mr-5"/>
<!--Item thumbnail-->
<div class="w-16 relative">
<!--Member thumbnail for team folders-->
<MemberAvatar
v-if="user && canShowAuthor"
:size="28"
:is-border="true"
:member="entry.data.relationships.user"
class="absolute right-1.5 -bottom-2 z-10"
/>
<!--Folder Icon-->
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
<!--File Icon-->
<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="flex items-center justify-center">
<span class="text-theme dark-text-theme text-xs font-semibold absolute z-10 inline-block mx-auto mt-2 w-7 overflow-ellipsis overflow-hidden text-center">
{{ entry.data.attributes.mimetype }}
</span>
<svg width="38px" height="51px" viewBox="0 0 38 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M22.1666667,13.546875 L22.1666667,3 C22.1666667,1.34314575 20.8235209,-3.04359188e-16 19.1666667,0 L2.375,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,18.9375 C38,17.2806458 36.6568542,15.9375 35,15.9375 L24.5416667,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L28.3333333,12.75 C26.6764791,12.75 25.3333333,11.4068542 25.3333333,9.75 L25.3333333,0 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z" id="file" fill="#F8F9FA" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<!--Image thumbnail-->
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />
</div>
<!--Item Info-->
<div class="pl-2">
<!--Item Title-->
<b class="block text-sm mb-0.5 hover:underline" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
{{ itemName }}
</b>
<!--Item sub line-->
<div class="flex items-center">
<!--Shared Icon-->
<div v-if="$checkPermission('master') && entry.data.relationships.shared">
<link-icon size="12" class="mr-1.5 stroke-current text-theme dark-text-theme"/>
</div>
<!--File & Image sub line-->
<small v-if="! isFolder" class="block text-xs text-gray-500">
{{ entry.data.attributes.filesize }}, {{ timeStamp }}
</small>
<!--Folder sub line-->
<small v-if="isFolder" class="block text-xs text-gray-500">
{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
</small>
</div>
</div>
<!-- Mobile item action button-->
<div v-if="! isMultiSelectMode" class="block pr-1 flex-grow text-right md:hidden">
<MoreVerticalIcon @mousedown.stop="showItemActions" size="16" class="text-theme dark-text-theme inline-block transform scale-110" />
</div>
</div>
</template>
<script>
import {LinkIcon, MoreVerticalIcon} from 'vue-feather-icons'
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
import MemberAvatar from "./MemberAvatar";
import CheckBox from "./CheckBox";
import {debounce} from "lodash";
import {mapGetters} from "vuex";
import {events} from "../../bus";
export default {
name: 'ItemList',
components: {
MoreVerticalIcon,
MemberAvatar,
FolderIcon,
CheckBox,
LinkIcon,
},
props: [
'entry',
],
data() {
return {
mobileMultiSelect: false,
itemName: undefined,
}
},
computed: {
...mapGetters([
'isMultiSelectMode',
'clipboard',
'user',
]),
isClicked() {
return this.clipboard.some(element => element.data.id === this.entry.data.id)
},
isVideo() {
return this.entry.data.type === 'video'
},
isFile() {
return this.entry.data.type === 'file'
},
isImage() {
return this.entry.data.type === 'image'
},
isFolder() {
return this.entry.data.type === 'folder'
},
timeStamp() {
return this.entry.data.attributes.deleted_at
? this.$t('entry_thumbnail.deleted_at', {time: this.entry.data.attributes.deleted_at})
: this.entry.data.attributes.created_at
},
canEditName() {
return !this.$isMobile()
&& !this.$isThisRoute(this.$route, ['Trash'])
&& !this.$checkPermission('visitor')
&& !(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
},
folderItems() {
return this.entry.data.attributes.deleted_at
? this.entry.data.attributes.trashed_items
: this.entry.data.attributes.items
},
canShowAuthor() {
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders'])
&& !this.isFolder
&& this.user.data.id !== this.entry.data.relationships.user.data.id
},
canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
},
},
methods: {
showItemActions() {
this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entry)
events.$emit('mobile-menu:show', 'file-menu')
events.$emit('mobile-context-menu:show', this.entry)
},
renameItem: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
id: this.entry.data.id,
type: this.entry.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
// Set item name to own component variable
this.itemName = this.entry.data.attributes.name
// Change item name
events.$on('change:name', item => {
if (this.item.data.id === item.id) this.itemName = item.name
})
// Autofocus after newly created folder
events.$on('newFolder:focus', id => {
if ( !this.$isMobile() && this.entry.data.id === id) {
this.$refs.name.focus()
document.execCommand('selectAll')
}
})
}
}
</script>

16
resources/js/components/FilesView/MobileMultiSelectToolbar.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="context-menu">
<div v-if="mobileMultiSelect" class="multiselect-actions">
<div v-if="isMultiSelectMode" class="multiselect-actions">
<slot v-if="$slots.default" />
<slot v-if="$slots.editor && $checkPermission('editor')" name="editor" />
<slot v-if="$slots.visitor && $checkPermission('visitor')" name="visitor" />
@@ -22,22 +22,14 @@ export default {
},
computed: {
...mapGetters([
'clipboard'
'isMultiSelectMode',
'clipboard',
]),
},
data() {
return {
mobileMultiSelect: false
}
},
methods: {
closeSelecting() {
events.$emit('mobile-select:stop')
this.$store.commit('TOGGLE_MULTISELECT_MODE')
},
},
created() {
events.$on('mobile-select:start', () => this.mobileMultiSelect = true)
events.$on('mobile-select:stop', () => this.mobileMultiSelect = false)
}
}
</script>

2
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -48,7 +48,7 @@
methods: {
showMobileNavigation() {
events.$emit('mobile-menu:show', 'user-navigation')
events.$emit('mobile-select:stop')
this.$store.commit('DISABLE_MULTISELECT_MODE')
},
goBack() {
if (this.isLoadedFolder) this.$router.back()

2
resources/js/components/Others/MoveItemPopup.vue
View File

@@ -104,7 +104,7 @@
// If is mobile, close the selecting mod after done the move action
if (this.$isMobile())
events.$emit('mobile-select:stop')
this.$store.commit('DISABLE_MULTISELECT_MODE')
},
},
mounted() {

2
resources/js/helpers/functionHelpers.js vendored
View File

@@ -386,7 +386,7 @@ const FunctionHelpers = {
}
Vue.prototype.$enableMultiSelectMode = function () {
events.$emit('mobile-select:start')
this.$store.commit('TOGGLE_MULTISELECT_MODE')
}
Vue.prototype.$showViewOptions = function () {

10
resources/js/store/modules/fileBrowser.js vendored
View File

@@ -8,6 +8,7 @@ const defaultState = {
currentFolder: undefined,
fastPreview: undefined,
navigation: undefined,
isMultiSelectMode: false,
isLoading: true,
clipboard: [],
entries: [],
@@ -194,9 +195,18 @@ const mutations = {
FAST_PREVIEW_CLEAR(state) {
state.fastPreview = undefined
},
TOGGLE_MULTISELECT_MODE(state) {
state.clipboard = []
state.isMultiSelectMode = ! state.isMultiSelectMode
},
DISABLE_MULTISELECT_MODE(state) {
state.clipboard = []
state.isMultiSelectMode = false
},
}
const getters = {
isMultiSelectMode: state => state.isMultiSelectMode,
currentFolder: state => state.currentFolder,
fastPreview: state => state.fastPreview,
navigation: state => state.navigation,

2
resources/views/vuefilemanager/others/color-template.blade.php
View File

@@ -91,7 +91,7 @@
{{-- Dragged borders --}}
.file-item.is-dragenter {border-color: {{ $color }} !important;}
.border-theme {border-color: {{ $color }} !important;}
.folder-item.is-dragenter {border-color: {{ $color }} !important;}
.favourites.is-dragenter .menu-list {border-color: {{ $color }} !important;}