From 998aa8f732bbf9d074abeb5916ceb5effd8afe5c Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Sun, 18 Dec 2022 22:04:58 +0300
Subject: Allow custom emoji reactions

---
 src/components/emoji_reactions/emoji_reactions.vue | 27 ++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index a63daa97..12783114 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -2,7 +2,7 @@
   <div class="EmojiReactions">
     <UserListPopover
       v-for="(reaction) in emojiReactions"
-      :key="reaction.name"
+      :key="reaction.url || reaction.name"
       :users="accountsForEmoji[reaction.name]"
     >
       <button
@@ -11,7 +11,21 @@
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span class="reaction-emoji">{{ reaction.name }}</span>
+        <span
+          v-if="reaction.url"
+          class="reaction-emoji"
+        >
+          <img
+            :src="reaction.url"
+            :title="reaction.name"
+            class="reaction-emoji-content"
+            width="1em"
+          >
+        </span>
+        <span
+          v-else
+          class="reaction-emoji reaction-emoji-content"
+        >{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
     </UserListPopover>
@@ -46,9 +60,18 @@
 
     .reaction-emoji {
       width: 1.25em;
+      height: 1.25em;
       margin-right: 0.25em;
     }
 
+    .reaction-emoji-content {
+      max-width: 1.25em;
+      max-height: 1.25em;
+      width: auto;
+      height: auto;
+      overflow: hidden;
+    }
+
     &:focus {
       outline: none;
     }
-- 
cgit v1.2.3-70-g09d2