Merge branch '300-improvement-message-action-btn' into 'dev'

Message action button improvements

Closes #300

See merge request keanuapp/keanuapp-weblite!84

src/assets/css/chat.scss

@@ -119,7 +119,7 @@ $admin-fg: white;
         padding: 10px;
         background-color: #f2f2f2;
     }
-      
+
     .chat-content {
         margin: 0;
         padding-top: $chat-standard-padding-s;
@@ -596,16 +596,9 @@ $admin-fg: white;
     position: absolute;
     width: fit-content;
     background-color: white;
-    height: 44px;
+    height: 34px;
     border-radius: 22px;
     box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
-    // &.incoming {
-    //     right: 30%;
-    // }
-    // &.outgoing {
-    //     left: unset !important;
-    //     right: 10px !important;
-    // }
 }
 
 .avatar-operations {

src/assets/css/vendors/_v-emoji-picker.scss

@@ -1,6 +1,7 @@
 #EmojiPicker {
     width: 100%;
     background-color: #ffffff;
+    margin-top: 15px;
 
     .container-emoji {
         height: 60vh;

src/assets/icons/addReaction.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#757575">
+    <rect fill="none" height="24" width="24"/>
+    <path d="M18,9V7h-2V2.84C14.77,2.3,13.42,2,11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12 c0-1.05-0.17-2.05-0.47-3H18z M15.5,8C16.33,8,17,8.67,17,9.5S16.33,11,15.5,11S14,10.33,14,9.5S14.67,8,15.5,8z M8.5,8 C9.33,8,10,8.67,10,9.5S9.33,11,8.5,11S7,10.33,7,9.5S7.67,8,8.5,8z M12,17.5c-2.33,0-4.31-1.46-5.11-3.5h10.22 C16.31,16.04,14.33,17.5,12,17.5z M22,3h2v2h-2v2h-2V5h-2V3h2V1h2V3z"/>
+  </svg>
+</template>

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;
+      right: 0;
-      top: 10px;
+      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-btn id="btn-edit" icon @click.stop="edit" class="ma-0 pa-0" v-if="isEditable">
-      <v-icon>more_horiz</v-icon>
+      <v-icon small>edit</v-icon>
-    </v-btn>  </div>
+    </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: {

src/plugins/vuetify.js

@@ -4,6 +4,7 @@ import icUser from '@/assets/icons/user.vue';
 import icPassword from '@/assets/icons/password.vue';
 import icEdit from '@/assets/icons/edit.vue';
 import icGlobe from '@/assets/icons/globe.vue';
+import icAddReaction from '@/assets/icons/addReaction.vue';
 
 Vue.use(Vuetify);
 
@@ -15,7 +16,7 @@ export default new Vuetify({
         component: icUser
       },
       password: {
-        component: icPassword        
+        component: icPassword
       },
       edit: {
         component: icEdit
@@ -23,6 +24,9 @@ export default new Vuetify({
       globe: {
         component: icGlobe
       },
+      addReaction: {
+        component: icAddReaction
+      },
     },
     user: icUser
   },