From 74995b824e0df675851dff960cd90cb4aca65ffa Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Mon, 21 Mar 2022 07:50:31 +0000
Subject: [PATCH] bottomsheet improvements

---
 src/assets/css/vendors/_v-emoji-picker.scss   |  4 ++
 src/components/Chat.vue                       |  1 +
 .../MessageOperationsBottomSheet.vue          | 37 ++++++++++++++++---
 src/components/messages/MessageOperations.vue |  4 +-
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/vendors/_v-emoji-picker.scss b/src/assets/css/vendors/_v-emoji-picker.scss
index d342d80..469cb39 100644
--- a/src/assets/css/vendors/_v-emoji-picker.scss
+++ b/src/assets/css/vendors/_v-emoji-picker.scss
@@ -1,4 +1,8 @@
 #EmojiPicker {
     width: 100%;
     background-color: #ffffff;
+
+    .container-emoji {
+        height: 60vh;
+    }
 }
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 28184ad..9a1c9ca 100644
--- a/src/components/Chat.vue
+++ b/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;
diff --git a/src/components/MessageOperationsBottomSheet.vue b/src/components/MessageOperationsBottomSheet.vue
index 3a16565..8480b27 100644
--- a/src/components/MessageOperationsBottomSheet.vue
+++ b/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;
+    }
   }
 }
 
diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
index 8e48215..75429a2 100644
--- a/src/components/messages/MessageOperations.vue
+++ b/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,