From 8c2ef10a1f873b8c97db7f243f4aa83fdfb4b096 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 9 Apr 2021 15:31:49 +0200
Subject: [PATCH] Fix emoji picker bottom sheet

Padding and swipe gestures etc. Issue #65.
---
 src/components/Chat.vue                       |  2 -
 .../MessageOperationsBottomSheet.vue          | 76 +++++++++++++------
 2 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index b246c0a..f16ee62 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -259,7 +259,6 @@
     </div>
 
     <MessageOperationsBottomSheet ref="messageOperationsSheet" xv-show="showEmojiPicker">
-      <div>
       <MessageOperationsPicker
           v-on:close="showEmojiPicker = false"
           v-if="selectedEvent"
@@ -272,7 +271,6 @@
           :event="selectedEvent"
           />
       <VEmojiPicker ref="emojiPicker" style="width: 100%" @select="emojiSelected" />
-      </div>
     </MessageOperationsBottomSheet>
 
     <!-- "NOT ALLOWED FOR GUEST ACCOUNTS" dialog -->
diff --git a/src/components/MessageOperationsBottomSheet.vue b/src/components/MessageOperationsBottomSheet.vue
index d4bb922..3ca84c6 100644
--- a/src/components/MessageOperationsBottomSheet.vue
+++ b/src/components/MessageOperationsBottomSheet.vue
@@ -1,13 +1,29 @@
 <template>
-  <SwipeableBottomSheet
-    class="bottom-sheet"
-    ref="sheet"
-    :halfY="1"
-    :openY="0.4"
-    :data-closed="closed ? 1 : 0"
-  >
-  <slot></slot>
-  </SwipeableBottomSheet>
+  <div class="message-operations-bottom-sheet">
+    <v-fade-transition>
+      <div
+        v-show="!closed"
+        @click.stop="backgroundClick"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background-color: rgba(0, 0, 0, 0.3);
+        "
+      />
+    </v-fade-transition>
+    <SwipeableBottomSheet
+      class="bottom-sheet ma-0 pa-0"
+      ref="sheet"
+      :halfY="0.5"
+      :openY="0.2"
+      :data-closed="closed ? 1 : 0"
+    >
+      <slot></slot>
+    </SwipeableBottomSheet>
+  </div>
 </template>
 
 <script>
@@ -19,19 +35,13 @@ export default {
   },
   data() {
     return {
-      closed: true
-    }
+      closed: true,
+    };
   },
   mounted() {
-    this.$watch(
-      "$refs.sheet.state",
-      (new_value, ignored_old_value) => {
-        this.closed = new_value == 'close';
-        if (new_value == 'half') {
-          this.$refs.sheet.setState("close");
-        }
-      }
-    );
+    this.$watch("$refs.sheet.state", (new_value, ignored_old_value) => {
+      this.closed = new_value == "close";
+    });
   },
   methods: {
     open() {
@@ -39,13 +49,21 @@ export default {
         this.$refs.sheet.setState("close");
       } else {
         // Reset scroll before opening!
-        this.$refs.sheet.setState("open");
+        this.$refs.sheet.setState("half");
       }
     },
 
     close() {
       this.$refs.sheet.setState("close");
     },
+
+    backgroundClick() {
+      if (this.$refs.sheet.state == "half") {
+        this.$refs.sheet.setState("close");
+      } else {
+        this.$refs.sheet.setState("half");
+      }
+    },
   },
 };
 </script>
@@ -57,13 +75,23 @@ export default {
  so we use our own flag (data-closed) here to that we can
  dim also when it is just half open */
 .bottom-sheet[data-closed="0"] .bg {
-  display: block;
+  display: none;
   transition: all 0.3s;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.3) !important;
+  background: transparent !important;
 }
-</style>
\ No newline at end of file
+
+.message-operations-bottom-sheet {
+  .pan-area {
+    padding-bottom: 0px;
+  }
+  .card {
+    padding: 0px !important;
+  }
+}
+
+</style>