Merge branch '272-bottom-sheet-improvements' into 'dev'

bottomsheet improvements

Closes #272

See merge request keanuapp/keanuapp-weblite!60

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

@@ -1,4 +1,8 @@
 #EmojiPicker {
     width: 100%;
     background-color: #ffffff;
+
+    .container-emoji {
+        height: 60vh;
+    }
 }

src/components/Chat.vue

@@ -1542,6 +1542,7 @@ export default {
 
     emojiSelected(e) {
       this.showEmojiPicker = false;
+      this.$refs.messageOperationsSheet.close();
       if (this.selectedEvent) {
         const event = this.selectedEvent;
         this.selectedEvent = null;

src/components/MessageOperationsBottomSheet.vue

@@ -15,6 +15,16 @@
       :data-closed="closed ? 1 : 0"
     >
       <slot></slot>
+      <v-btn
+        fab
+        small
+        elevation="0"
+        color="black"
+        @click.stop="backgroundClick"
+        class="bottom-sheet-close"
+      >
+        <v-icon color="white">cancel</v-icon>
+      </v-btn>
     </SwipeableBottomSheet>
   </div>
 </template>
@@ -79,6 +89,12 @@ export default {
 }
 
 .message-operations-bottom-sheet {
+  .bottom-sheet-close {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+  }
+
   .transition-bg {
       position: absolute;
       top: 0;
@@ -86,6 +102,11 @@ export default {
       bottom: 0;
       right: 0;
       background-color: rgba(0, 0, 0, 0.15);
+
+      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        z-index: 10;
+      }
+
   }
   .pan-area {
     padding-bottom: 0px;
@@ -93,15 +114,19 @@ export default {
   .card {
     padding: 0px !important;
 
-    @media #{map-get($display-breakpoints, 'sm-and-up')} {
-      &[data-state="close"] {
-        display: none;
-      }
+    &[data-state="half"] {
+      top: 100px !important;
+      left: 50%;
+      transform: translate(-50%, 0);
 
-      &[data-state="half"] {
-        top: 394px !important;
+      @media #{map-get($display-breakpoints, 'lg-and-up')} {
+        width: $dialog-desktop-width;
       }
     }
+
+    &[data-state="close"] {
+      display: none;
+    }
   }
 }
 

src/components/messages/MessageOperations.vue

@@ -21,7 +21,7 @@ export default {
   mixins: [messageMixin, messageOperationsMixin],
   data() {
     return {
-      maxRecents: 5
+      maxRecents: 3
     }
   },
   props: {
@@ -32,7 +32,7 @@ export default {
       }
     }
   },
-  
+
   watch: {
     emojis: {
       immediate: true,