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

add change folder icon to rename item popup

Browse Source
This commit is contained in:
Milos Holba
2021-01-17 10:24:13 +01:00
parent 77b126b85a
commit ce1bad57cd
14 changed files with 37324 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,10 @@
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
<!-- If folder have set emoji -->
<div class="emoji" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
</div>
<!--Name-->
@@ -83,6 +86,21 @@ export default {
...mapGetters([
'FilePreviewType', 'sharedDetail', 'fileInfoDetail'
]),
folderIconHandle(){
// If folder have set some color
if(this.data.folder_icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.folder_icon_color}`
})
return false
}
// If folder have set some emoji
if(this.data.folder_icon_emoji)
return JSON.parse(this.data.folder_icon_emoji).char
},
...mapGetters({ allData: 'data' }),
isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
@@ -456,6 +474,11 @@ export default {
display: flex;
align-items: center;
.emoji {
@include font-size(55);
margin:auto;
}
.file-link {
display: block;
}

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

@@ -27,8 +27,10 @@
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
<!-- <div v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon">&#128034;</div> -->
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
<!-- If folder have set emoji -->
<div class="emoji" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
</div>
@@ -86,6 +88,21 @@ export default {
computed: {
...mapGetters(['FilePreviewType', 'fileInfoDetail']),
...mapGetters({ allData: 'data' }),
folderIconHandle(){
// If folder have set some icon color
if(this.data.folder_icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.folder_icon_color}`
})
return false
}
// If folder have set some emoji
if(this.data.folder_icon_emoji)
return JSON.parse(this.data.folder_icon_emoji).char
},
isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
},
@@ -447,6 +464,10 @@ export default {
line-height: 0;
margin-right: 20px;
.emoji {
@include font-size(35)
}
.folder-icon {
@include font-size(52);