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

make component for emojis

Browse Source
This commit is contained in:
Milos Holba
2021-02-05 18:13:22 +01:00
parent 4158d4f31e
commit 03ef16d90d
7 changed files with 63 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,17 +25,18 @@
<!--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"/>
<!-- If folder have set emoji -->
<div class="emoji-wrapper" v-html="folderIconHandle" v-if="isFolder && folderIconHandle"/>
</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.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
@@ -70,6 +71,7 @@
<script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import Emoji from '@/components/Others/Emoji'
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
@@ -80,7 +82,8 @@ export default {
components: {
UserPlusIcon,
CheckIcon,
LinkIcon
LinkIcon,
Emoji
},
computed: {
...mapGetters([
@@ -98,7 +101,7 @@ export default {
// If folder have set some emoji
if(this.data.icon_emoji)
return this.$transferSingleTwemoji(this.data.icon_emoji, true)
return this.data.icon_emoji
},
...mapGetters({ allData: 'data' }),
@@ -478,12 +481,8 @@ export default {
display: flex;
align-items: center;
.emoji-wrapper {
width: 80px;
height: 80px;
display: flex;
.emoji {
margin: 0 auto;
align-items: center;
}
.file-link {

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

@@ -26,17 +26,17 @@
<!--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"/>
<!-- If folder have set emoji -->
<div class="emoji-wrapper" v-html="folderIconHandle" v-if="isFolder && folderIconHandle"/>
</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.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
@@ -73,6 +73,7 @@
<script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import Emoji from '@/components/Others/Emoji'
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
@@ -83,7 +84,8 @@ export default {
components: {
UserPlusIcon,
LinkIcon,
CheckIcon
CheckIcon,
Emoji
},
computed: {
...mapGetters(['FilePreviewType', 'fileInfoDetail']),
@@ -100,7 +102,7 @@ export default {
// If folder have set some emoji
if(this.data.icon_emoji)
return this.$transferSingleTwemoji(this.data.icon_emoji, true)
return this.data.icon_emoji
},
isClicked() {

54
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" v-html="setEmoji"></div>
<Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji>
<span>{{selectedEmoji.name}}</span>
</div>
@@ -25,23 +25,27 @@
<input @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
<!-- All Emojis -->
<div v-show="searchInput.length < 1" class="options-list-wrapper">
<ul v-for="(group, name) in allEmoji" :key="name" class="options-list">
<div v-show="searchInput.length < 1" class="group-wrapper">
<div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper">
<label class="group-name-label">{{name}}</label>
<div class="options-wrapper">
<li @click="setIcon({'emoji':emoji})" v-html="transferEmoji(emoji)" class="option" v-for="(emoji,i) in group" :key="i"/>
</div>
</ul>
<ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
<Emoji :emoji="emoji" size="33"/>
</li>
</ul>
</div>
</div>
<!-- Searched emojis -->
<div v-if="searchInput.length > 0" class="options-list-wrapper">
<ul class="options-list">
<div class="options-wrapper">
<li @click="setIcon({'emoji':emoji})" v-html="transferEmoji(emoji)" class="option" v-for="(emoji,i) in filteredEmojis" :key="i"/>
</div>
<div v-if="searchInput.length > 0" class="group-wrapper">
<div class="options-wrapper">
<ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option" >
<Emoji :emoji="emoji" size="33"/>
</li>
</ul>
<span class="not-found" v-if="filteredEmojis.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span>
</ul>
</div>
</div>
</div>
@@ -70,6 +74,7 @@
import {SmileIcon, FolderIcon, ChevronDownIcon } from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
import Emoji from '@/components/Others/Emoji'
import lodash from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
@@ -83,11 +88,12 @@
TabOption,
FolderIcon,
SmileIcon,
Emoji
},
computed: {
...mapGetters(['emojis']),
setEmoji(){
return this.$transferSingleTwemoji(this.selectedEmoji, false)
return this.selectedEmoji, false
},
allEmoji() {
return _.groupBy(this.emojis,'group')
@@ -106,10 +112,6 @@
}
},
methods: {
transferEmoji(emoji){
return this.$transferSingleTwemoji(emoji, false)
},
filterEmojis: _.debounce(function(emoji){
this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
@@ -218,7 +220,7 @@
}
}
.options-list-wrapper {
.group-wrapper {
height: 100%;
display: flex;
flex-direction: column;
@@ -226,7 +228,7 @@
overflow-y: scroll;
padding: 0px;
.options-list {
.options-wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
@@ -235,10 +237,10 @@
margin-bottom: 0px;
}
.options-wrapper {
padding: 0px 20px;
.options-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.group-name-label {
@@ -278,7 +280,7 @@
.select-input-wrapper{
height: 48px;
height: 50px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 8px;
@@ -296,8 +298,6 @@
align-items: center;
.emoji-preview {
width: 25px;
height: 25px;
margin-right: 10px;
}
}
@@ -349,10 +349,10 @@
.emoji-input {
background: $dark_mode_foreground ;
}
.options-list {
.options-wrapper {
.option {
&:hover {
background: $dark_mode_foreground;
background: $dark_mode_foreground !important;
}
}
.not-found {

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

@@ -13,10 +13,12 @@
<!--Image thumbnail-->
<img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="36"/>
<!--Else show only folder icon-->
<FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/>
<div v-if="isFolder && folderIconHandle" v-html="folderIconHandle" class="folder-emoji"></div>
</div>
<!--Name-->
@@ -43,10 +45,12 @@
<script>
import {mapGetters} from 'vuex'
import Emoji from '@/components/Others/Emoji'
export default {
name: 'ThumbnailItem',
props: ['item', 'info', 'setFolderIcon'],
components: {Emoji},
computed: {
...mapGetters(['currentFolder']),
@@ -56,7 +60,7 @@
if(this.setFolderIcon){
return this.setFolderIcon.emoji
? this.$transferSingleTwemoji(this.setFolderIcon.emoji, false)
? this.setFolderIcon.emoji
: this.$nextTick(() => {
this.$refs.folderIcon.firstElementChild.style.fill = `${this.setFolderIcon.color}`
})
@@ -66,7 +70,7 @@
if(!this.setFolderIcon && (this.item.icon_emoji || this.item.icon_color)){
return this.item.icon_emoji
? this.$transferSingleTwemoji(this.item.icon_emoji, true)
? this.item.icon_emoji
: this.$nextTick(() => {
this.$refs.folderIcon.firstElementChild.style.fill = `${this.item.icon_color}`
})
@@ -133,10 +137,6 @@
justify-content: center;
line-height: 0;
.folder-emoji {
width: 36px;
height: 36px;
}
.file-icon {
@include font-size(35);

12
resources/js/helpers.js vendored
View File

@@ -1,6 +1,5 @@
import i18n from '@/i18n/index'
import store from './store/index'
import twemoji from 'twemoji'
import {debounce, includes} from "lodash";
import {events} from './bus'
import axios from 'axios'
@@ -352,17 +351,6 @@ const Helpers = {
let body = document.body
body.classList.add('windows')
}
},
Vue.prototype.$transferSingleTwemoji = function (emoji, jsonParse) {
// Transfer single emoji to twemoji
return twemoji.parse( !jsonParse ? emoji.char : JSON.parse(emoji).char , {
folder: 'svg',
ext: '.svg',
attributes: () => ({
loading: 'lazy',
})
})
}
}
}