mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 01:12:14 +00:00
Merge remote-tracking branch 'origin/version-v1.8.1'
# Conflicts: # resources/js/components/FilesView/FileItemGrid.vue # resources/js/components/FilesView/FileItemList.vue # resources/js/components/Others/ThumbnailItem.vue
This commit is contained in:
Peter Papp
@@ -34,7 +34,7 @@
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.stop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
:item="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
@@ -55,7 +55,7 @@
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
:item="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
|
||||
@@ -8,52 +8,48 @@
|
||||
<div class="icon-item">
|
||||
|
||||
<!-- MultiSelecting for the mobile version -->
|
||||
<div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="multiSelectMode">
|
||||
<div :class="{'check-select-folder' : this.item.type === 'folder', 'check-select' : this.item.type !== 'folder'}" v-if="multiSelectMode">
|
||||
<div class="select-box" :class="{'select-box-active' : isClicked } ">
|
||||
<CheckIcon v-if="isClicked" class="icon" size="17"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
|
||||
{{ data.mimetype }}
|
||||
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
|
||||
{{ item.mimetype }}
|
||||
</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
|
||||
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
|
||||
|
||||
<!-- If folder have set emoji -->
|
||||
<Emoji class="emoji" v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="80" />
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
|
||||
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder"/>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<b :ref="this.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
|
||||
<b :ref="this.item.unique_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') && data.shared" class="item-shared">
|
||||
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
</div>
|
||||
|
||||
<!--Participant owner Icon-->
|
||||
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
|
||||
<div v-if="$checkPermission('master') && item.user_scope !== 'master'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Filesize-->
|
||||
<span v-if="! isFolder" class="item-size">{{ data.filesize }}</span>
|
||||
<span v-if="! isFolder" class="item-size">{{ item.filesize }}</span>
|
||||
|
||||
<!--Folder item counts-->
|
||||
<span v-if="isFolder" class="item-length">
|
||||
@@ -62,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || multiSelectMode ) && canShowMobileOptions">
|
||||
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! multiSelectMode && canShowMobileOptions">
|
||||
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
@@ -71,61 +67,60 @@
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
import FolderIcon from '@/components/FilesView/FolderIcon'
|
||||
import { debounce } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItemGrid',
|
||||
props: ['data'],
|
||||
props: ['item'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
CheckIcon,
|
||||
LinkIcon,
|
||||
Emoji
|
||||
FolderIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType', 'sharedDetail', 'fileInfoDetail'
|
||||
'FilePreviewType', 'sharedDetail', 'fileInfoDetail', 'data'
|
||||
]),
|
||||
folderIconHandle(){
|
||||
folderEmojiOrColor(){
|
||||
|
||||
// If folder have set some color
|
||||
if(this.data.icon_color) {
|
||||
if(this.item.icon_color) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.icon_color}`
|
||||
this.$refs[`folder${this.item.unique_id}`].firstElementChild.style.fill = `${this.item.icon_color}`
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
// If folder have set some emoji
|
||||
if(this.data.icon_emoji)
|
||||
return this.data.icon_emoji
|
||||
if(this.item.icon_emoji)
|
||||
return this.item.icon_emoji
|
||||
|
||||
},
|
||||
...mapGetters({ allData: 'data' }),
|
||||
isClicked() {
|
||||
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
|
||||
return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
|
||||
},
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
return this.item.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
return this.item.type !== 'folder' && this.item.type !== 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
return this.item.mimetype === 'pdf'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
return this.item.type === 'image'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
return this.item.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
|
||||
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
|
||||
return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile()
|
||||
@@ -140,13 +135,13 @@ export default {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
|
||||
return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', this.item.deleted_at) : this.item.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
return this.item.deleted_at ? this.item.trashed_items : this.item.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
return this.item.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -163,12 +158,12 @@ export default {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
if (this.item.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
@@ -185,15 +180,15 @@ export default {
|
||||
|
||||
if (e.ctrlKey || e.metaKey && !e.shiftKey) {
|
||||
// Click + Ctrl
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
} else if (e.shiftKey) {
|
||||
// Click + Shift
|
||||
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.allData.indexOf(this.data)
|
||||
let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.data.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
@@ -203,18 +198,18 @@ export default {
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
for (let i = lastItem; i <= clickedItem; i++) {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
|
||||
}
|
||||
//Shift selecting from bottom to top
|
||||
} else {
|
||||
for (let i = lastItem; i >= clickedItem; i--) {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Click
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -223,29 +218,25 @@ export default {
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
// Go to folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
|
||||
if (this.$isMobile()) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
events.$emit('fileFullPreview:show')
|
||||
}else {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.multiSelectMode && this.$isMobile()) {
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
}
|
||||
// Get target classname
|
||||
@@ -263,7 +254,7 @@ export default {
|
||||
events.$emit('fileFullPreview:show')
|
||||
|
||||
} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
|
||||
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
|
||||
} else if (this.isFolder) {
|
||||
|
||||
@@ -271,9 +262,9 @@ export default {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -283,18 +274,18 @@ export default {
|
||||
if (e.target.innerText.trim() === '') return
|
||||
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
unique_id: this.item.unique_id,
|
||||
type: this.item.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.itemName = this.data.name
|
||||
this.itemName = this.item.name
|
||||
|
||||
events.$on('newFolder:focus', (unique_id) => {
|
||||
|
||||
if(this.data.unique_id == unique_id) {
|
||||
if(this.item.unique_id == unique_id && !this.$isMobile()) {
|
||||
this.$refs[unique_id].focus()
|
||||
document.execCommand('selectAll')
|
||||
}
|
||||
@@ -311,7 +302,7 @@ export default {
|
||||
})
|
||||
// Change item name
|
||||
events.$on('change:name', (item) => {
|
||||
if (this.data.unique_id == item.unique_id) this.itemName = item.name
|
||||
if (this.item.unique_id == item.unique_id) this.itemName = item.name
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -485,9 +476,6 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.emoji {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
display: block;
|
||||
@@ -531,19 +519,13 @@ export default {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
align-items: flex-end;
|
||||
@include font-size(80);
|
||||
margin: 0 auto;
|
||||
.folder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: auto;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(80)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -577,11 +559,17 @@ export default {
|
||||
.file-icon-text {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(75);
|
||||
.folder {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(75)
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
@@ -623,15 +611,6 @@ export default {
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
|
||||
@@ -21,43 +21,39 @@
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
|
||||
{{ data.mimetype | limitCharacters }}
|
||||
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
|
||||
{{ item.mimetype | limitCharacters }}
|
||||
</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
|
||||
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
|
||||
|
||||
<!-- If folder have set emoji -->
|
||||
<Emoji v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="52" />
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
|
||||
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<b :ref="this.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
|
||||
<b :ref="this.item.unique_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') && data.shared" class="item-shared">
|
||||
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
</div>
|
||||
|
||||
<!--Participant owner Icon-->
|
||||
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
|
||||
<div v-if="$checkPermission('master') && item.user_scope !== 'master'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Filesize and timestamp-->
|
||||
<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
|
||||
<span v-if="!isFolder" class="item-size">{{ item.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>
|
||||
@@ -66,7 +62,7 @@
|
||||
|
||||
<!--Show item actions-->
|
||||
<transition name="slide-from-right">
|
||||
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)">
|
||||
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
|
||||
<span @click.stop="showItemActions" class="show-actions">
|
||||
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
@@ -78,59 +74,43 @@
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
import FolderIcon from '@/components/FilesView/FolderIcon'
|
||||
import { debounce } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItemList',
|
||||
props: ['data'],
|
||||
props: ['item'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
FolderIcon,
|
||||
CheckIcon,
|
||||
Emoji
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType', 'fileInfoDetail']),
|
||||
...mapGetters({ allData: 'data' }),
|
||||
folderIconHandle(){
|
||||
|
||||
// If folder have set some icon color
|
||||
if(this.data.icon_color) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.icon_color}`
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
// If folder have set some emoji
|
||||
if(this.data.icon_emoji)
|
||||
return this.data.icon_emoji
|
||||
|
||||
},
|
||||
...mapGetters(['FilePreviewType', 'fileInfoDetail', 'data']),
|
||||
isClicked() {
|
||||
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
|
||||
return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
|
||||
},
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
return this.item.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
return this.item.type !== 'folder' && this.item.type !== 'image'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
return this.item.type === 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
return this.item.mimetype === 'pdf'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
return this.item.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
|
||||
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
|
||||
return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
|
||||
@@ -139,13 +119,13 @@ export default {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
|
||||
return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.item.deleted_at }) : this.item.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
return this.item.deleted_at ? this.item.trashed_items : this.item.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
return this.item.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
@@ -172,12 +152,12 @@ export default {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
if (this.item.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
@@ -195,15 +175,15 @@ export default {
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
// Click + Ctrl
|
||||
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
} else if (e.shiftKey) {
|
||||
// Click + Shift
|
||||
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.allData.indexOf(this.data)
|
||||
let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.data.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
@@ -213,18 +193,18 @@ export default {
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
for (let i = lastItem; i <= clickedItem; i++) {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
|
||||
}
|
||||
//Shift selecting from bottom to top
|
||||
} else {
|
||||
for (let i = lastItem; i >= clickedItem; i--) {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Click
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -233,29 +213,25 @@ export default {
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
// Go to folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
|
||||
if (this.$isMobile()) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
events.$emit('fileFullPreview:show')
|
||||
} else {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.mobileMultiSelect && this.$isMobile()) {
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -269,7 +245,7 @@ export default {
|
||||
events.$emit('fileFullPreview:show')
|
||||
|
||||
} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
|
||||
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
|
||||
} else if (this.isFolder) {
|
||||
|
||||
@@ -277,9 +253,9 @@ export default {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -288,19 +264,19 @@ export default {
|
||||
if (e.target.innerText.trim() === '') return
|
||||
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
unique_id: this.item.unique_id,
|
||||
type: this.item.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
|
||||
this.itemName = this.data.name
|
||||
this.itemName = this.item.name
|
||||
|
||||
events.$on('newFolder:focus', (unique_id) => {
|
||||
|
||||
if(this.data.unique_id == unique_id) {
|
||||
if(this.item.unique_id == unique_id && !this.$isMobile()) {
|
||||
this.$refs[unique_id].focus()
|
||||
document.execCommand('selectAll')
|
||||
}
|
||||
@@ -318,7 +294,7 @@ export default {
|
||||
|
||||
// Change item name
|
||||
events.$on('change:name', (item) => {
|
||||
if (this.data.unique_id == item.unique_id) this.itemName = item.name
|
||||
if (this.item.unique_id == item.unique_id) this.itemName = item.name
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -480,18 +456,13 @@ export default {
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(52)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -589,14 +560,6 @@ export default {
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
|
||||
116
resources/js/components/FilesView/FolderIcon.vue
Normal file
116
resources/js/components/FilesView/FolderIcon.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div :class="[{'is-apple': $isApple()}, location]">
|
||||
<Emoji
|
||||
v-if="emoji"
|
||||
:emoji="emoji"
|
||||
class="emoji-icon"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
v-if="!emoji"
|
||||
:class="[{ 'is-deleted': isDeleted },{'default-color' : ! color && ! isDeleted}, 'folder-icon' ]"
|
||||
:style="{fill: color}"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
|
||||
export default {
|
||||
name: 'FolderIcon',
|
||||
props: [
|
||||
'item',
|
||||
'folderIcon',
|
||||
'location'
|
||||
],
|
||||
components: {
|
||||
Emoji
|
||||
},
|
||||
computed: {
|
||||
isDeleted() {
|
||||
return this.item.deleted_at ? true : false
|
||||
},
|
||||
emoji() {
|
||||
// Return emoji if is changed from rename popup
|
||||
if (this.folderIcon)
|
||||
return this.folderIcon.emoji ? this.folderIcon.emoji : false
|
||||
|
||||
// Return emoji if is already set
|
||||
return this.item.icon_emoji ? this.item.icon_emoji : false
|
||||
},
|
||||
color() {
|
||||
// Return color if is changed from rename popup
|
||||
if (this.folderIcon)
|
||||
return this.folderIcon.color ? this.folderIcon.color : false
|
||||
|
||||
// Return color if is already set
|
||||
return this.item.icon_color ? this.item.icon_color : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
// Locations
|
||||
.file-item-list {
|
||||
&.is-apple .emoji-icon {
|
||||
font-size: 50px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item-grid {
|
||||
&.is-apple .emoji-icon {
|
||||
font-size: 80px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-item {
|
||||
&.is-apple .emoji-icon {
|
||||
font-size: 36px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-preview {
|
||||
&.is-apple .emoji-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.default-color {
|
||||
path {
|
||||
fill: $theme !important;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
|
||||
path {
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.folder-icon {
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -29,8 +29,8 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group" v-if="!isFolder">
|
||||
<li class="menu-option" @click="downloadItem">
|
||||
<ul class="menu-option-group" >
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
@@ -38,6 +38,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
|
||||
<div class="icon">
|
||||
<paperclip-icon size="17"></paperclip-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.zip_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -98,6 +107,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
|
||||
<div class="icon">
|
||||
<paperclip-icon size="17"></paperclip-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.zip_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -166,6 +184,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
|
||||
<div class="icon">
|
||||
<paperclip-icon size="17"></paperclip-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.zip_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -207,6 +234,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
|
||||
<div class="icon">
|
||||
<paperclip-icon size="17"></paperclip-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.zip_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -221,6 +257,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
|
||||
<div class="icon">
|
||||
<paperclip-icon size="17"></paperclip-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.zip_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -239,6 +284,7 @@ import {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
PaperclipIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
@@ -256,6 +302,7 @@ export default {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
PaperclipIcon,
|
||||
ThumbnailItem,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
@@ -297,6 +344,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadFolder(){
|
||||
this.$store.dispatch( 'downloadFolder' , this.fileInfoDetail[0] )
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user