Desktop: input emoji added

src/assets/css/chat.scss

@@ -211,6 +211,16 @@ $admin-fg: white;
       margin: 0;
       padding: 0;
       min-width: 48px;
+
+      &.input-more-icon  {
+        svg {
+          fill: black;
+        }
+
+        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+          display: none;
+        }
+      }
     }
     .input-area-text {
       max-height: 30vh;

src/components/Chat.vue

@@ -26,7 +26,10 @@
           v-on:edit="edit(selectedEvent)"
           v-on:redact="redact(selectedEvent)"
           v-on:download="download(selectedEvent)"
-          v-on:more="showMoreMessageOperations"
+          v-on:more="
+            isEmojiQuickReaction= true
+            showMoreMessageOperations($event)
+          "
           :event="selectedEvent"
         />
       </div>
@@ -233,6 +236,23 @@
             </v-btn>
           </v-col>
 
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1 input-more-icon"
+          >
+            <v-btn
+              fab
+              small
+              elevation="0"
+              v-blur
+              @click.stop="
+                isEmojiQuickReaction = false
+                showMoreMessageOperations($event)
+              "
+            >
+              <v-icon>$vuetify.icons.addReaction</v-icon>
+            </v-btn>
+          </v-col>
+
           <v-col v-if="$config.shortCodeStickers" class="input-area-button text-center flex-grow-0 flex-shrink-1">
             <v-btn
               v-if="!showRecorder"
@@ -495,6 +515,8 @@ export default {
 
       /** Calculated style for message operations. We position the "popup" at the selected message. */
       opStyle: "",
+
+      isEmojiQuickReaction: true
     };
   },
 
@@ -1254,13 +1276,21 @@ export default {
     },
 
     emojiSelected(e) {
+      if(this.isEmojiQuickReaction) {
+         // When quick emoji picker is clicked
+        if (this.selectedEvent) {
+          const event = this.selectedEvent;
+          this.selectedEvent = null;
+          this.sendQuickReaction({ reaction: e.data, event: event });
+        }
+      } else {
+        // When text input emoji picker is clicked
+        this.currentInput = e.data;
+        this.$refs.messageInput.focus();
+      }
+
       this.showEmojiPicker = false;
       this.$refs.messageOperationsSheet.close();
-      if (this.selectedEvent) {
-        const event = this.selectedEvent;
-        this.selectedEvent = null;
-        this.sendQuickReaction({ reaction: e.data, event: event });
-      }
     },
 
     sendQuickReaction(e) {