ux: display all emojis reactions

src/components/Chat.vue

@@ -56,7 +56,12 @@
               :timelineSet="timelineSet" v-on:send-quick-reaction.stop="sendQuickReaction"
               v-on:context-menu="showContextMenuForEvent($event)" v-on:own-avatar-clicked="viewProfile"
               v-on:other-avatar-clicked="showAvatarMenuForEvent($event)" v-on:download="download(event)"
-              v-on:poll-closed="pollWasClosed(event)" />
+              v-on:poll-closed="pollWasClosed(event)"
+              v-on:more="
+                isEmojiQuickReaction = true
+                showMoreMessageOperations($event)
+                "
+              />
             <!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
             <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
             <div v-if="event.getId() == readMarker && index < events.length - 1" class="read-marker"

src/components/messages/MessageIncoming.vue

@@ -20,7 +20,7 @@
         <v-icon>more_vert</v-icon>
       </v-btn>
     </div>
-    <QuickReactions :event="event" :timelineSet="timelineSet" />
+    <QuickReactions :event="event" :timelineSet="timelineSet" v-on="$listeners"/>
   </div>
 </template>
 

src/components/messages/MessageOutgoing.vue

@@ -8,7 +8,6 @@
       <div class="status">{{ event.status }}</div>
     </div>
 
-    <QuickReactions :event="event" :timelineSet="timelineSet" />
     <div class="op-button" ref="opbutton" v-if="!event.isRedacted()">
       <v-btn id="btn-show-menu" icon @click.stop="showContextMenu($refs.opbutton)">
         <v-icon>more_vert</v-icon>
@@ -25,6 +24,7 @@
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>
+    <QuickReactions :event="event" :timelineSet="timelineSet" v-on="$listeners"/>
   </div>
 </template>
 

src/components/messages/QuickReactions.vue

@@ -1,13 +1,67 @@
 <template>
   <div class="quick-reaction-container" v-show="reactions">
-    <span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @click.stop="onClickEmoji(name)">
-      {{ name }} <span class="quick-reaction-count">{{ value.length }}</span>
-    </span>
+    <div
+      class="emoji"
+      v-for="(value, name, index) in reactionMap"
+      :key="name"
+      v-show="showAllReaction || index < REACTION_LIMIT"
+    >
+      <v-tooltip top v-if="value.includes($matrix.currentUserId)">
+        <template v-slot:activator="{ on, attrs }">
+          <v-chip
+            class="pa-2 ma-1 ml-0"
+            outlined
+            small
+            v-bind="attrs"
+            v-on="on"
+            @click="onClickEmoji(name)"
+          >
+            {{ name }} {{ value.length }}
+          </v-chip>
+        </template>
+        <span v-if="value.includes($matrix.currentUserId)">{{ $t("global.click_to_remove") }}</span>
+      </v-tooltip>
+      <v-chip
+        v-else
+        class="pa-2 ma-1 ml-0"
+        outlined
+        small
+      >
+        {{ name }} {{ value.length }}
+      </v-chip>
+    </div>
+    <v-chip
+      v-if="totalReaction > REACTION_LIMIT"
+      @click="showAllReaction = !showAllReaction"
+      class="pa-2 ma-1 ml-0"
+      outlined
+      small
+    >
+      {{ otherReactionText }}
+    </v-chip>
+    <v-tooltip top v-if="!!totalReaction">
+      <template v-slot:activator="{ on, attrs }">
+        <v-chip
+          outlined
+          small
+          class="pa-2 ma-1 ml-0"
+          v-bind="attrs"
+          v-on="on"
+          @click="more"
+        >
+          <v-icon small> $vuetify.icons.addReaction </v-icon>
+        </v-chip>
+      </template>
+      <span>{{ $t("global.add_reaction") }}</span>
+    </v-tooltip>
   </div>
 </template>
 
 <script>
+import messageOperationsMixin from "./messageOperationsMixin";
+
 export default {
+  mixins: [messageOperationsMixin],
   props: {
     event: {
       type: Object,
@@ -25,7 +79,9 @@ export default {
   data() {
     return {
       reactionMap: {},
-      reactions: null
+      reactions: null,
+      REACTION_LIMIT: 5,
+      showAllReaction: false
     }
   },
   mounted() {
@@ -38,6 +94,14 @@ export default {
       this.reactions.off('Relations.add', this.onAddRelation);
     }
   },
+  computed: {
+    totalReaction() {
+      return Object.keys(this.reactionMap).length
+    },
+    otherReactionText() {
+      return this.showAllReaction ? this.$t("global.show_less") : this.$t("message.reaction_count_more", { reactionCount: this.totalReaction - this.REACTION_LIMIT })
+    }
+  },
   methods: {
     onRelationsCreated() {
       this.reactions = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');