feat: Response mobile layout support v1

toju-app/src/app/domains/plugins/feature/plugin-action-menu/plugin-action-menu.service.ts

@@ -15,6 +15,7 @@ import {
   fromEvent
 } from 'rxjs';
 import { PluginActionMenuComponent } from './plugin-action-menu.component';
+import { ViewportService } from '../../../../core/platform';
 
 const GAP = 10;
 const VIEWPORT_MARGIN = 8;
@@ -28,6 +29,7 @@ const POSITIONS: ConnectedPosition[] = [
 @Injectable({ providedIn: 'root' })
 export class PluginActionMenuService {
   private readonly overlay = inject(Overlay);
+  private readonly viewport = inject(ViewportService);
   private currentOrigin: HTMLElement | null = null;
   private overlayRef: OverlayRef | null = null;
   private overlaySubscriptions: Subscription | null = null;
@@ -47,20 +49,38 @@ export class PluginActionMenuService {
     }
 
     const elementRef = origin instanceof ElementRef ? origin : new ElementRef(origin);
+    const isMobile = this.viewport.isMobile();
 
     this.currentOrigin = rawEl;
 
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(elementRef)
-      .withPositions(POSITIONS)
-      .withViewportMargin(VIEWPORT_MARGIN)
-      .withPush(true);
+    if (isMobile) {
+      const positionStrategy = this.overlay
+        .position()
+        .global()
+        .left('0')
+        .right('0')
+        .bottom('0');
 
-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.noop()
-    });
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.block(),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-dark-backdrop',
+        panelClass: 'metoyou-bottom-sheet-panel'
+      });
+    } else {
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(elementRef)
+        .withPositions(POSITIONS)
+        .withViewportMargin(VIEWPORT_MARGIN)
+        .withPush(true);
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.noop()
+      });
+    }
 
     this.syncThemeVars();
 
@@ -68,6 +88,14 @@ export class PluginActionMenuService {
     const subscriptions = new Subscription();
 
     subscriptions.add(componentRef.instance.closed.subscribe(() => this.close()));
+
+    if (isMobile) {
+      subscriptions.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+      this.overlaySubscriptions = subscriptions;
+
+      return;
+    }
+
     subscriptions.add(fromEvent<PointerEvent>(document, 'pointerdown')
       .pipe(
         filter((event) => {