fix(dialog): fix dialog with cropper

A-l-y-l-e · Sep 7, 2021 · 88d94bb · 88d94bb
1 parent c46b583
commit 88d94bb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/src/lib/dialog/dialog-container.component.ts b/src/lib/dialog/dialog-container.component.ts
@@ -13,10 +13,20 @@ import {
   Renderer2,
   ElementRef,
   ChangeDetectorRef,
-  DoCheck,
   } from '@angular/core';
 import { state, style, transition, animate, trigger, AnimationEvent } from '@angular/animations';
-import { LyOverlayRef, LyTheme2, ThemeVariables, shadowBuilder, lyl, LyClasses, StyleCollection, StyleTemplate, ThemeRef, StyleRenderer, WithStyles } from '@alyle/ui';
+import {
+  LyOverlayRef,
+  LyTheme2,
+  ThemeVariables,
+  shadowBuilder,
+  lyl,
+  LyClasses,
+  StyleCollection,
+  StyleTemplate,
+  ThemeRef,
+  StyleRenderer,
+  WithStyles } from '@alyle/ui';
 import { Subject } from 'rxjs';
 
 import { LyDialogRef } from './dialog-ref';
@@ -49,6 +59,7 @@ const STYLES = (theme: ThemeVariables & LyDialogVariables, ref: ThemeRef) => {
       border-radius: 4px
       box-shadow: ${shadowBuilder(12)}
       overflow: auto
+      pointer-events: auto
       > :first-child {
         display: flex
         flex-direction: column
@@ -92,7 +103,7 @@ const STYLES = (theme: ThemeVariables & LyDialogVariables, ref: ThemeRef) => {
     StyleRenderer
   ]
 })
-export class LyDialogContainer implements WithStyles, OnInit, DoCheck {
+export class LyDialogContainer implements WithStyles, OnInit {
   /** @docs-private */
   readonly classes = this._theme.addStyleSheet(STYLES, STYLE_PRIORITY);
   private _embeddedViewRef: EmbeddedViewRef<any>;
@@ -150,10 +161,6 @@ export class LyDialogContainer implements WithStyles, OnInit, DoCheck {
     }
   }
 
-  ngDoCheck() {
-    this._overlayRef.onResizeScroll!();
-  }
-
   /** @internal */
   _init(componentFactoryOrTemplate: ComponentFactory<any> | TemplateRef<any>, newInjector: Injector) {
     this._componentFactoryOrTemplate = componentFactoryOrTemplate;

diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
@@ -38,23 +38,17 @@ export class LyDialog {
       componentFactoryOrTemplate = this._componentFactoryResolver.resolveComponentFactory(componentOrTemplateRef);
     }
 
-    const onReziseScroll = () => {
-      // I would have used FlexBox to position, but not,
-      // because it creates a blurring effect in the text
-      // when the `dialog` is opened
-      const dialogContainerElement = overlayRef.containerElement;
-      const x = window.innerWidth / 2 - dialogContainerElement.offsetWidth / 2;
-      const y = window.innerHeight / 2 - dialogContainerElement.offsetHeight / 2;
-      dialogContainerElement.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
-    };
+    const noop = () => {};
 
     const overlayRef = this._overlay.create(LyDialogContainer, null, {
       styles: {
         top: 0,
-        left: 0
+        left: 0,
+        right: 0,
+        bottom: 0
       },
       hasBackdrop: config.hasBackdrop,
-      onResizeScroll: onReziseScroll,
+      onResizeScroll: noop,
       disableClose: config.disableClose,
       backdropClass: config.backdropClass || this._theme.style(STYLES_BACKDROP_DARK),
       fnDestroy: () => {

diff --git a/src/lib/src/dom/overlay-factory.ts b/src/lib/src/dom/overlay-factory.ts
@@ -46,7 +46,7 @@ export class OverlayFactory<T = any> {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      pointerEvents: 'all'
+      pointerEvents: 'none'
     };
     if (config) {
       Object.assign(__styles, config.styles);