Merge pull request #987 from deckgo/click-to-open-bottom-sheet

feat: open bottom sheet on click on indicator

Author: peterpeterparker

studio/src/app/components/editor/actions/footer/app-bottom-sheet/app-bottom-sheet.scss

@@ -41,15 +41,27 @@ app-bottom-sheet {
       padding-top: 32px;
     }
 
-    > div.sheet-indicator {
+    > button.sheet-indicator {
       position: absolute;
-      top: 8px;
+      top: 0;
       left: 50%;
-      transform: translate(0, -50%);
-      width: 16px;
-      height: 4px;
-      background: rgba(var(--ion-color-light-rgb), 0.4);
-      border-radius: 16px;
+
+      padding: 8px;
+
+      outline: none;
+      border: none;
+
+      background: transparent;
+
+      > div {
+        display: block;
+
+        background: rgba(var(--ion-color-light-rgb), 0.4);
+        border-radius: 16px;
+
+        width: 16px;
+        height: 4px;
+      }
     }
   }
 }

studio/src/app/components/editor/actions/footer/app-bottom-sheet/app-bottom-sheet.tsx

@@ -40,61 +40,43 @@ export class AppBottomSheet {
   }
 
   private initWindowResize() {
-    if (window) {
-      window.addEventListener('resize', debounce(this.onWindowResize));
-    }
+    window?.addEventListener('resize', debounce(this.onWindowResize));
   }
 
   private removeWindowResize() {
-    if (window) {
-      window.removeEventListener('resize', debounce(this.onWindowResize));
-    }
+    window?.removeEventListener('resize', debounce(this.onWindowResize));
   }
 
   private onWindowResize = async () => {
     await this.initSize();
   };
 
-  private initSize(): Promise<void> {
-    return new Promise<void>((resolve) => {
-      this.bottomSheetTop = this.bottomSheetMinHeight;
-      this.heightOffset = this.content.offsetHeight || this.el.offsetHeight;
-      this.contentHeight = window.innerHeight || screen.height;
-
-      resolve();
-    });
+  private async initSize() {
+    this.bottomSheetTop = this.bottomSheetMinHeight;
+    this.heightOffset = this.content.offsetHeight || this.el.offsetHeight;
+    this.contentHeight = window.innerHeight || screen.height;
   }
 
-  private init(): Promise<void> {
-    return new Promise<void>((resolve) => {
-      if (!this.container) {
-        resolve();
-        return;
-      }
-
-      this.container.addEventListener('mousedown', this.startEvent, {passive: false});
-      this.container.addEventListener('touchstart', this.startEvent, {passive: false});
-      document.addEventListener('mouseup', this.endEvent, {passive: false});
-      document.addEventListener('touchend', this.endEvent, {passive: false});
+  private async init() {
+    if (!this.container) {
+      return;
+    }
 
-      resolve();
-    });
+    this.container.addEventListener('mousedown', this.startEvent, {passive: false});
+    this.container.addEventListener('touchstart', this.startEvent, {passive: false});
+    document.addEventListener('mouseup', this.endEvent, {passive: false});
+    document.addEventListener('touchend', this.endEvent, {passive: false});
   }
 
-  private destroy(): Promise<void> {
-    return new Promise<void>((resolve) => {
-      if (!this.container) {
-        resolve();
-        return;
-      }
-
-      this.container.removeEventListener('mousedown', this.startEvent, true);
-      this.container.removeEventListener('touchstart', this.startEvent, true);
-      document.removeEventListener('mouseup', this.endEvent, true);
-      document.removeEventListener('touchend', this.endEvent, true);
+  private async destroy() {
+    if (!this.container) {
+      return;
+    }
 
-      resolve();
-    });
+    this.container.removeEventListener('mousedown', this.startEvent, true);
+    this.container.removeEventListener('touchstart', this.startEvent, true);
+    document.removeEventListener('mouseup', this.endEvent, true);
+    document.removeEventListener('touchend', this.endEvent, true);
   }
 
   private startEvent = ($event: MouseEvent | TouchEvent) => {
@@ -138,6 +120,16 @@ export class AppBottomSheet {
     this.sheetChanged.emit(this.bottomSheetTop === this.bottomSheetMinHeight ? 'close' : 'open');
   }
 
+  private toggle($event: UIEvent) {
+    $event.stopPropagation();
+
+    this.bottomSheetTop = this.bottomSheetTop === this.bottomSheetMinHeight ? this.content.offsetHeight : this.bottomSheetMinHeight;
+
+    this.startY = undefined;
+
+    this.sheetChanged.emit(this.bottomSheetTop === this.bottomSheetMinHeight ? 'close' : 'open');
+  }
+
   render() {
     return (
       <Host
@@ -146,7 +138,9 @@ export class AppBottomSheet {
           '--contentheight': `${this.contentHeight}px`,
         }}>
         <div class="container" ref={(el) => (this.container = el)}>
-          <div class="sheet-indicator"></div>
+          <button class="sheet-indicator" onClick={($event: UIEvent) => this.toggle($event)}>
+            <div></div>
+          </button>
           <div class="content" ref={(el) => (this.content = el)}>
             <slot></slot>
           </div>