From a0341d4446224d193293cfd52d4c8c5337bed464 Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Tue, 16 Mar 2021 19:20:33 +0100
Subject: [PATCH] bugfix: update ui to stand out the emojis that have been
posted by the current user
---
src/plugins/sib-reactions.js | 99 +++++++++++++++++++-----------------
src/styles/index.scss | 47 ++++++++++++++---
2 files changed, 93 insertions(+), 53 deletions(-)
diff --git a/src/plugins/sib-reactions.js b/src/plugins/sib-reactions.js
index c48c8ee..b558e76 100644
--- a/src/plugins/sib-reactions.js
+++ b/src/plugins/sib-reactions.js
@@ -1,34 +1,5 @@
import { Picker } from 'https://cdn.skypack.dev/emoji-picker-element';
-// TODO: Fix scope of this function
-async function onMessageWithReaction(attrs) {
- console.log('onMessageWithReaction');
- attrs = await attrs;
-
- // Update message model with the reactions
- if (attrs.reaction_id) {
- const message = this.messages.findWhere({
- 'id': attrs.reaction_id,
- });
-
- if (message) {
- const reactions = message.get('reactions') || {};
-
- console.log('ChatRoom#onMessage', reactions, attrs);
-
- // If there are reactions for this user, replace with the latest ones
- reactions[attrs.from_real_jid] = {
- emojis: attrs.reaction_emojis,
- origin_id: attrs.id,
- from_real_jid: attrs.from_real_jid,
- };
-
- message.set('reactions', reactions);
- message.save('reactions', reactions);
- }
- }
-}
-
/**
* Reactions plugin for Converse.
* https://xmpp.org/extensions/xep-0444.html
@@ -37,13 +8,37 @@ converse.plugins.add('sib-reactions', {
overrides: {
ChatBox: {
async onMessage(attrs) {
- await onMessageWithReaction.apply(this, arguments);
+ await this.onMessageWithReaction.apply(this, arguments);
return await this.__super__.onMessage.apply(this, arguments);
},
+ async onMessageWithReaction(attrs) {
+ attrs = await attrs;
+
+ // Update message model with the reactions
+ if (attrs.reaction_id) {
+ const message = this.messages.findWhere({
+ 'id': attrs.reaction_id,
+ });
+
+ if (message) {
+ const reactions = message.get('reactions') || {};
+
+ // If there are reactions for this user, replace with the latest ones
+ reactions[attrs.from_real_jid] = {
+ emojis: attrs.reaction_emojis,
+ origin_id: attrs.id,
+ from_real_jid: attrs.from_real_jid,
+ };
+
+ message.set('reactions', reactions);
+ message.save('reactions', reactions);
+ }
+ }
+ },
},
ChatRoom: {
async onMessage(attrs) {
- await onMessageWithReaction.apply(this, arguments);
+ await this.onMessageWithReaction.apply(this, arguments);
return await this.__super__.onMessage.apply(this, arguments);
},
},
@@ -137,11 +132,15 @@ converse.plugins.add('sib-reactions', {
*/
renderReactions() {
return html`
- <div class='chat-msg__reactions'>
- ${this.getEmojisByCount().map(({ emoji, count }) => html`
- <a href='#' @click='${ev => this.toggleReaction(ev, emoji)}'><i class='fa'>${emoji} (${count})</i></a>
+ <div class="chat-msg__reactions">
+ ${this.getEmojisByCount().map(({ emoji, count, from_user }) => html`
+ <a href="#" class="chat-msg__reaction ${from_user ? 'chat-msg__reaction--me' : ''}"
+ @click="${ev => this.toggleReaction(ev, emoji)}">
+ <span class="emoji">${emoji}</span>
+ <span class="count">${count}</span>
+ </a>
`)}
- <a href='#' @click='${this.openEmojiPicker}' class='chat-msg--react'><i class='fa fa-smile'></i></a>
+ <a href="#" @click="${this.openEmojiPicker}" class="chat-msg--react"><i class="fa fa-smile"></i></a>
</div>
`;
},
@@ -163,19 +162,25 @@ converse.plugins.add('sib-reactions', {
*/
getEmojisByCount() {
const reactions = this.model.get('reactions');
- const emojis = Object.values(reactions).map(r => r.emojis).flat();
-
- return _.values(emojis.reduce((prev, curr) => {
- if (prev.hasOwnProperty(curr)) {
- prev[curr].count += 1;
- } else {
- prev[curr] = {
- emoji: curr,
- count: 1,
- };
+ const from_real_jid = _converse.bare_jid;
+ const emojis = {};
+
+ for (let r of _.values(reactions)) {
+ for (let e of r.emojis) {
+ if (emojis.hasOwnProperty(e)) {
+ emojis[e].count += 1;
+ emojis[e].from_user = emojis[e].from_user ?? r.from_real_jid === from_real_jid;
+ } else {
+ emojis[e] = {
+ emoji: e,
+ count: 1,
+ from_user: r.from_real_jid === from_real_jid,
+ };
+ }
}
- return prev;
- }, {}));
+ }
+
+ return _.values(emojis);
},
// TODO: Care about overflow according to the target position
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e42af71..c0a6246 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -140,10 +140,10 @@
}
/* Modal when the connection is lost*/
- #alert-modal>.modal-dialog>.modal-content {
+ #alert-modal > .modal-dialog > .modal-content {
top: 47px;
- >div.modal-body>p {
+ > div.modal-body > p {
color: var(--color-chat-grey-1);
}
}
@@ -154,7 +154,7 @@
}
/* To hide the trash icon because you can't remove a message for now */
- >.converse-chatboxes .chat-body .chat-msg__actions>button.chat-msg__action.fa-trash-alt {
+ > .converse-chatboxes .chat-body .chat-msg__actions > button.chat-msg__action.fa-trash-alt {
display: none;
}
@@ -571,7 +571,7 @@
}
.suggestion-box .suggestion-box__results,
- .suggestion-box>ul {
+ .suggestion-box > ul {
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
}
@@ -598,7 +598,7 @@
converse-chat-toolbar .far:hover svg,
converse-chat-toolbar .fas svg,
converse-chat-toolbar .fas:hover svg {
- fill: var(--color-secondary)!important;
+ fill: var(--color-secondary) !important;
}
.chatroom .toggle-smiley .emoji-picker.toolbar-menu .emoji-picker__container .emoji-skintone-picker,
@@ -821,7 +821,7 @@
background: var(--hd-hightlight-color);
}
- .suggestion-box>ul>li[aria-selected=true] {
+ .suggestion-box > ul > li[aria-selected=true] {
background: transparent;
color: var(--chat-suggestion-selected-true) !important;
}
@@ -886,4 +886,39 @@
display: none;
}
}
+
+ //
+ // Reactions
+ // -------------------------------
+
+ .chat-msg__reactions {
+ margin-top: 1em;
+ }
+
+ .chat-msg__reaction {
+ color: var(--text-color);
+ margin-right: 0.3em;
+ padding: 0.2em 0.3em;
+ border-radius: 3px;
+ text-decoration: none;
+
+ .count {
+ font-size: 0.8em;
+ }
+
+ &:hover {
+ .count {
+ color: var(--color-secondary);
+ }
+ }
+
+ &--me {
+ background-color: #e9e9e9;
+
+ .count {
+ color: #2e3f57 !important;
+ font-weight: bold;
+ }
+ }
+ }
}
--
GitLab