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

make folder icon component

Browse Source
This commit is contained in:
Milos Holba
2021-02-12 20:43:33 +01:00
parent eebeee6948
commit 96e1bdd99f
9 changed files with 232 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"

152
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -8,52 +8,49 @@
<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"/>
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji class="emoji" v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="80" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder && !setFolderEmojiOrColor" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" 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">
@@ -71,61 +68,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'
]),
setFolderEmojiOrColor(){
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 +136,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 +159,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 +181,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 +199,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,25 +219,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('GET_FILEINFO_DETAIL', this.data)
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
events.$emit('fileFullPreview:show')
}
}
}
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
@@ -259,7 +255,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) {
@@ -267,9 +263,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 }])
}
}
},
@@ -279,18 +275,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.$refs[unique_id].focus()
document.execCommand('selectAll')
}
@@ -307,7 +303,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
})
}
}
@@ -481,9 +477,6 @@ export default {
display: flex;
align-items: center;
.emoji {
margin: 0 auto;
}
.file-link {
display: block;
@@ -527,19 +520,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)
}
}
}
@@ -573,11 +560,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 {
@@ -619,15 +612,6 @@ export default {
stroke: #2F3C54;
}
}
.folder-icon {
&.is-deleted {
path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
}
.file-item {

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

@@ -21,43 +21,40 @@
<!--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"/>
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="52" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder && !setFolderEmojiOrColor" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" 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>
@@ -78,59 +75,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' }),
setFolderEmojiOrColor(){
// 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 +120,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 +153,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 +176,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 +194,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,25 +214,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('GET_FILEINFO_DETAIL', this.data)
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
events.$emit('fileFullPreview:show')
}
}
}
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)
}
}
@@ -265,7 +246,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) {
@@ -273,9 +254,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 }])
}
}
},
@@ -284,19 +265,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.$refs[unique_id].focus()
document.execCommand('selectAll')
}
@@ -314,7 +295,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
})
}
}
@@ -476,18 +457,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)
}
}
@@ -585,14 +561,6 @@ export default {
stroke: #2f3c54;
}
}
.folder-icon {
&.is-deleted {
path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
}
.file-item {

66
resources/js/components/FilesView/FolderIcon.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div>
<Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
<FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: `${folderColor}`}"/>
</div>
</template>
<script>
import Emoji from '@/components/Others/Emoji'
export default {
name:"FolderIcon",
props: ['item' , 'folderIcon'],
components: {Emoji},
computed: {
isDeleted() {
return this.item.deleted_at ? true : false
},
folderEmoji(){
// 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
},
folderColor() {
// Return color if is changed from rename popup
if(this.folderIcon)
return this.folderIcon.color ? this.folderIcon.color : '#00BC7E'
// Return color if is already set
return this.item.icon_color ? this.item.icon_color : '#00BC7E'
}
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.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>