From 9aa49094bc6699bf244fc952440d475ab8db47f0 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 15 Apr 2021 17:14:22 +0200
Subject: [PATCH] Use improved bottom sheet for room info as well

This one allows all of the content to be scrollable/viewed even if the sheet is only half open.
---
 src/components/BottomSheet.vue         |  3 +-
 src/components/RoomInfoBottomSheet.vue | 52 ++++----------------------
 2 files changed, 10 insertions(+), 45 deletions(-)

diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index c1be4f3..b0270ee 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -18,7 +18,7 @@
       :style="{ top: `${isMove ? y : calcY()}px` }"
     >
       <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
-      <div style="position:absolute;top:20px;left:0;right:0;bottom:0;overflow-y:auto">
+      <div style="position:absolute;top:20px;left:0;right:0;bottom:0;overflow-y:auto;padding:20px">
         <slot></slot>
       </div>
     </div>
@@ -140,6 +140,7 @@ export default {
   bottom: 0;
   overflow-x: hidden;
   overflow-y: hidden;
+  z-index: 10;
 }
 
 .bottom-sheet-bg {
diff --git a/src/components/RoomInfoBottomSheet.vue b/src/components/RoomInfoBottomSheet.vue
index 7bc0187..95b7619 100644
--- a/src/components/RoomInfoBottomSheet.vue
+++ b/src/components/RoomInfoBottomSheet.vue
@@ -1,10 +1,7 @@
 <template>
-  <SwipeableBottomSheet
-    class="bottom-sheet"
-    ref="roomInfoSheet"
-    :halfY="0.5"
-    :openY="0.1"
-    :data-closed="closed ? 1 : 0"
+  <BottomSheet
+    class="room-info-bottom-sheet"
+    ref="sheet"
   >
     <div class="room-info-sheet" ref="roomInfoSheetContent">
       <div class="text-center current-room">
@@ -33,11 +30,11 @@
           >Create group</v-btn
         >
     </div>
-  </SwipeableBottomSheet>
+  </BottomSheet>
 </template>
 
 <script>
-import SwipeableBottomSheet from "vue-swipeable-bottom-sheet/src/components/SwipeableBottomSheet";
+import BottomSheet from "./BottomSheet";
 import RoomList from "./RoomList.vue";
 import roomInfoMixin from "./roomInfoMixin";
 
@@ -45,35 +42,16 @@ export default {
   name: "RoomInfoBottomSheet",
   mixins: [roomInfoMixin],
   components: {
-    SwipeableBottomSheet,
+    BottomSheet,
     RoomList,
   },
-  data() {
-    return {
-      closed: true
-    }
-  },
-  mounted() {
-    this.$watch(
-      "$refs.roomInfoSheet.state",
-      (new_value, ignored_old_value) => {
-        this.closed = new_value == 'close';
-      }
-    );
-  },
   methods: {
     open() {
-      if (this.$refs.roomInfoSheet.state == "half") {
-        this.$refs.roomInfoSheet.setState("close");
-      } else {
-        // Reset scroll before opening!
-        this.$refs.roomInfoSheetContent.parentElement.scrollTop = 0;
-        this.$refs.roomInfoSheet.setState("half");
-      }
+      this.$refs.sheet.open();
     },
 
     close() {
-      this.$refs.roomInfoSheet.setState("close");
+      this.$refs.sheet.close();
     },
 
     showDetails() {
@@ -92,18 +70,4 @@ export default {
 
 <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>
\ No newline at end of file