doohoyi/chatty-pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rollover message to display reactions/emoji

Browse source
This commit is contained in:
Heerko 2021-07-05 10:17:33 +02:00
parent 8c2b7e03ff
commit a0412cf2b1
1 changed files with 59 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
front/src/components/Content/Message.vue
View file

@ -1,40 +1,57 @@
<template> <template>
<span :class="classes"> <span :class="classes" class="message">
<vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it> <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
<div class="reactions">
<template v-for="reaction in reactions" :key="reaction">
{{ reaction }}
</template>
</div>
</span> </span>
</template> </template>
<script> <script>
var EmojiConvertor = require("emoji-js");
var emojiConv = new EmojiConvertor();
/*eslint no-unused-vars: "off"*/
/*eslint no-undef: "off"*/
export default { export default {
name: "Header", name: "Message",
props: ["message"], props: ["message"],
computed: { computed: {
rawJSON() { rawJSON() {
return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```"; return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```";
}, },
content() { content() {
let url = process.env.VUE_APP_ZULIP_site; let url = process.env.VUE_APP_ZULIP_site;
let c = this.message.content.replace("\n", "<br/>"); let c = this.message.content.replace("\n", "<br/>");
c = c.replaceAll('src="','src="' + url); c = c.replaceAll('src="', 'src="' + url);
c = c.replaceAll('href="/','href="' + url + "/"); c = c.replaceAll('href="/', 'href="' + url + "/");
const referrers = this.$store.state.contents.filter(m => ( const referrers = this.$store.state.contents.filter(
m.responseTo && (m) =>
m.responseTo.id == this.message.id && m.responseTo &&
m.responseTo.sender_id == this.message.sender_id && m.responseTo.id == this.message.id &&
this.message.content.includes(m.responseTo.quote) m.responseTo.sender_id == this.message.sender_id &&
)) this.message.content.includes(m.responseTo.quote)
referrers.forEach(m => { );
const classes = m.reactions referrers.forEach((m) => {
.map(r => "u" + r.emoji_code) const classes = m.reactions.map((r) => "u" + r.emoji_code).join(" ");
.join(' ')
c = c.replace( c = c.replace(
m.responseTo.quote, m.responseTo.quote,
`<span class="${classes}">${m.responseTo.quote}</span>` `<span class="${classes}">${m.responseTo.quote}</span>`
) );
}) });
return c return c;
},
reactions() {
// return this.message.reactions.map((r) => {
// console.log(r);
// return emojiConv.replace_colons(":" + r.emoji_name + ":");
// });
// return [];
return this.message.reactions.map((r) =>
emojiConv.replace_colons(":" + r.emoji_name + ":")
);
}, },
classes() { classes() {
return this.message.reactions.map((r) => "u" + r.emoji_code); return this.message.reactions.map((r) => "u" + r.emoji_code);
@ -47,4 +64,27 @@ export default {
</script> </script>
<style> <style>
.message {
position: relative;
display: block;
}
.message:hover .reactions {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.5);
font-size: 3rem;
}
.reactions,
.reactions::before,
.reactions::after {
all: revert;
display: none;
}
</style> </style>