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

@@ -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 {

src/components/RoomInfoBottomSheet.vue

@@ -1,10 +1,7 @@
 <template>
-  <SwipeableBottomSheet
+  <BottomSheet
-    class="bottom-sheet"
+    class="room-info-bottom-sheet"
-    ref="roomInfoSheet"
+    ref="sheet"
-    :halfY="0.5"
-    :openY="0.1"
-    :data-closed="closed ? 1 : 0"
   >
     <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.sheet.open();
-        this.$refs.roomInfoSheet.setState("close");
-      } else {
-        // Reset scroll before opening!
-        this.$refs.roomInfoSheetContent.parentElement.scrollTop = 0;
-        this.$refs.roomInfoSheet.setState("half");
-      }
     },
 
     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>