BottomSheet: design update

src/components/BottomSheet.vue

@@ -13,20 +13,22 @@
     </v-fade-transition>
     <div
       class="bottom-sheet-content"
-      :data-state="isMove ? 'move' : state"
+      :data-state="state"
       ref="pan"
-      :style="{ top: `${isMove ? y : calcY()}px` }"
     >
-      <v-btn
+      <v-container>
-        size="small"
+        <v-row justify="end">
-        elevation="0"
+          <v-col cols="1" class="text-right">
-        @click.stop="onBackgroundClick"
+            <v-btn
-        class="bottom-sheet-close"
+              size="small"
-        v-if="showCloseButton"
+              elevation="0"
-        icon="cancel"
+              @click.stop="onBackgroundClick"
-      >
+              icon="close"
-      </v-btn>
+            >
-      <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
       <div ref="sheetContent" class="sheetContent">
         <slot></slot>
       </div>
@@ -35,102 +37,13 @@
 </template>
 
 <script>
-import Hammer from "hammerjs";
-
 export default {
-  props: {
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    openY: {
-      type: Number,
-      default: 0.1,
-    },
-    halfY: {
-      type: Number,
-      default: 0.5,
-    },
-    defaultState: {
-      type: String,
-      default: "closed",
-    },
-  },
   data() {
     return {
-      mc: null,
+      state: "closed"
-      y: 0,
-      startY: 0,
-      startYCoord: 0,
-      isMove: false,
-      state: this.defaultState,
-      rect: {},
     };
   },
-  mounted() {
-    window.onresize = () => {
-      this.rect = this.$refs.sheet.getBoundingClientRect();
-    };
-    this.rect = this.$refs.sheet.getBoundingClientRect();
-
-    this.mc = new Hammer(this.$refs.pan);
-    this.mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
-
-    const self = this;
-
-    this.mc.on("panup pandown", (evt) => {
-      self.y = self.startYCoord - (self.startY - evt.center.y);
-    });
-
-    this.mc.on("panstart", (evt) => {
-      self.startY = evt.center.y;
-      self.startYCoord = this.calcY();
-      self.isMove = true;
-    });
-
-    this.mc.on("pancancel", (ignoredEvt) => {
-      self.y = self.startYCoord;
-      self.isMove = false;
-    });
-
-    this.mc.on("panend", (evt) => {
-      self.isMove = false;
-
-      switch (self.state) {
-        case "small":
-          if (self.startY - evt.center.y > 120) {
-            self.state = "open";
-          }
-
-          if (self.startY - evt.center.y < -50) {
-            self.state = "closed";
-          }
-          break;
-        case "open":
-          if (self.startY - evt.center.y < -120) {
-            self.state = "small";
-          }
-          break;
-      }
-    });
-  },
-  beforeUnmount() {
-    this.mc.destroy();
-    window.onresize = null;
-  },
   methods: {
-    calcY() {
-      switch (this.state) {
-        case "closed":
-          return this.rect.height;
-        case "open":
-          return this.rect.height * this.openY;
-        case "small":
-          return this.rect.height * this.halfY;
-        default:
-          return this.y;
-      }
-    },
     open() {
       this.setState("small");
     },
@@ -167,11 +80,13 @@ export default {
 
 .sheetContent {
   position:absolute;
-  top:20px;left:0;
+  top: 60px;
+  padding: 0 20px 20px 20px;
+  left:0;
   right:0;
   bottom:0;
   overflow-y:auto;
-  padding:20px;
+  border-top: 1px solid #E1E1E1;
 }
 
 .bottom-sheet {
@@ -194,23 +109,9 @@ export default {
   background-color: rgba(black, 0.4);
 }
 
-.bottom-sheet-handle {
-  height: 20px;
-  background-color: white;
-  position: relative;
-  .bottom-sheet-handle-decoration {
-    background-color: #cccccc;
-    height: 2px;
-    position: absolute;
-    top: 50%;
-    left: 30%;
-    right: 30%;
-  }
-}
-
 .bottom-sheet-content {
   position: absolute;
-  top: 0px;
+  top: 100px;
   bottom: 0px;
   left: 0;
   right: 0;
@@ -218,11 +119,8 @@ export default {
   background-color: white;
   overflow: hidden;
 
-  .bottom-sheet-close {
+  &[data-state="small"], &[data-state="open"], &[data-state="closed"] {
-    position: absolute;
+    transition: top 0.3s ease-out;
-    right: 4px;
-    top: 4px;
-    z-index: 1;
   }
 
   @media #{map.get($display-breakpoints, 'lg-and-up')} {
@@ -230,16 +128,4 @@ export default {
     width: $dialog-desktop-width;
   }
 }
-
-.bottom-sheet-content[data-state="small"],
-.bottom-sheet-content[data-state="open"],
-.bottom-sheet-content[data-state="closed"] {
-  transition: top 0.3s ease-out;
-}
-
-.bottom-sheet-content[data-state="small"] {
-  @media #{map.get($display-breakpoints, 'lg-and-up')} {
-    top: 100px !important;
-  }
-}
 </style>

src/components/Chat.vue

@@ -244,7 +244,7 @@
       :title="room.name"
     />
 
-    <BottomSheet ref="messageOperationsSheet" halfY="0.1">
+    <BottomSheet ref="messageOperationsSheet">
       <EmojiPicker ref="emojiPicker"
         :native="true"
         @select="emojiSelected"

src/components/RoomInfoBottomSheet.vue

@@ -1,9 +1,7 @@
 <template>
   <BottomSheet
     class="room-info-bottom-sheet"
-    :halfY="0.12"
     ref="sheet"
-    :showCloseButton="false"
   >
     <div class="room-info-sheet" ref="roomInfoSheetContent">
       <room-list v-on:close="close" v-on:newroom="createRoom" :showCreate="!$config.hide_add_room_on_home" />

src/components/StickerPickerBottomSheet.vue

@@ -63,10 +63,6 @@ export default {
 </style>
 
 <style lang="scss">
-  .sheetContent {
-    top: 40px !important;
-    padding: 0 20px 20px 20px !important;
-  }
   .sticker-picker  {
     z-index: 10;
 

src/components/messages/SeenBy.vue

@@ -19,10 +19,7 @@
         <span>{{ $t("message.seen_by_count", seenBy.length) }}</span>
       </v-tooltip>
     </div>
-    <BottomSheet
+    <BottomSheet ref="seenByListBottomSheet">
-      :halfY="0.12"
-      ref="seenByListBottomSheet"
-    >
       <v-list>
         <v-list-subheader class="text-uppercase"> {{ $t("message.seen_by") }}</v-list-subheader>
         <v-list-item v-for="(member, index) in seenBy" :key="index" class="text-left">