Move emoji picker to bottom sheet

More work on issue #65.

src/components/Chat.vue

@@ -258,7 +258,7 @@
       </v-dialog>
     </div>
 
-    <v-dialog v-model="showEmojiPicker" class="ma-0 pa-0" eager>
+    <MessageOperationsBottomSheet ref="messageOperationsSheet" xv-show="showEmojiPicker">
       <div>
       <MessageOperationsPicker
           v-on:close="showEmojiPicker = false"
@@ -273,7 +273,7 @@
           />
       <VEmojiPicker ref="emojiPicker" style="width: 100%" @select="emojiSelected" />
       </div>
-    </v-dialog>
+    </MessageOperationsBottomSheet>
 
     <!-- "NOT ALLOWED FOR GUEST ACCOUNTS" dialog -->
     <v-dialog v-model="showNotAllowedForGuests" class="ma-0 pa-0" width="50%">
@@ -340,6 +340,7 @@ import ChatHeader from "./ChatHeader";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
 import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
+import MessageOperationsBottomSheet from './MessageOperationsBottomSheet';
 
 const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
 
@@ -397,7 +398,8 @@ export default {
     MessageOperationsPicker,
     VoiceRecorder,
     RoomInfoBottomSheet,
-    CreatedRoomWelcomeHeader
+    CreatedRoomWelcomeHeader,
+    MessageOperationsBottomSheet
   },
 
   data() {
@@ -1072,6 +1074,7 @@ export default {
       // Store the event we are reacting to, so that we know where to
       // send when the picker closes.
       this.selectedEvent = event;
+      this.$refs.messageOperationsSheet.open();
       this.showEmojiPicker = true;
     },
 

src/components/MessageOperationsBottomSheet.vue

@@ -0,0 +1,69 @@
+<template>
+  <SwipeableBottomSheet
+    class="bottom-sheet"
+    ref="sheet"
+    :halfY="1"
+    :openY="0.4"
+    :data-closed="closed ? 1 : 0"
+  >
+  <slot></slot>
+  </SwipeableBottomSheet>
+</template>
+
+<script>
+import SwipeableBottomSheet from "vue-swipeable-bottom-sheet/src/components/SwipeableBottomSheet";
+export default {
+  name: "MessageOperationsBottomSheet",
+  components: {
+    SwipeableBottomSheet,
+  },
+  data() {
+    return {
+      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");
+        }
+      }
+    );
+  },
+  methods: {
+    open() {
+      if (this.$refs.sheet.state == "half") {
+        this.$refs.sheet.setState("close");
+      } else {
+        // Reset scroll before opening!
+        this.$refs.sheet.setState("open");
+      }
+    },
+
+    close() {
+      this.$refs.sheet.setState("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+/* Default implementation only dims background when fully open,
+ 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;
+  transition: all 0.3s;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3) !important;
+}
+</style>