Message action button improvements

src/components/ActionRow.vue

@@ -34,4 +34,4 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-</style> 
+</style>

src/components/Chat.vue

@@ -126,7 +126,7 @@
           class="scroll-to-end"
           v-show="showScrollToEnd"
           fab
-          small
+          x-small
           elevation="0"
           color="black"
           @click.stop="scrollToEndOfTimeline"
@@ -162,7 +162,7 @@
             <div class="col col-auto">
               <v-btn
                 fab
-                small
+                x-small
                 elevation="0"
                 color="black"
                 @click.stop="cancelEditReply"
@@ -406,17 +406,6 @@
     <MessageOperationsBottomSheet
       ref="messageOperationsSheet"
     >
-      <MessageOperationsPicker
-        v-on:close="showEmojiPicker = false"
-        v-if="selectedEvent"
-        v-on:addreaction="addReaction"
-        v-on:addquickreaction="addQuickReaction"
-        v-on:addreply="addReply(selectedEvent)"
-        v-on:edit="edit(selectedEvent)"
-        v-on:redact="redact(selectedEvent)"
-        v-on:download="download(selectedEvent)"
-        :event="selectedEvent"
-      />
       <VEmojiPicker
         ref="emojiPicker"
         @select="emojiSelected"
@@ -516,7 +505,6 @@ import RoomDeletionNotice from "./messages/RoomDeletionNotice.vue";
 import DebugEvent from "./messages/DebugEvent.vue";
 import util from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
-import MessageOperationsPicker from "./messages/MessageOperationsPicker.vue";
 import AvatarOperations from "./messages/AvatarOperations.vue";
 import ChatHeader from "./ChatHeader";
 import VoiceRecorder from "./VoiceRecorder";
@@ -597,7 +585,6 @@ export default {
     RoomDeletionNotice,
     DebugEvent,
     MessageOperations,
-    MessageOperationsPicker,
     VoiceRecorder,
     RoomInfoBottomSheet,
     CreatedRoomWelcomeHeader,
@@ -865,7 +852,7 @@ export default {
               var rectOps =
                 this.$refs.messageOperations.$el.getBoundingClientRect();
               top = rectAnchor.top - rectChat.top - 50;
-              left = rectAnchor.left - rectChat.left - 30;
+              left = rectAnchor.left - rectChat.left - 50;
               if (left + rectOps.width >= rectChat.right) {
                 left = rectChat.right - rectOps.width - 10; // No overflow
               }

src/components/MessageOperationsBottomSheet.vue

@@ -17,13 +17,13 @@
       <slot></slot>
       <v-btn
         fab
-        small
+        x-small
         elevation="0"
         color="black"
         @click.stop="backgroundClick"
         class="bottom-sheet-close"
       >
-        <v-icon color="white">cancel</v-icon>
+        <v-icon color="white" >cancel</v-icon>
       </v-btn>
     </SwipeableBottomSheet>
   </div>
@@ -91,8 +91,8 @@ export default {
 .message-operations-bottom-sheet {
   .bottom-sheet-close {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 0;
+      top: 0;
   }
 
   .transition-bg {

src/components/messages/MessageOperations.vue

@@ -1,16 +1,26 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
-    <template v-for="(item,index) in emojis">
+    <template v-for="(item,index) in getEmojis">
       <v-btn v-if="index < maxRecents" :key="item.data" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
         <span class="recent-emoji">{{ item.data }}</span>
       </v-btn>
     </template>
-    <v-btn v-if="incoming" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0" large>
+    <v-btn id="btn-more" icon @click.stop="more" class="ma-0 pa-0">
+      <v-icon small> $vuetify.icons.addReaction </v-icon>
+    </v-btn>
+    <v-btn v-if="incoming" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0">
       <v-icon>reply</v-icon>
     </v-btn>
-    <v-btn id="btn-more" icon @click.stop="more" class="ma-0 pa-0" large>
-      <v-icon>more_horiz</v-icon>
-    </v-btn>  </div>
+    <v-btn id="btn-edit" icon @click.stop="edit" class="ma-0 pa-0" v-if="isEditable">
+      <v-icon small>edit</v-icon>
+    </v-btn>
+    <v-btn id="btn-redact" icon @click.stop="redact" class="ma-0 pa-0" v-if="isRedactable">
+      <v-icon small>delete</v-icon>
+    </v-btn>
+    <v-btn id="btn-download" icon @click.stop="download" class="ma-0 pa-0" v-if="isDownloadable">
+      <v-icon small>get_app</v-icon>
+    </v-btn>
+  </div>
 </template>
 
 <script>
@@ -32,6 +42,11 @@ export default {
       }
     }
   },
+  computed: {
+    getEmojis() {
+      return this.emojis.slice(0,2);
+    }
+  },
 
   watch: {
     emojis: {