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
-        size="small"
-        elevation="0"
-        @click.stop="onBackgroundClick"
-        class="bottom-sheet-close"
-        v-if="showCloseButton"
-        icon="cancel"
-      >
-      </v-btn>
-      <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
+      <v-container>
+        <v-row justify="end">
+          <v-col cols="1" class="text-right">
+            <v-btn
+              size="small"
+              elevation="0"
+              @click.stop="onBackgroundClick"
+              icon="close"
+            >
+            </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,
-      y: 0,
-      startY: 0,
-      startYCoord: 0,
-      isMove: false,
-      state: this.defaultState,
-      rect: {},
+      state: "closed"
     };
   },
-  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 {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-    z-index: 1;
+  &[data-state="small"], &[data-state="open"], &[data-state="closed"] {
+    transition: top 0.3s ease-out;
   }
 
   @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>