add twemoji

This commit is contained in:
Milos Holba
2021-01-26 23:17:09 +01:00
parent 078d920c19
commit 2112fe879b
9 changed files with 129 additions and 35 deletions

View File

@@ -559,7 +559,6 @@ function get_pretty_name($basename, $name, $mimetype)
function get_image_meta_data($file)
{
if (get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
return exif_read_data($file);
return mb_convert_encoding(
exif_read_data($file), 'UTF8', 'UTF8'

View File

@@ -439,7 +439,7 @@ class Editor
$temp_filename = $file->getClientOriginalName();
// File Path
$file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
$file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;
// Generate file
File::append($file_path, $file->get());

50
package-lock.json generated
View File

@@ -10003,6 +10003,53 @@
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
},
"twemoji": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.0.1.tgz",
"integrity": "sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg==",
"requires": {
"fs-extra": "^8.0.1",
"jsonfile": "^5.0.0",
"twemoji-parser": "13.0.0",
"universalify": "^0.1.2"
},
"dependencies": {
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
},
"dependencies": {
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"requires": {
"graceful-fs": "^4.1.6"
}
}
}
},
"jsonfile": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
"integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^0.1.2"
}
}
}
},
"twemoji-parser": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz",
"integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ=="
},
"type-is": {
"version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -10124,8 +10171,7 @@
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"dev": true
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
},
"unpipe": {
"version": "1.0.0",

View File

@@ -23,6 +23,7 @@
"@fortawesome/vue-fontawesome": "^0.1.10",
"lodash": "^4.17.20",
"node-sass": "^4.14.1",
"twemoji": "^13.0.1",
"vee-validate": "^3.3.9",
"vue": "^2.6.11",
"vue-feather-icons": "^5.1.0",

View File

@@ -29,7 +29,7 @@
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
"/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=7429f60059bbb3b76a66",
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=e30bde665233e8108fc2",
"/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
@@ -75,23 +75,24 @@
"/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
"/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
"/js/main.93835132e94cb70cd948.hot-update.js": "/js/main.93835132e94cb70cd948.hot-update.js",
"/js/main.14e2786738b678e42790.hot-update.js": "/js/main.14e2786738b678e42790.hot-update.js",
"/js/main.1e09d5a114b47f78f735.hot-update.js": "/js/main.1e09d5a114b47f78f735.hot-update.js",
"/js/main.4d2831225ff8c15f9574.hot-update.js": "/js/main.4d2831225ff8c15f9574.hot-update.js",
"/js/main.a042e64d43031251bbaa.hot-update.js": "/js/main.a042e64d43031251bbaa.hot-update.js",
"/js/main.a694129c76d54bc01c54.hot-update.js": "/js/main.a694129c76d54bc01c54.hot-update.js",
"/js/main.b4e7813819304123bca8.hot-update.js": "/js/main.b4e7813819304123bca8.hot-update.js",
"/js/main.662b49470346b4b76841.hot-update.js": "/js/main.662b49470346b4b76841.hot-update.js",
"/js/main.c8076428be03059b7e5e.hot-update.js": "/js/main.c8076428be03059b7e5e.hot-update.js",
"/js/main.3c7083753a45cd005131.hot-update.js": "/js/main.3c7083753a45cd005131.hot-update.js",
"/js/main.507f77403a28efa7443a.hot-update.js": "/js/main.507f77403a28efa7443a.hot-update.js",
"/js/main.2fd90b99aa2342fdef5f.hot-update.js": "/js/main.2fd90b99aa2342fdef5f.hot-update.js",
"/js/main.bd0b6550dcc4e063c4b2.hot-update.js": "/js/main.bd0b6550dcc4e063c4b2.hot-update.js",
"/js/main.6be3a1f5d38918f938a0.hot-update.js": "/js/main.6be3a1f5d38918f938a0.hot-update.js",
"/js/main.77ffad300745cf6a660f.hot-update.js": "/js/main.77ffad300745cf6a660f.hot-update.js",
"/js/main.e8e09c42dd190eb3bbcb.hot-update.js": "/js/main.e8e09c42dd190eb3bbcb.hot-update.js",
"/js/main.c91c2d641e78f5b70169.hot-update.js": "/js/main.c91c2d641e78f5b70169.hot-update.js",
"/js/main.47d4d2225326852931a0.hot-update.js": "/js/main.47d4d2225326852931a0.hot-update.js",
"/js/main.69855deb7789f02f9f19.hot-update.js": "/js/main.69855deb7789f02f9f19.hot-update.js"
"/js/main.b906f4dccf00f7d0df9b.hot-update.js": "/js/main.b906f4dccf00f7d0df9b.hot-update.js",
"/js/main.51e6604147d828f6788c.hot-update.js": "/js/main.51e6604147d828f6788c.hot-update.js",
"/js/main.0cdd7ec9d134e07cbbe5.hot-update.js": "/js/main.0cdd7ec9d134e07cbbe5.hot-update.js",
"/js/main.a1bbd60a06d2e7857892.hot-update.js": "/js/main.a1bbd60a06d2e7857892.hot-update.js",
"/js/main.7d7511e400150e72f650.hot-update.js": "/js/main.7d7511e400150e72f650.hot-update.js",
"/js/main.fd48cad164a60b75fe37.hot-update.js": "/js/main.fd48cad164a60b75fe37.hot-update.js",
"/js/main.296e16fc2d46f99aeae1.hot-update.js": "/js/main.296e16fc2d46f99aeae1.hot-update.js",
"/js/main.55e979567c0a590fd839.hot-update.js": "/js/main.55e979567c0a590fd839.hot-update.js",
"/js/main.8f9251f7ae8357e3db2e.hot-update.js": "/js/main.8f9251f7ae8357e3db2e.hot-update.js",
"/js/main.de57ba3a3902452e1149.hot-update.js": "/js/main.de57ba3a3902452e1149.hot-update.js",
"/js/main.c29932dfec3afef8d8fd.hot-update.js": "/js/main.c29932dfec3afef8d8fd.hot-update.js",
"/js/main.49b9f8ec98d8ee8c9c32.hot-update.js": "/js/main.49b9f8ec98d8ee8c9c32.hot-update.js",
"/js/main.c2adbb59071c1ca6d186.hot-update.js": "/js/main.c2adbb59071c1ca6d186.hot-update.js",
"/js/main.ac8d05cce080431208c8.hot-update.js": "/js/main.ac8d05cce080431208c8.hot-update.js",
"/js/main.f75a1a86202d4cdc281c.hot-update.js": "/js/main.f75a1a86202d4cdc281c.hot-update.js",
"/js/main.af5c709a6815af8a4e19.hot-update.js": "/js/main.af5c709a6815af8a4e19.hot-update.js",
"/js/main.7318bbc00df71e76481e.hot-update.js": "/js/main.7318bbc00df71e76481e.hot-update.js",
"/js/main.d5f1dacf73037666202d.hot-update.js": "/js/main.d5f1dacf73037666202d.hot-update.js",
"/js/main.bea7af7eaca85b6fec19.hot-update.js": "/js/main.bea7af7eaca85b6fec19.hot-update.js",
"/js/main.8f087722cc55622e0a99.hot-update.js": "/js/main.8f087722cc55622e0a99.hot-update.js"
}

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" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
<div class="emoji-wrapper" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
</div>
@@ -280,8 +280,13 @@ export default {
}, 300)
},
created() {
this.$emojisCustomize()
this.itemName = this.data.name
events.$on('newFolder:focus', (unique_id) => {
if(this.data.unique_id == unique_id) {
@@ -312,6 +317,13 @@ 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;
}
@@ -464,8 +476,8 @@ export default {
line-height: 0;
margin-right: 20px;
.emoji {
@include font-size(35)
.emoji-wrapper {
padding: 5px;
}
.folder-icon {

View File

@@ -2,14 +2,14 @@
<div class="set-folder-icon">
<TableWrapper >
<TableOption :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<TableOption id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<div class="select-emoji-wrapper">
<label class="main-label">Pick Yout Emoji Icon:</label>
<div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
<div class="select-input" v-if="selectedEmoji">
<span>{{selectedEmoji.char}}</span>
<div class="emoji-preview">{{selectedEmoji.char}}</div>
<span>{{selectedEmoji.name}}</span>
</div>
@@ -76,6 +76,9 @@
if(this.searchEmoji !== undefined) {
emojisList = this.emojis.filter(emoji => emoji.name.includes(this.searchEmoji))
}
this.$emojisCustomize('emoji-list')
return emojisList ? emojisList : "Not Found"
},
},
@@ -87,13 +90,16 @@
selectOpen: false,
emojis: emojis,
colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3']
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3']
}
},
methods: {
openMenu() {
this.selectOpen = ! this.selectOpen
this.$emojisCustomize('emoji-list')
},
setIcon(value) {
if(value.emoji)
@@ -106,6 +112,9 @@
this.selectOpen = false
this.$emojisCustomize()
}
},
mounted () {
@@ -194,9 +203,10 @@
.option {
list-style: none;
padding: 8px;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
@include font-size(30);
&:hover {
background: $light_background;
@@ -234,6 +244,15 @@
.select-input {
@include font-size(16);
font-weight: 700;
display: flex;
flex-direction: row;
align-items: center;
.emoji-preview {
width: 25px;
height: 25px;
margin-right: 10px;
}
}
.not-selected {

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 id="thumbnail-emoji" v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
</div>
<!--Name-->
@@ -54,6 +54,7 @@
folderIconHandle(){
let icon = undefined
this.$emojisCustomize()
// Set icon folder if set folder from rename popup
if(this.setFolderIcon){

View File

@@ -1,5 +1,6 @@
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'
@@ -351,7 +352,21 @@ const Helpers = {
let body = document.body
body.classList.add('windows')
}
}
},
Vue.prototype.$emojisCustomize = function (elementId) {
this.$nextTick(() => {
let list = elementId ? document.getElementById(elementId) : document.body
twemoji.parse(list, {
folder: 'svg',
ext: '.svg',
attributes: () => ({
loading: 'lazy'
})
})
})
}
}
}