Merge pull request #15294 from opf/bug/54307-show-dialogs-in-the-cent…

…er-of-the-screen-on-mobile [54307] Show dialogs in the center of the screen on mobile
opf · Apr 17, 2024 · d4d14a4 · d4d14a4
2 parents d15b7f9 + 1707df6
commit d4d14a4
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 4 deletions.
diff --git a/...features/work-packages/components/wp-buttons/wp-share-button/wp-share-button.component.ts b/...features/work-packages/components/wp-buttons/wp-share-button/wp-share-button.component.ts
@@ -84,7 +84,7 @@ export class WorkPackageShareButtonComponent extends UntilDestroyedMixin impleme
   }
 
   openModal():void {
-    this.opModalService.show(WorkPackageShareModalComponent, 'global', { workPackage: this.workPackage });
+    this.opModalService.show(WorkPackageShareModalComponent, 'global', { workPackage: this.workPackage }, false, true);
   }
 
   private countShares():Observable<number> {

diff --git a/...nd/src/app/features/work-packages/components/wp-fast-table/builders/share-cell-builder.ts b/...nd/src/app/features/work-packages/components/wp-fast-table/builders/share-cell-builder.ts
@@ -52,6 +52,6 @@ export class ShareCellbuilder {
   }
 
   private showShareModal(workPackage:WorkPackageResource) {
-    this.opModalService.show(WorkPackageShareModalComponent, 'global', { workPackage });
+    this.opModalService.show(WorkPackageShareModalComponent, 'global', { workPackage }, false, true);
   }
 }
diff --git a/frontend/src/app/shared/components/modal/modal-overlay.component.html b/frontend/src/app/shared/components/modal/modal-overlay.component.html
@@ -2,6 +2,7 @@
   class="spot-modal-overlay"
   [class.spot-modal-overlay_active]="(activeModalInstance$ | async) !== null"
   [class.spot-modal-overlay_not-full-screen]="notFullscreen"
+  [class.spot-modal-overlay_top]="mobileTopPosition"
   #overlay
   tabindex="0"
   cdkFocusInitial

diff --git a/frontend/src/app/shared/components/modal/modal-overlay.component.ts b/frontend/src/app/shared/components/modal/modal-overlay.component.ts
@@ -55,6 +55,8 @@ export const opModalOverlaySelector = 'op-modal-overlay';
 export class OpModalOverlayComponent {
   public notFullscreen = false;
 
+  mobileTopPosition = false;
+
   public portalOutlet:CdkPortalOutlet;
 
   @ViewChild(CdkPortalOutlet) set portalOutletContainer(v:CdkPortalOutlet) {
@@ -124,8 +126,9 @@ export class OpModalOverlayComponent {
   }
 
   private createAndAttachPortalInstance(data:ModalData):void {
-    const { modal, injector, notFullscreen } = data;
+    const { modal, injector, notFullscreen, mobileTopPosition } = data;
     this.notFullscreen = notFullscreen;
+    this.mobileTopPosition = mobileTopPosition;
     const portal = new ComponentPortal(modal, null, injector);
     const ref = this.portalOutlet.attach(portal);
     const instance = ref.instance;

diff --git a/frontend/src/app/shared/components/modal/modal.service.ts b/frontend/src/app/shared/components/modal/modal.service.ts
@@ -43,6 +43,7 @@ export interface ModalData {
   modal:ComponentType<OpModalComponent>;
   injector:Injector;
   notFullscreen:boolean;
+  mobileTopPosition:boolean;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -72,12 +73,14 @@ export class OpModalService {
    *                 Can be passed 'global' to take the default (global!) injector of this service.
    * @param locals A map to be injected via token into the component.
    * @param notFullscreen
+   * @param mobileTopPosition
    */
   public show<T extends OpModalComponent>(
     modal:ComponentType<T>,
     injector:Injector|'global',
     locals:Record<string, unknown> = {},
     notFullscreen = false,
+    mobileTopPosition = false,
   ):Observable<T> {
     this.close();
 
@@ -90,6 +93,7 @@ export class OpModalService {
       modal,
       injector: this.injectorFor(injector, locals),
       notFullscreen,
+      mobileTopPosition,
     });
 
     return this.activeModalInstance$

diff --git a/frontend/src/app/spot/styles/sass/components/modal-overlay.sass b/frontend/src/app/spot/styles/sass/components/modal-overlay.sass
@@ -15,12 +15,17 @@
     flex-direction: column-reverse
 
     @media (max-width: 680px)
-      justify-content: flex-end
+      justify-content: center
 
     @media (max-height: 480px)
       // reorder elements to be displayed in row on very small heights
       flex-direction: row-reverse
 
+  &_top
+    @media (max-width: 680px)
+      justify-content: flex-end
+      padding-top: 10px
+
   &_not-full-screen
     background: transparent
     right: unset