mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-19 22:31:25 +00:00
added suggestions list
This commit is contained in:
supertiger
parent
40dedc7a80
commit
a5111305c7
6 changed files with 104 additions and 19 deletions
14
package-lock.json
generated
14
package-lock.json
generated
|
|
@ -6759,6 +6759,20 @@
|
|||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"match-sorter": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-2.3.0.tgz",
|
||||
"integrity": "sha512-0/F1ezfjs5vegTvdH0sJEDrIi+w7wvUeDW/yqLMsK6jQWgNNJRv8jYCLBc8QrCxQNpSEpei6vrOcnJwAbnYhkw==",
|
||||
"requires": {
|
||||
"diacritic": "0.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"diacritic": {
|
||||
"version": "0.0.2",
|
||||
"bundled": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"filesize": "^4.1.2",
|
||||
"futoji": "^0.2.4",
|
||||
"jquery": "^3.3.1",
|
||||
"match-sorter": "^2.3.0",
|
||||
"socket.io": "^2.2.0",
|
||||
"socket.io-client": "^2.2.0",
|
||||
"twemoji": "^11.3.0",
|
||||
|
|
|
|||
|
|
@ -29,8 +29,11 @@
|
|||
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
|
||||
</div>
|
||||
</div>
|
||||
<news v-else/>
|
||||
<news v-if="!selectedChannelID && !messages[selectedChannelID]"/>
|
||||
<div class="chat-input-area" v-if="selectedChannelID">
|
||||
<div class="emoji-suggestion-outer" v-if="showEmojiSuggestions">
|
||||
<emoji-suggestions :emojiArray="emojiSuggestionsArray"/>
|
||||
</div>
|
||||
<div class="message-area">
|
||||
<input type="file" ref="sendFileBrowse" @change="attachmentChange" class="hidden">
|
||||
<div class="attachment-button" @click="attachmentButton">
|
||||
|
|
@ -80,6 +83,7 @@ import Message from "../../components/app/MessageTemplate.vue";
|
|||
import Spinner from "@/components/Spinner.vue";
|
||||
import TypingStatus from "@/components/app/TypingStatus.vue";
|
||||
import uploadsQueue from "@/components/app/uploadsQueue.vue";
|
||||
import emojiSuggestions from "@/components/app/emojiSuggestions.vue";
|
||||
import emojiParser from "@/utils/emojiParser.js";
|
||||
|
||||
export default {
|
||||
|
|
@ -88,7 +92,8 @@ export default {
|
|||
Spinner,
|
||||
News,
|
||||
TypingStatus,
|
||||
uploadsQueue
|
||||
uploadsQueue,
|
||||
emojiSuggestions
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -98,7 +103,8 @@ export default {
|
|||
getTimerID: null,
|
||||
typing: false,
|
||||
whosTyping: "",
|
||||
showEmojiSuggestions: false
|
||||
showEmojiSuggestions: false,
|
||||
emojiSuggestionsArray: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -132,7 +138,6 @@ export default {
|
|||
const msg = emojiParser.replaceShortcode(this.message);
|
||||
const tempID = this.generateNum(25);
|
||||
|
||||
|
||||
this.$store.dispatch("addMessage", {
|
||||
sender: true,
|
||||
channelID: this.selectedChannelID,
|
||||
|
|
@ -168,7 +173,7 @@ export default {
|
|||
},
|
||||
async postTimer() {
|
||||
this.postTimerID = setInterval(async () => {
|
||||
if (this.$refs["input-box"].value.trim() == "") {
|
||||
if (this.message.trim() == "") {
|
||||
clearInterval(this.postTimerID);
|
||||
return (this.postTimerID = null);
|
||||
}
|
||||
|
|
@ -189,16 +194,17 @@ export default {
|
|||
delayedResize(event) {
|
||||
this.resize(event);
|
||||
},
|
||||
showEmojiPopout(shortcode) {
|
||||
if (shortcode.length < 3) return this.showEmojiSuggestions = false;
|
||||
const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1))
|
||||
if (searchArr.length <=0) return this.showEmojiSuggestions = false;
|
||||
return this.showEmojiSuggestions = true;
|
||||
//console.log(searchArr)
|
||||
//TODO make a component.
|
||||
|
||||
showEmojiPopout() {
|
||||
const shortcode = this.message.split(" ").pop();
|
||||
if (!shortcode || !shortcode.startsWith(":") || shortcode.endsWith(":") || shortcode.length < 3)
|
||||
return (this.showEmojiSuggestions = false);
|
||||
const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1));
|
||||
if (searchArr.length <= 0) return (this.showEmojiSuggestions = false);
|
||||
this.showEmojiSuggestions = true;
|
||||
this.emojiSuggestionsArray = searchArr;
|
||||
},
|
||||
async onInput(event) {
|
||||
this.showEmojiPopout();
|
||||
this.delayedResize(event);
|
||||
this.messageLength = this.message.length;
|
||||
const value = event.target.value.trim();
|
||||
|
|
@ -206,9 +212,6 @@ export default {
|
|||
this.postTimer();
|
||||
await typingService.post(this.selectedChannelID);
|
||||
}
|
||||
|
||||
const shortCode = this.message.split(" ").pop()
|
||||
if (shortCode && shortCode.startsWith(":")) this.showEmojiPopout(shortCode);
|
||||
},
|
||||
chatInput(event) {
|
||||
this.delayedResize(event);
|
||||
|
|
@ -370,7 +373,9 @@ export default {
|
|||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.emoji-suggestion-outer {
|
||||
position: relative;
|
||||
}
|
||||
.show-menu-button {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
|
|
@ -399,6 +404,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.message-logs {
|
||||
overflow: auto;
|
||||
|
|
@ -418,6 +424,7 @@ export default {
|
|||
flex-direction: column;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attachment-button {
|
||||
|
|
|
|||
59
src/components/app/emojiSuggestions.vue
Normal file
59
src/components/app/emojiSuggestions.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="emoji-suggetions-list">
|
||||
<div class="emoji" v-for="emoji in $props.emojiArray" :key="emoji.hexcode">
|
||||
<div class="preview">{{emoji.unicode}}</div>
|
||||
<div class="short-code">:{{emoji.shortcodes[0]}}:</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
props: ['emojiArray'],
|
||||
methods: {},
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.emoji-suggetions-list{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 70px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
background: rgba(32, 32, 32, 0.87);
|
||||
color: white;
|
||||
padding: 5px;
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
.emoji-suggetions-list:hover{
|
||||
background: rgba(32, 32, 32, 0.966);
|
||||
}
|
||||
.preview{
|
||||
|
||||
margin-right: 5px;
|
||||
}
|
||||
.name{
|
||||
flex: 1;
|
||||
}
|
||||
.short-code {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.emoji{
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
}
|
||||
.emoji.selected {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import emojis from "emojibase-data/en/compact.json";
|
||||
import matchSorter from "match-sorter";
|
||||
import {
|
||||
groups
|
||||
} from "emojibase-data/meta/groups.json";
|
||||
|
|
@ -22,10 +23,10 @@ export default {
|
|||
for (let i = 0; i < element.shortcodes.length; i++) {
|
||||
const el2 = element.shortcodes[i];
|
||||
if (el2.includes(shortCode)) array.push(element);
|
||||
if (array.length >= 10) return array;
|
||||
|
||||
}
|
||||
}
|
||||
return array;
|
||||
return matchSorter(emojis, shortCode, {keys: ['shortcodes']});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -162,16 +162,19 @@ body {
|
|||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #8080806b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #f5f5f559;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #f5f5f59e;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue