Style quick reactions.

Issue #65. Move "edit" and "delete" to emoji picker dialog, accessible through the "..." button.

src/components/messages/MessageOperations.vue

@@ -1,86 +1,54 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
-    <v-btn icon @click.stop="addReaction" class="ma-0 pa-0">
-      <v-icon>mood</v-icon>
-    </v-btn>
+    <template v-for="(item,index) in emojis">
+      <v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0">
+        <span class="recent-emoji" >{{ item.data }}</span>
+      </v-btn>
+    </template>
     <v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0">
       <v-icon>reply</v-icon>
     </v-btn>
-    <v-btn v-if="isEditable" icon @click.stop="edit" class="ma-0 pa-0">
-      <v-icon>edit</v-icon>
-    </v-btn>
-    <v-btn v-if="isRedactable" icon @click.stop="redact" class="ma-0 pa-0">
-      <v-icon>delete</v-icon>
-    </v-btn>
-    <v-btn v-if="isDownloadable" icon @click.stop="download" class="ma-0 pa-0">
-      <v-icon>get_app</v-icon>
-    </v-btn>
-  </div>
+    <v-btn icon @click.stop="more" class="ma-0 pa-0">
+      <v-icon>more_horiz</v-icon>
+    </v-btn>  </div>
 </template>
 
 <script>
 import messageMixin from "./messageMixin";
+import messageOperationsMixin from "./messageOperationsMixin";
 
 export default {
-  mixins: [messageMixin],
-
+  mixins: [messageMixin, messageOperationsMixin],
+  data() {
+    return {
+      maxRecents: 5
+    }
+  },
   props: {
-    incoming: {
-      type: Boolean,
+    emojis: {
+      type: Array,
       default: function () {
-        return true
+        return []
       }
-    },
-    event: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
+    }
   },
   
-  computed: {
-    isEditable() {
-      return !this.incoming && this.event.getContent().msgtype == "m.text";
-    },
-    isDownloadable() {
-      const msgtype = this.event.getContent().msgtype;
-      return ['m.video','m.audio','m.image','m.file'].includes(msgtype);
-    },
-    isRedactable() {
-      const room = this.$matrix.matrixClient.getRoom(this.event.getRoomId());
-      if (room && room.currentState && room.currentState.maySendRedactionForEvent(this.event, this.$matrix.currentUserId)) {
-        return true;
+  watch: {
+    emojis: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        console.log("Emojis changed", newVal, oldVal);
       }
-      return false;
-    }
+    },
   },
-
-  methods: {
-    addReaction() {
-      this.$emit("close");
-      this.$emit("addreaction", {event:this.event});
-    },
-    addReply() {
-      this.$emit("close");
-      this.$emit("addreply", {event:this.event});
-    },
-    edit() {
-      this.$emit("close");
-      this.$emit("edit", {event:this.event});
-    },
-    redact() {
-      this.$emit("close");
-      this.$emit("redact", {event:this.event});
-    },
-    download() {
-      this.$emit("close");
-      this.$emit("download", {event:this.event});
-    }
-  }
 };
 </script>
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+
+// .recent-emoji {
+//   width: 30px;
+// }
+
 </style>