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

add tweomji transfer for single emojis

Browse Source
This commit is contained in:
Milos Holba
2021-02-01 19:43:30 +01:00
parent 9c147165e1
commit ba5e05f77a
6 changed files with 191 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@
<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 class="emoji-wrapper" v-html="folderIconHandle" v-if="isFolder && folderIconHandle"/>
</div>
<!--Name-->
@@ -98,7 +98,7 @@ export default {
// If folder have set some emoji
if(this.data.icon_emoji)
return JSON.parse(this.data.icon_emoji).char
return this.$transferSingleTwemoji(this.data.icon_emoji, true)
},
...mapGetters({ allData: 'data' }),
@@ -478,9 +478,12 @@ export default {
display: flex;
align-items: center;
.emoji {
@include font-size(55);
margin:auto;
.emoji-wrapper {
width: 80px;
height: 80px;
display: flex;
margin: 0 auto;
align-items: center;
}
.file-link {

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

@@ -30,7 +30,7 @@
<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-wrapper" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
<div class="emoji-wrapper" v-html="folderIconHandle" v-if="isFolder && folderIconHandle"/>
</div>
@@ -100,7 +100,7 @@ export default {
// If folder have set some emoji
if(this.data.icon_emoji)
return JSON.parse(this.data.icon_emoji).char
return this.$transferSingleTwemoji(this.data.icon_emoji, true)
},
isClicked() {
@@ -283,8 +283,6 @@ export default {
}, 300)
},
created() {
this.$emojisCustomize()
this.itemName = this.data.name
@@ -318,12 +316,6 @@ export default {
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
img.emoji {
height: 20px;
width: 20px;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
.slide-from-left-move {
transition: transform 300s ease;
@@ -477,10 +469,6 @@ img.emoji {
line-height: 0;
margin-right: 20px;
.emoji-wrapper {
padding: 5px;
}
.folder-icon {
@include font-size(52);

22
resources/js/components/Others/SetFolderIcon.vue
View File

@@ -9,7 +9,7 @@
<div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
<div class="select-input" v-if="selectedEmoji">
<div class="emoji-preview">{{selectedEmoji.char}}</div>
<div class="emoji-preview" v-html="setEmoji"></div>
<span>{{selectedEmoji.name}}</span>
</div>
@@ -70,6 +70,9 @@
SmileIcon,
},
computed: {
setEmoji(){
return this.$transferSingleTwemoji(this.selectedEmoji.char, false)
},
allEmoji() {
let emojisList = this.emojis
@@ -77,7 +80,6 @@
emojisList = this.emojis.filter(emoji => emoji.name.includes(this.searchEmoji))
}
this.$emojisCustomize('emoji-list')
return emojisList ? emojisList : "Not Found"
},
@@ -98,24 +100,24 @@
openMenu() {
this.selectOpen = ! this.selectOpen
this.$emojisCustomize('emoji-list')
this.$transferListTwemoji('emoji-list')
},
setIcon(value) {
if(value.emoji)
if(value.emoji){
this.selectedEmoji = value.emoji
this.selectedColor = undefined
}
if(value.color)
if(value.color) {
this.selectedColor = value.color
this.selectedEmoji = undefined
}
events.$emit('setFolderIcon', {'value':value, 'unique_id':this.unique_id})
this.selectOpen = false
this.$emojisCustomize()
}
},
},
mounted () {
this.selectOpen = false

13
resources/js/components/Others/ThumbnailItem.vue
View File

@@ -16,7 +16,7 @@
<!--Else show only folder icon-->
<FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/>
<div v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
<div v-if="isFolder && folderIconHandle" v-html="folderIconHandle" class="folder-emoji"></div>
</div>
<!--Name-->
@@ -52,13 +52,11 @@
folderIconHandle(){
this.$emojisCustomize()
// Set icon folder if set folder from rename popup
if(this.setFolderIcon){
return this.setFolderIcon.emoji
? this.setFolderIcon.emoji.char
? this.$transferSingleTwemoji(this.setFolderIcon.emoji.char, false)
: this.$nextTick(() => {
this.$refs.folderIcon.firstElementChild.style.fill = `${this.setFolderIcon.color}`
})
@@ -68,7 +66,7 @@
if(!this.setFolderIcon && (this.item.icon_emoji || this.item.icon_color)){
return this.item.icon_emoji
? JSON.parse(this.item.icon_emoji).char
? this.$transferSingleTwemoji(this.item.icon_emoji, true)
: this.$nextTick(() => {
this.$refs.folderIcon.firstElementChild.style.fill = `${this.item.icon_color}`
})
@@ -130,11 +128,14 @@
.icon-item {
position: relative;
min-width: 52px;
display: flex;
text-align: center;
justify-content: center;
line-height: 0;
.folder-emoji {
@include font-size(32)
width: 36px;
height: 36px;
}
.file-icon {

18
resources/js/helpers.js vendored
View File

@@ -353,19 +353,31 @@ const Helpers = {
body.classList.add('windows')
}
},
Vue.prototype.$emojisCustomize = function (elementId) {
Vue.prototype.$transferListTwemoji = function (elementId) {
// Transfer whole DOOM or set element to twemoji
this.$nextTick(() => {
let list = elementId ? document.getElementById(elementId) : document.body
twemoji.parse(list, {
folder: 'svg',
ext: '.svg',
attributes: () => ({
loading: 'lazy'
loading: 'lazy',
})
})
})
},
Vue.prototype.$transferSingleTwemoji = function (emoji, jsonParse) {
// Transfer single emoji to twemoji
return twemoji.parse( !jsonParse ? emoji : JSON.parse(emoji).char , {
folder: 'svg',
ext: '.svg',
attributes: () => ({
loading: 'lazy',
})
})
}
}
}