fix(theme-shared): fix modal styles and animations

7 years ago · 093e62eb64
5 changed files with 90 additions and 69 deletions
--- a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
@ -1,79 +1,74 @@
 import { animate, animation, style } from '@angular/animations';

-export const fadeIn = animation(
-  [style({ opacity: '0', display: '{{ display }}' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))],
-  { params: { time: '350ms', easing: 'ease', display: 'block' } }
-);
+export const fadeIn = animation([style({ opacity: '0' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], {
+  params: { time: '350ms', easing: 'ease' },
+});

 export const fadeOut = animation(
-  [
-    style({ opacity: '1' }),
-    animate('{{ time}} {{ easing }}', style({ opacity: '0' })),
-    style({ opacity: '0', display: 'none' })
-  ],
-  { params: { time: '350ms', easing: 'ease' } }
+  [style({ opacity: '1' }), animate('{{ time}} {{ easing }}', style({ opacity: '0' }))],
+  { params: { time: '350ms', easing: 'ease' } },
 );

 export const fadeInDown = animation(
  [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateY(-20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeInUp = animation(
  [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateY(20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeInLeft = animation(
  [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateX(20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeInRight = animation(
  [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateX(-20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeOutDown = animation(
  [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateY(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeOutUp = animation(
  [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateY(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeOutLeft = animation(
  [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateX(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );

 export const fadeOutRight = animation(
  [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateX(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' })),
  ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
@ -1,14 +1,12 @@
-import { trigger, state, style, transition, useAnimation } from '@angular/animations';
-import { fadeInDown, fadeOut, fadeIn } from '../../animations';
+import { transition, trigger, useAnimation } from '@angular/animations';
+import { fadeIn, fadeInDown, fadeOut } from '../../animations/fade.animations';

 export const backdropAnimation = trigger('backdrop', [
-  state('void', style({ opacity: '0' })),
-  state('*', style({ opacity: '1' })),
-  transition('void => *', useAnimation(fadeIn)),
-  transition('* => void', useAnimation(fadeOut))
+  transition(':enter', useAnimation(fadeIn)),
+  transition(':leave', useAnimation(fadeOut)),
 ]);

 export const dialogAnimation = trigger('dialog', [
-  transition('void => *', useAnimation(fadeInDown)),
-  transition('* => void', useAnimation(fadeOut))
+  transition(':enter', useAnimation(fadeInDown)),
+  transition(':leave', useAnimation(fadeOut)),
 ]);
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@ -1,21 +1,29 @@
-<div class="modal {{ modalClass }}" tabindex="-1" role="dialog" *ngIf="visible">
-  <div class="modal-backdrop" [@backdrop]="visible" (click)="close()"></div>
-  <div id="abp-modal-dialog" class="modal-dialog modal-{{ size }}" role="document" [@dialog]="visible" #abpModalContent>
-    <div id="abp-modal-content" class="modal-content">
-      <div id="abp-modal-header" class="modal-header">
-        <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
-
-        <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div id="abp-modal-body" class="modal-body">
-        <ng-container *ngTemplateOutlet="abpBody"></ng-container>
-      </div>
-      <div id="abp-modal-footer" class="modal-footer">
-        <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
+<ng-container *ngIf="visible">
+  <div class="modal show {{ modalClass }}" tabindex="-1" role="dialog">
+    <div class="modal-backdrop" [@backdrop]="isModalOpen" (click)="close()"></div>
+    <div
+      id="abp-modal-dialog"
+      class="modal-dialog modal-{{ size }}"
+      role="document"
+      [@dialog]="isModalOpen"
+      #abpModalContent
+    >
+      <div id="abp-modal-content" class="modal-content">
+        <div id="abp-modal-header" class="modal-header">
+          <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
+          
+          <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div id="abp-modal-body" class="modal-body">
+          <ng-container *ngTemplateOutlet="abpBody"></ng-container>
+        </div>
+        <div id="abp-modal-footer" class="modal-footer">
+          <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
+        </div>
      </div>
    </div>
+    <ng-content></ng-content>
  </div>
-  <ng-content></ng-content>
-</div>
+</ng-container>
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@ -9,12 +9,12 @@ import {
  Renderer2,
  TemplateRef,
  ViewChild,
-  ViewChildren
+  ViewChildren,
 } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { Toaster } from '../../models/toaster';
-import { ConfirmationService } from '../../services';
+import { ConfirmationService } from '../../services/confirmation.service';
 import { ButtonComponent } from '../button/button.component';
 import { backdropAnimation, dialogAnimation } from './modal.animations';

@ -23,7 +23,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@Component({
  selector: 'abp-modal',
  templateUrl: './modal.component.html',
-  animations: [backdropAnimation, dialogAnimation]
+  animations: [backdropAnimation, dialogAnimation],
 })
 export class ModalComponent implements OnDestroy {
  @Input()
@ -32,7 +32,11 @@ export class ModalComponent implements OnDestroy {
  }
  set visible(value: boolean) {
    if (typeof value !== 'boolean') return;
+
+    this.isModalOpen = value;
    this._visible = value;
+    this.visibleChange.emit(value);
+
    if (value) {
      this.listen();
      this.renderer.addClass(document.body, 'modal-open');
@ -89,6 +93,8 @@ export class ModalComponent implements OnDestroy {

  _busy = false;

+  isModalOpen = false;
+
  isConfirmationOpen = false;

  destroy$ = new Subject<void>();
@ -103,7 +109,7 @@ export class ModalComponent implements OnDestroy {
    if (this.busy) return;

    const nodes = getFlatNodes(
-      (this.modalContent.nativeElement.querySelector('#abp-modal-body') as HTMLElement).childNodes
+      (this.modalContent.nativeElement.querySelector('#abp-modal-body') as HTMLElement).childNodes,
    );

    if (hasNgDirty(nodes)) {
@ -128,7 +134,7 @@ export class ModalComponent implements OnDestroy {
      .pipe(
        takeUntil(this.destroy$),
        debounceTime(150),
-        filter((key: KeyboardEvent) => key && key.code === 'Escape')
+        filter((key: KeyboardEvent) => key && key.code === 'Escape'),
      )
      .subscribe(_ => {
        this.close();
@ -139,7 +145,7 @@ export class ModalComponent implements OnDestroy {
      fromEvent(this.abpClose.nativeElement, 'click')
        .pipe(
          takeUntil(this.destroy$),
-          filter(() => !!this.modalContent)
+          filter(() => !!this.modalContent),
        )
        .subscribe(() => this.close());
    }, 0);
@ -151,7 +157,7 @@ export class ModalComponent implements OnDestroy {
 function getFlatNodes(nodes: NodeList): HTMLElement[] {
  return Array.from(nodes).reduce(
    (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val])],
-    []
+    [],
  );
 }

--- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
@ -28,8 +28,22 @@ export default `
  min-width: 215px;
 }

-.modal {
- background-color: rgba(0, 0, 0, .6);
+.modal.show {
+  display: block !important;
+}
+
+.modal-backdrop {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: rgba(0, 0, 0, .6) !important;
+  z-index: 1040 !important;
+}
+
+.modal-dialog {
+  z-index: 1050 !important;
 }

 .abp-ellipsis-inline {