+
{{change.date}}
{{change.title}}
diff --git a/src/components/app/RightPanel.vue b/src/components/app/RightPanel.vue
index ca52848..b64e0df 100644
--- a/src/components/app/RightPanel.vue
+++ b/src/components/app/RightPanel.vue
@@ -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);
diff --git a/src/components/app/emojiPanel.vue b/src/components/app/emojiPanel.vue
index 7a8c388..2010737 100644
--- a/src/components/app/emojiPanel.vue
+++ b/src/components/app/emojiPanel.vue
@@ -2,6 +2,19 @@
+
+
+
Recent
+
+
+
+ ![]()
+
+ {{group.split('-')[0]}}
@@ -17,8 +30,19 @@
-
@@ -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
}
};
@@ -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;
+}
- ![]()
+
+ history
+
+ Recent
+
+ ![]()
+
{{ groups[index].split('-')[0] }}