mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-18 14:01:12 +00:00
emoji panel changes and package updates.
This commit is contained in:
supertiger
parent
3b351b1e37
commit
feec6518c8
9 changed files with 1663 additions and 1042 deletions
1840
package-lock.json
generated
1840
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,7 +10,6 @@
|
|||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"emojibase-data": "^3.2.1",
|
||||
"emojibase-regex": "^2.0.1",
|
||||
"filesize": "^4.1.2",
|
||||
"futoji": "^0.2.4",
|
||||
"jquery": "^3.3.1",
|
||||
|
|
@ -26,13 +25,12 @@
|
|||
"vue-router": "^3.0.2",
|
||||
"vue-socket.io": "^3.0.4",
|
||||
"vue-socket.io-extended": "^3.2.0",
|
||||
"vue-twemoji": "^1.0.1",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.5",
|
||||
"@vue/cli-plugin-eslint": "^3.0.5",
|
||||
"@vue/cli-service": "^3.0.5",
|
||||
"@vue/cli-service": "^3.5.1",
|
||||
"@vue/eslint-plugin": "^4.2.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.8.0",
|
||||
|
|
|
|||
|
|
@ -1,141 +1,145 @@
|
|||
<template>
|
||||
<div class="dark-background" @click="backgroundClick">
|
||||
<div class="inner">
|
||||
<div class="text">
|
||||
To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.
|
||||
</div>
|
||||
<div class="images">
|
||||
<div class="image GDrive-img"></div>
|
||||
<div class="arrow">></div>
|
||||
<div class="image nertivia-img"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button deny" @click="closeMenu">No thanks</div>
|
||||
<div class="button" @click="link">Link me</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dark-background" @click="backgroundClick">
|
||||
<div class="inner">
|
||||
<div
|
||||
class="text"
|
||||
>To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.</div>
|
||||
<div class="images">
|
||||
<div class="image GDrive-img"></div>
|
||||
<div class="arrow">></div>
|
||||
<div class="image nertivia-img"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button deny" @click="closeMenu">No thanks</div>
|
||||
<div class="button" @click="link">Link me</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {bus} from '@/main'
|
||||
import settingsService from '@/services/settingsService';
|
||||
import { bus } from "@/main";
|
||||
import settingsService from "@/services/settingsService";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.$store.dispatch('setPopoutVisibility', {name: 'GDLinkMenu', visibility: false})
|
||||
},
|
||||
backgroundClick(e) {
|
||||
if (e.target.classList.contains('dark-background')) {
|
||||
this.closeMenu()
|
||||
}
|
||||
},
|
||||
async link() {
|
||||
const {ok, error, result} = await settingsService.GDriveURL();
|
||||
if (ok) {
|
||||
const {url} = result.data;
|
||||
//open a new window
|
||||
const left = (screen.width/2)-(400/2);
|
||||
const top = (screen.height/2)-(500/2);
|
||||
const consentWindow = window.open(url, "",
|
||||
'width=400,height=500,top='+top+', left='+left
|
||||
);
|
||||
window.onmessage = async (e) => {
|
||||
consentWindow.close();
|
||||
if (!e.data.code) return;
|
||||
const url = new URL(e.data.code);
|
||||
const code = url.searchParams.get("code");
|
||||
await settingsService.GDriveAuth(code);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "GDLinkMenu",
|
||||
visibility: false
|
||||
});
|
||||
},
|
||||
backgroundClick(e) {
|
||||
if (e.target.classList.contains("dark-background")) {
|
||||
this.closeMenu();
|
||||
}
|
||||
},
|
||||
async link() {
|
||||
const { ok, error, result } = await settingsService.GDriveURL();
|
||||
if (ok) {
|
||||
const { url } = result.data;
|
||||
//open a new window
|
||||
const left = screen.width / 2 - 400 / 2;
|
||||
const top = screen.height / 2 - 500 / 2;
|
||||
const consentWindow = window.open(
|
||||
url,
|
||||
"",
|
||||
"width=400,height=500,top=" + top + ", left=" + left
|
||||
);
|
||||
window.onmessage = async e => {
|
||||
consentWindow.close();
|
||||
if (!e.data.code) return;
|
||||
const url = new URL(e.data.code);
|
||||
const code = url.searchParams.get("code");
|
||||
await settingsService.GDriveAuth(code);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dark-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.781);
|
||||
z-index: 111111;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.781);
|
||||
z-index: 111111;
|
||||
display: flex;
|
||||
}
|
||||
.inner {
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.text{
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 17px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
user-select: none;
|
||||
.text {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 17px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
.images{
|
||||
display: flex;
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
.images {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
.nertivia-img {
|
||||
background-image: url(./../../assets/logo.png);
|
||||
border-radius: 50%;
|
||||
background-size: calc(100% + 34px);
|
||||
box-shadow: 0px 0px 66px -4px rgba(69,212,255,1);
|
||||
background-image: url(./../../assets/logo.png);
|
||||
border-radius: 50%;
|
||||
background-size: calc(100% + 34px);
|
||||
box-shadow: 0px 0px 66px -4px rgba(69, 212, 255, 1);
|
||||
}
|
||||
.arrow{
|
||||
font-size: 40px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
user-select: none;
|
||||
.arrow {
|
||||
font-size: 40px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
.GDrive-img {
|
||||
background-image: url(./../../assets/Google_Drive_logo.png);
|
||||
background-image: url(./../../assets/Google_Drive_logo.png);
|
||||
}
|
||||
.buttons{
|
||||
margin: auto;
|
||||
display: flex;
|
||||
.buttons {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
}
|
||||
.button{
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
background: rgb(32, 118, 255);
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
background: rgb(32, 118, 255);
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.button:hover {
|
||||
background:rgb(58, 134, 255);
|
||||
background: rgb(58, 134, 255);
|
||||
}
|
||||
.button.deny {
|
||||
background: rgb(255, 32, 32);
|
||||
|
||||
background: rgb(255, 32, 32);
|
||||
}
|
||||
.button.deny:hover {
|
||||
background: rgb(255, 53, 53);
|
||||
background: rgb(255, 53, 53);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="change-log">
|
||||
<span class="news-title">Changes in this release</span>
|
||||
|
||||
<div class="change" v-for="(change, index) in changelog" :key="change.title">
|
||||
<div class="change" v-for="change in changelog" :key="change.title">
|
||||
<div class="heading" :style="change.headColor ? `background-color: ${change.headColor}` : ``">
|
||||
<div class="date">{{change.date}}</div>
|
||||
<div class="changes-title">{{change.title}}</div>
|
||||
|
|
|
|||
|
|
@ -266,6 +266,7 @@ export default {
|
|||
this.showEmojiPopout(event);
|
||||
},
|
||||
enterEmojiSuggestion(){
|
||||
this.$store.dispatch('setLastEmoji', this.emojiArray[this.emojiIndex].shortcodes[0])
|
||||
this.$refs["input-box"].focus();
|
||||
const emojiShortCode = `:${this.emojiArray[this.emojiIndex].shortcodes[0]}:`
|
||||
const cursorPosition = this.$refs['input-box'].selectionStart;
|
||||
|
|
@ -281,6 +282,7 @@ export default {
|
|||
const target = this.$refs["input-box"];
|
||||
target.focus();
|
||||
document.execCommand('insertText', false, `:${shortcode}:`);
|
||||
this.$store.dispatch('setLastEmoji', shortcode)
|
||||
},
|
||||
keyDown(event) {
|
||||
this.resize(event);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,19 @@
|
|||
<div class="emoji-panel" v-click-outside="closePanel">
|
||||
<div class="emoji-panel-inner">
|
||||
<div class="emojis-list">
|
||||
<div class="category">
|
||||
<div class="category-name">Recent</div>
|
||||
<div class="list">
|
||||
<div class="emoji-item" v-for="(recentEmoji, index) in recentEmojiList" :key="index" @click="clickEvent(recentEmoji)">
|
||||
<img
|
||||
class="panel emoji"
|
||||
v-lazyload
|
||||
:data-url="emojiShortcodeToPath(':' + recentEmoji + ':')"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category" v-for="(group, index) in groups" :key="group">
|
||||
<div class="category-name">{{group.split('-')[0]}}</div>
|
||||
<div class="list">
|
||||
|
|
@ -17,8 +30,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab" v-for="(emoji, index) in groupUnicodes" :key="index" @mouseenter="mouseHover(emoji, $event)" >
|
||||
<img class="panel emoji" :src="selectRandom(emoji)" @click="scrollToCategory(index)">
|
||||
<div class="tab" @click="scrollToCategory(0)">
|
||||
<i class="material-icons">history</i>
|
||||
<div class="tooltip">Recent</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
v-for="(emoji, index) in groupUnicodes"
|
||||
:key="index"
|
||||
@mouseenter="mouseHover(emoji, $event)"
|
||||
@click="scrollToCategory(index + 1)"
|
||||
>
|
||||
<img class="panel-emoji" :src="selectRandom(emoji)">
|
||||
<div class="tooltip">{{ groups[index].split('-')[0] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,15 +65,256 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
groupUnicodes: [
|
||||
["😀", "😅", "☺️", "😇", "😉", "😍", "🥰", "😚", "😝", "😏", "😣", "😭", "🥺", "😢", "🤔", "😳", "😡", "🤤", "🤠", "🥳", "😦", "👅", "👀", "🙏", "👍", "👌", "👠"],
|
||||
["🐱", "🐰", "🐷", "🐯", "🐸", "🐦", "🐧", "🐣", "🦋", "🐟", "🐿", "🌳", "🌴", "🌷", "🌹", "🌺", "🌻", "🌙", "🌍", "🌈", "🌦", "❄️", "💦", "☃️", "🔥", "💫", "☔️"],
|
||||
["🍎", "🍌", "🍉", "🍇", "🍑", "🍒", "🍆", "🍕", "🍟", "🥞", "🍰", "🍪", "🍿", "🍩", "🥤", "🧁", "🍨", "🍭", "🥂", "🍹", "🍝", "🌮"],
|
||||
["🏀", "🏈", "⚽️","🥏", "🎱", "🏓", "🏹", "🏆", "🥇", "🎨", "🎧", "🎹", "🎸", "🎮", "🎯", "🎳", "🏂"],
|
||||
["🚗", "🚕", "🚑", "🚒", "🛵", "🚔", "🚁", "✈️", "⛵️", "🚦", "🗺", "🏝", "🏜", "🏔", "🏕", "🏥", "🎢", "⛩", "🏞", "🌄", "🌃", "🌌", "🌉", "🌇", "🎆"],
|
||||
["⌚️", "📱", "💻", "🖥", "🖨", "💾", "📀", "💿", "📸", "⏰", "⌛️", "💸", "💵", "💴", "💶", "💷", "🔫", "🔪", "💎", "💳", "🧻", "🚽", "🛁", "🧼", "🛏", "🛋", "🧸", "🎉", "🎀", "🎁", "🛒", "✉️", "💌", "✏️", "📝", "🖌", "📚", "📊", "📆", "📁", "📋", "🔒", "📏", "📌", "✂️"],
|
||||
["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "💕", "💖", "💘", "💔", "🔞", "📵", "🚭", "⚠️", "🔆", "✅", "♻️", "🚸", "⁉️", "💢", "💯", "🚾", "🏧", "🌐", "🔡", "🆒", "🆕", "🆓", "🆗", "🎵", "♾", "™️", "©️", "💬", "📢", "♉️", "♒️", "🆚", "🆘", "📛", "🚫", "🚯", "🕓"],
|
||||
["🏁", "🏴☠️", "🇦🇶", "🇧🇷", "🇨🇦", "🇯🇵", "🇵🇰", "🇵🇱", "🇹🇷", "🇺🇸", "🇬🇧", "🇰🇷", "🇫🇷", "🇩🇪", "🇯🇲", "🇳🇵", "🇬🇷", "🇷🇺", "🇪🇸", "🇩🇰", "🇨🇿", "🇮🇹", "🇮🇳", "🇨🇭"]
|
||||
[
|
||||
"😀",
|
||||
"😅",
|
||||
"☺️",
|
||||
"😇",
|
||||
"😉",
|
||||
"😍",
|
||||
"🥰",
|
||||
"😚",
|
||||
"😝",
|
||||
"😏",
|
||||
"😣",
|
||||
"😭",
|
||||
"🥺",
|
||||
"😢",
|
||||
"🤔",
|
||||
"😳",
|
||||
"😡",
|
||||
"🤤",
|
||||
"🤠",
|
||||
"🥳",
|
||||
"😦",
|
||||
"👅",
|
||||
"👀",
|
||||
"🙏",
|
||||
"👍",
|
||||
"👌",
|
||||
"👠"
|
||||
],
|
||||
[
|
||||
"🐱",
|
||||
"🐰",
|
||||
"🐷",
|
||||
"🐯",
|
||||
"🐸",
|
||||
"🐦",
|
||||
"🐧",
|
||||
"🐣",
|
||||
"🦋",
|
||||
"🐟",
|
||||
"🐿",
|
||||
"🌳",
|
||||
"🌴",
|
||||
"🌷",
|
||||
"🌹",
|
||||
"🌺",
|
||||
"🌻",
|
||||
"🌙",
|
||||
"🌍",
|
||||
"🌈",
|
||||
"🌦",
|
||||
"❄️",
|
||||
"💦",
|
||||
"☃️",
|
||||
"🔥",
|
||||
"💫",
|
||||
"☔️"
|
||||
],
|
||||
[
|
||||
"🍎",
|
||||
"🍌",
|
||||
"🍉",
|
||||
"🍇",
|
||||
"🍑",
|
||||
"🍒",
|
||||
"🍆",
|
||||
"🍕",
|
||||
"🍟",
|
||||
"🥞",
|
||||
"🍰",
|
||||
"🍪",
|
||||
"🍿",
|
||||
"🍩",
|
||||
"🥤",
|
||||
"🧁",
|
||||
"🍨",
|
||||
"🍭",
|
||||
"🥂",
|
||||
"🍹",
|
||||
"🍝",
|
||||
"🌮"
|
||||
],
|
||||
[
|
||||
"🏀",
|
||||
"🏈",
|
||||
"⚽️",
|
||||
"🥏",
|
||||
"🎱",
|
||||
"🏓",
|
||||
"🏹",
|
||||
"🏆",
|
||||
"🥇",
|
||||
"🎨",
|
||||
"🎧",
|
||||
"🎹",
|
||||
"🎸",
|
||||
"🎮",
|
||||
"🎯",
|
||||
"🎳",
|
||||
"🏂"
|
||||
],
|
||||
[
|
||||
"🚗",
|
||||
"🚕",
|
||||
"🚑",
|
||||
"🚒",
|
||||
"🛵",
|
||||
"🚔",
|
||||
"🚁",
|
||||
"✈️",
|
||||
"⛵️",
|
||||
"🚦",
|
||||
"🗺",
|
||||
"🏝",
|
||||
"🏜",
|
||||
"🏔",
|
||||
"🏕",
|
||||
"🏥",
|
||||
"🎢",
|
||||
"⛩",
|
||||
"🏞",
|
||||
"🌄",
|
||||
"🌃",
|
||||
"🌌",
|
||||
"🌉",
|
||||
"🌇",
|
||||
"🎆"
|
||||
],
|
||||
[
|
||||
"⌚️",
|
||||
"📱",
|
||||
"💻",
|
||||
"🖥",
|
||||
"🖨",
|
||||
"💾",
|
||||
"📀",
|
||||
"💿",
|
||||
"📸",
|
||||
"⏰",
|
||||
"⌛️",
|
||||
"💸",
|
||||
"💵",
|
||||
"💴",
|
||||
"💶",
|
||||
"💷",
|
||||
"🔫",
|
||||
"🔪",
|
||||
"💎",
|
||||
"💳",
|
||||
"🧻",
|
||||
"🚽",
|
||||
"🛁",
|
||||
"🧼",
|
||||
"🛏",
|
||||
"🛋",
|
||||
"🧸",
|
||||
"🎉",
|
||||
"🎀",
|
||||
"🎁",
|
||||
"🛒",
|
||||
"✉️",
|
||||
"💌",
|
||||
"✏️",
|
||||
"📝",
|
||||
"🖌",
|
||||
"📚",
|
||||
"📊",
|
||||
"📆",
|
||||
"📁",
|
||||
"📋",
|
||||
"🔒",
|
||||
"📏",
|
||||
"📌",
|
||||
"✂️"
|
||||
],
|
||||
[
|
||||
"❤️",
|
||||
"🧡",
|
||||
"💛",
|
||||
"💚",
|
||||
"💙",
|
||||
"💜",
|
||||
"🖤",
|
||||
"💕",
|
||||
"💖",
|
||||
"💘",
|
||||
"💔",
|
||||
"🔞",
|
||||
"📵",
|
||||
"🚭",
|
||||
"⚠️",
|
||||
"🔆",
|
||||
"✅",
|
||||
"♻️",
|
||||
"🚸",
|
||||
"⁉️",
|
||||
"💢",
|
||||
"💯",
|
||||
"🚾",
|
||||
"🏧",
|
||||
"🌐",
|
||||
"🔡",
|
||||
"🆒",
|
||||
"🆕",
|
||||
"🆓",
|
||||
"🆗",
|
||||
"🎵",
|
||||
"♾",
|
||||
"™️",
|
||||
"©️",
|
||||
"💬",
|
||||
"📢",
|
||||
"♉️",
|
||||
"♒️",
|
||||
"🆚",
|
||||
"🆘",
|
||||
"📛",
|
||||
"🚫",
|
||||
"🚯",
|
||||
"🕓"
|
||||
],
|
||||
[
|
||||
"🏁",
|
||||
"🏴☠️",
|
||||
"🇦🇶",
|
||||
"🇧🇷",
|
||||
"🇨🇦",
|
||||
"🇯🇵",
|
||||
"🇵🇰",
|
||||
"🇵🇱",
|
||||
"🇹🇷",
|
||||
"🇺🇸",
|
||||
"🇬🇧",
|
||||
"🇰🇷",
|
||||
"🇫🇷",
|
||||
"🇩🇪",
|
||||
"🇯🇲",
|
||||
"🇳🇵",
|
||||
"🇬🇷",
|
||||
"🇷🇺",
|
||||
"🇪🇸",
|
||||
"🇩🇰",
|
||||
"🇨🇿",
|
||||
"🇮🇹",
|
||||
"🇮🇳",
|
||||
"🇨🇭"
|
||||
]
|
||||
],
|
||||
groups: groups,
|
||||
recentEmojiList: this.$store.getters.recentEmojis
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -66,26 +331,27 @@ export default {
|
|||
parseEmojiPath(emoji) {
|
||||
return emojiParser.GetEmojiPath(emoji);
|
||||
},
|
||||
selectRandom(array){
|
||||
const randomNum = Math.floor((Math.random() * array.length));
|
||||
return this.parseEmojiPath(array[randomNum])
|
||||
emojiShortcodeToPath(shortcode) {
|
||||
return this.parseEmojiPath(emojiParser.replaceShortcode(shortcode));
|
||||
},
|
||||
selectRandom(array) {
|
||||
const randomNum = Math.floor(Math.random() * array.length);
|
||||
return this.parseEmojiPath(array[randomNum]);
|
||||
},
|
||||
clickEvent(shortcode) {
|
||||
bus.$emit("emojiPanel:Selected", shortcode);
|
||||
},
|
||||
mouseHover(emoji, event){
|
||||
event.target.children[0].src = this.selectRandom(emoji)
|
||||
mouseHover(emoji, event) {
|
||||
event.target.children[0].src = this.selectRandom(emoji);
|
||||
},
|
||||
scrollToCategory(index) {
|
||||
console.log("🏁 🏴☠️ 🇦🇶 🇧🇷 🇨🇦 🇯🇵 🇵🇰 🇵🇱 🇹🇷 🇺🇸 🇬🇧 🇰🇷 🇫🇷 🇩🇪 🇯🇲 🇳🇵 🇬🇷 🇷🇺 🇪🇸 🇩🇰 🇨🇿 🇮🇹 🇮🇳 🇨🇭".split(" "))
|
||||
const elements = document.querySelectorAll(".category-name");
|
||||
elements[index].scrollIntoView();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
groups() {
|
||||
return groups;
|
||||
}
|
||||
mounted() {
|
||||
console.log("mounted")
|
||||
this.recentEmojiList = this.$store.getters.recentEmojis
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -97,7 +363,6 @@ export default {
|
|||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 390px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 99999;
|
||||
|
|
@ -111,7 +376,7 @@ export default {
|
|||
z-index: 99999;
|
||||
}
|
||||
.emoji-panel-inner:hover {
|
||||
background: rgba(255, 255, 255, 0.781)
|
||||
background: rgba(255, 255, 255, 0.685);
|
||||
}
|
||||
.emojis-list {
|
||||
color: white;
|
||||
|
|
@ -129,8 +394,8 @@ export default {
|
|||
}
|
||||
.category-name {
|
||||
padding: 10px;
|
||||
text-transform:capitalize;
|
||||
color: rgb(143, 143, 143);
|
||||
text-transform: capitalize;
|
||||
color: rgb(93, 93, 93);
|
||||
}
|
||||
.list {
|
||||
}
|
||||
|
|
@ -167,42 +432,68 @@ export default {
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
margin: auto;
|
||||
padding-right: 3px;
|
||||
filter: grayscale(100%);
|
||||
transition: 0.1s;
|
||||
}
|
||||
.tabs .material-icons {
|
||||
margin: auto;
|
||||
color: rgb(185, 185, 185);
|
||||
transition: 0.1s;
|
||||
user-select: none;
|
||||
}
|
||||
.tab {
|
||||
background: rgba(59, 59, 59, 0.521);
|
||||
border-radius: 5px;
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: 0.3s;
|
||||
transition: 0.1s;
|
||||
height: 35px;
|
||||
width: 325px;
|
||||
overflow: hidden;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: rgba(73, 73, 73, 0.733);
|
||||
background: rgb(73, 73, 73);
|
||||
}
|
||||
.tab:hover .tooltip {
|
||||
display: flex;
|
||||
}
|
||||
.tab:hover img {
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
margin: auto;
|
||||
padding-left: 2px;
|
||||
filter: grayscale(0)
|
||||
transform: scale(1.3);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
.tab:hover .material-icons {
|
||||
transform: scale(1.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 15px solid rgba(32, 32, 32, 0.87);
|
||||
border-top: 15px solid rgba(255, 255, 255, 0.61);
|
||||
|
||||
align-self: flex-end;
|
||||
margin-right: 70px;
|
||||
}
|
||||
.tooltip{
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
background: rgba(29, 29, 29, 0.664);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
bottom: -20px;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
img.panel.emoji {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,64 @@
|
|||
import Vue from 'vue'
|
||||
import {bus} from '../../main'
|
||||
import {
|
||||
bus
|
||||
} from '../../main'
|
||||
|
||||
|
||||
|
||||
const state = {
|
||||
settings: {
|
||||
|
||||
}
|
||||
settings: {
|
||||
recentEmojis: []
|
||||
}
|
||||
}
|
||||
|
||||
const getters = {
|
||||
settings(state) {
|
||||
return state.settings;
|
||||
}
|
||||
settings(state) {
|
||||
return state.settings;
|
||||
},
|
||||
recentEmojis() {
|
||||
return state.settings.recentEmojis || JSON.parse(localStorage.getItem('recentEmojis'))
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
setSettings(context, settings) {
|
||||
context.commit('setSettings', settings)
|
||||
},
|
||||
setGDriveLinked(context, status) {
|
||||
context.commit('GoogleDriveLinked', status)
|
||||
}
|
||||
setSettings(context, settings) {
|
||||
context.commit('setSettings', settings)
|
||||
},
|
||||
setGDriveLinked(context, status) {
|
||||
context.commit('GoogleDriveLinked', status)
|
||||
},
|
||||
setLastEmoji(context, shortcode) {
|
||||
const recentEmojis = JSON.parse(localStorage.getItem('recentEmojis')) || [];
|
||||
|
||||
let filter = recentEmojis.filter(function (item) {
|
||||
return item !== shortcode
|
||||
})
|
||||
|
||||
filter.unshift(shortcode);
|
||||
filter = filter.slice(0, 16)
|
||||
|
||||
localStorage.setItem("recentEmojis", JSON.stringify(filter));
|
||||
context.commit('setLastEmoji', filter)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
setSettings(state, settings) {
|
||||
state.settings = settings;
|
||||
},
|
||||
GoogleDriveLinked(state, status) {
|
||||
Vue.set(state.settings, 'GDriveLinked', status)
|
||||
}
|
||||
setSettings(state, settings) {
|
||||
state.settings = settings;
|
||||
},
|
||||
GoogleDriveLinked(state, status) {
|
||||
Vue.set(state.settings, 'GDriveLinked', status)
|
||||
},
|
||||
setLastEmoji(state, newEmojiList) {
|
||||
Vue.set(state.settings, 'recentEmojis', newEmojiList)
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
namespace: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
namespace: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
|
|
@ -1,4 +1,18 @@
|
|||
const config = [
|
||||
{
|
||||
title: 'Emoji tabs and recent emojis',
|
||||
shortTitle: 'Emoji tabs and recent emojis',
|
||||
date: '22/03/2019',
|
||||
headColor: "rgba(244, 169, 65, 0.87)",
|
||||
new: [
|
||||
'Tabs in emoji panel',
|
||||
'Recent Emojis now show in the emoji panel'
|
||||
],
|
||||
fix: [
|
||||
'Emoji panel closes when clicking outside the panel.',
|
||||
],
|
||||
next: ['Custom emojis']
|
||||
},
|
||||
{
|
||||
title: 'Emojis :D',
|
||||
shortTitle: 'Emojis',
|
||||
|
|
|
|||
190
src/utils/emojiData/groups.json
Normal file
190
src/utils/emojiData/groups.json
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
{
|
||||
"groups": {
|
||||
"0": "smileys-people",
|
||||
"1": "animals-nature",
|
||||
"2": "food-drink",
|
||||
"3": "travel-places",
|
||||
"4": "activities",
|
||||
"5": "objects",
|
||||
"6": "symbols",
|
||||
"7": "flags"
|
||||
},
|
||||
"hierarchy": {
|
||||
"0": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17
|
||||
],
|
||||
"1": [
|
||||
18,
|
||||
19,
|
||||
20,
|
||||
21,
|
||||
22,
|
||||
23,
|
||||
24,
|
||||
25
|
||||
],
|
||||
"2": [
|
||||
26,
|
||||
27,
|
||||
28,
|
||||
29,
|
||||
30,
|
||||
31,
|
||||
32
|
||||
],
|
||||
"3": [
|
||||
33,
|
||||
34,
|
||||
35,
|
||||
36,
|
||||
37,
|
||||
38,
|
||||
39,
|
||||
40,
|
||||
41,
|
||||
42,
|
||||
43
|
||||
],
|
||||
"4": [
|
||||
44,
|
||||
45,
|
||||
46,
|
||||
47,
|
||||
48
|
||||
],
|
||||
"5": [
|
||||
49,
|
||||
50,
|
||||
51,
|
||||
52,
|
||||
53,
|
||||
54,
|
||||
55,
|
||||
56,
|
||||
57,
|
||||
58,
|
||||
59,
|
||||
60,
|
||||
61,
|
||||
62,
|
||||
63,
|
||||
64,
|
||||
65
|
||||
],
|
||||
"6": [
|
||||
66,
|
||||
67,
|
||||
68,
|
||||
69,
|
||||
70,
|
||||
71,
|
||||
72,
|
||||
73,
|
||||
74,
|
||||
75
|
||||
],
|
||||
"7": [
|
||||
76,
|
||||
77,
|
||||
78
|
||||
]
|
||||
},
|
||||
"subgroups": {
|
||||
"0": "face-positive",
|
||||
"1": "face-neutral",
|
||||
"2": "face-negative",
|
||||
"3": "face-sick",
|
||||
"4": "face-role",
|
||||
"5": "face-fantasy",
|
||||
"6": "cat-face",
|
||||
"7": "monkey-face",
|
||||
"8": "person",
|
||||
"9": "person-role",
|
||||
"10": "person-fantasy",
|
||||
"11": "person-gesture",
|
||||
"12": "person-activity",
|
||||
"13": "person-sport",
|
||||
"14": "family",
|
||||
"15": "body",
|
||||
"16": "emotion",
|
||||
"17": "clothing",
|
||||
"18": "animal-mammal",
|
||||
"19": "animal-bird",
|
||||
"20": "animal-amphibian",
|
||||
"21": "animal-reptile",
|
||||
"22": "animal-marine",
|
||||
"23": "animal-bug",
|
||||
"24": "plant-flower",
|
||||
"25": "plant-other",
|
||||
"26": "food-fruit",
|
||||
"27": "food-vegetable",
|
||||
"28": "food-prepared",
|
||||
"29": "food-asian",
|
||||
"30": "food-sweet",
|
||||
"31": "drink",
|
||||
"32": "dishware",
|
||||
"33": "place-map",
|
||||
"34": "place-geographic",
|
||||
"35": "place-building",
|
||||
"36": "place-religious",
|
||||
"37": "place-other",
|
||||
"38": "transport-ground",
|
||||
"39": "transport-water",
|
||||
"40": "transport-air",
|
||||
"41": "hotel",
|
||||
"42": "time",
|
||||
"43": "sky-weather",
|
||||
"44": "event",
|
||||
"45": "award-medal",
|
||||
"46": "sport",
|
||||
"47": "game",
|
||||
"48": "arts-crafts",
|
||||
"49": "sound",
|
||||
"50": "music",
|
||||
"51": "musical-instrument",
|
||||
"52": "phone",
|
||||
"53": "computer",
|
||||
"54": "light-video",
|
||||
"55": "book-paper",
|
||||
"56": "money",
|
||||
"57": "mail",
|
||||
"58": "writing",
|
||||
"59": "office",
|
||||
"60": "lock",
|
||||
"61": "tool",
|
||||
"62": "science",
|
||||
"63": "medical",
|
||||
"64": "household",
|
||||
"65": "other-object",
|
||||
"66": "transport-sign",
|
||||
"67": "warning",
|
||||
"68": "arrow",
|
||||
"69": "religion",
|
||||
"70": "zodiac",
|
||||
"71": "av-symbol",
|
||||
"72": "other-symbol",
|
||||
"73": "keycap",
|
||||
"74": "alphanum",
|
||||
"75": "geometric",
|
||||
"76": "flag",
|
||||
"77": "country-flag",
|
||||
"78": "subdivision-flag"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue