Merge pull request #2250 from abpframework/fix/theme-shared/modal

fix(theme-shared): modal animations, backdrop height

npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -17,15 +17,17 @@ export class BreadcrumbComponent implements OnInit {
   ngOnInit(): void {
     this.show = !!this.store.selectSnapshot(state => state.LeptonLayoutState);
     if (this.show) {
-      const splittedUrl = this.router.url.split('/').filter(chunk => chunk);
+      let splittedUrl = this.router.url.split('/').filter(chunk => chunk);
 
-      const currentUrl: ABP.FullRoute =
-        this.store.selectSnapshot(ConfigState.getRoute(splittedUrl[0])) ||
-        this.store.selectSnapshot(ConfigState.getRoute(null, null, this.router.url));
+      let currentUrl: ABP.FullRoute = this.store.selectSnapshot(ConfigState.getRoute(splittedUrl[0]));
 
       if (!currentUrl) {
-        this.show = false;
-        return;
+        currentUrl = this.store.selectSnapshot(ConfigState.getRoute(null, null, this.router.url));
+        splittedUrl = [this.router.url];
+        if (!currentUrl) {
+          this.show = false;
+          return;
+        }
       }
 
       this.segments.push(currentUrl.name);

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html

@@ -1,30 +1,34 @@
-<ng-container *ngIf="visible">
-  <div id="modal-container" class="modal show {{ modalClass }}" tabindex="-1" role="dialog">
-    <div class="modal-backdrop" [@fade]="isModalOpen" (click)="close()"></div>
-    <div
-      id="abp-modal-dialog"
-      class="modal-dialog modal-{{ size }}"
-      role="document"
-      [class.modal-dialog-centered]="centered"
-      [@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
+  *ngIf="visible"
+  [@fade]="isModalOpen"
+  id="modal-container"
+  class="modal show {{ modalClass }}"
+  tabindex="-1"
+  role="dialog"
+>
+  <div class="modal-backdrop" (click)="close()"></div>
+  <div
+    id="abp-modal-dialog"
+    class="modal-dialog modal-{{ size }}"
+    role="document"
+    [class.modal-dialog-centered]="centered"
+    #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>
-    <ng-content></ng-content>
   </div>
-</ng-container>
+  <ng-content></ng-content>
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
-import { dialogAnimation, fadeAnimation } from '../../animations/modal.animations';
+import { fadeAnimation } from '../../animations/modal.animations';
 import { Toaster } from '../../models/toaster';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { ButtonComponent } from '../button/button.component';
@@ -23,7 +23,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
-  animations: [fadeAnimation, dialogAnimation],
+  animations: [fadeAnimation],
 })
 export class ModalComponent implements OnDestroy {
   @Input()

npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts

@@ -45,15 +45,27 @@ export default `
 }
 
 .modal-backdrop {
-  position: absolute !important;
+  position: fixed !important;
   top: 0 !important;
   left: 0 !important;
-  width: 100% !important;
+  width: calc(100% - 7px) !important;
   height: 100% !important;
   background-color: rgba(0, 0, 0, 0.6) !important;
   z-index: 1040 !important;
 }
 
+.modal::-webkit-scrollbar {
+  width: 7px;
+}
+
+.modal::-webkit-scrollbar-track {
+  background: #ddd;
+}
+
+.modal::-webkit-scrollbar-thumb {
+  background: #8a8686;
+}
+
 .modal-dialog {
   z-index: 1050 !important;
 }

npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts

@@ -22,7 +22,7 @@ describe('ConfirmationService', () => {
   let service: ConfirmationService;
   const createComponent = createComponentFactory({
     component: DummyComponent,
-    imports: [CoreModule, ThemeSharedModule, NgxsModule.forRoot(), RouterTestingModule],
+    imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot(), RouterTestingModule],
     providers: [MessageService],
   });
 

npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts

@@ -77,18 +77,21 @@ describe('ModalComponent', () => {
     expect(disappearFn).toHaveBeenCalled();
   });
 
-  it('should open the confirmation popup and works correct', () => {
-    spectator.click('#abp-modal-close-button');
-    expect(disappearFn).not.toHaveBeenCalled();
+  it('should open the confirmation popup and works correct', done => {
+    setTimeout(() => {
+      spectator.click('#abp-modal-close-button');
+      expect(disappearFn).not.toHaveBeenCalled();
 
-    expect(spectator.query('p-toast')).toBeTruthy();
-    spectator.click('button#cancel');
-    expect(spectator.query('div.modal')).toBeTruthy();
+      expect(spectator.query('p-toast')).toBeTruthy();
+      spectator.click('button#cancel');
+      expect(spectator.query('div.modal')).toBeTruthy();
 
-    spectator.click('#abp-modal-close-button');
-    spectator.click('button#confirm');
-    expect(spectator.query('div.modal')).toBeFalsy();
-    expect(disappearFn).toHaveBeenCalled();
+      spectator.click('#abp-modal-close-button');
+      spectator.click('button#confirm');
+      expect(spectator.query('div.modal')).toBeFalsy();
+      expect(disappearFn).toHaveBeenCalled();
+      done();
+    }, 100);
   });
 
   it('should close with the abpClose', done => {

npm/ng-packs/packages/theme-shared/src/lib/tests/toaster.service.spec.ts

@@ -1,12 +1,11 @@
 import { CoreModule } from '@abp/ng.core';
 import { Component } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { NgxsModule } from '@ngxs/store';
+import { MessageService } from 'primeng/components/common/messageservice';
 import { ToasterService } from '../services/toaster.service';
 import { ThemeSharedModule } from '../theme-shared.module';
-import { RouterModule } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import { MessageService } from 'primeng/components/common/messageservice';
 
 @Component({
   selector: 'abp-dummy',
@@ -23,7 +22,7 @@ describe('ToasterService', () => {
   let service: ToasterService;
   const createComponent = createComponentFactory({
     component: DummyComponent,
-    imports: [CoreModule, ThemeSharedModule, NgxsModule.forRoot(), RouterTestingModule],
+    imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot(), RouterTestingModule],
     providers: [MessageService],
   });
 
@@ -63,7 +62,10 @@ describe('ToasterService', () => {
   });
 
   it('should display multiple toasts', () => {
-    service.addAll([{ summary: 'summary1', detail: 'detail1' }, { summary: 'summary2', detail: 'detail2' }]);
+    service.addAll([
+      { summary: 'summary1', detail: 'detail1' },
+      { summary: 'summary2', detail: 'detail2' },
+    ]);
     spectator.detectChanges();
     expect(spectator.queryAll('div.ui-toast-summary').map(node => node.textContent.trim())).toEqual([
       'summary1',

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -14,7 +14,7 @@ import { ModalComponent } from './components/modal/modal.component';
 import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component';
 import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component';
 import { ToastComponent } from './components/toast/toast.component';
-import styles from './contants/styles';
+import styles from './constants/styles';
 import { TableSortDirective } from './directives/table-sort.directive';
 import { ErrorHandler } from './handlers/error.handler';
 import { chartJsLoaded$ } from './utils/widget-utils';
@@ -29,16 +29,7 @@ export function appendScript(injector: Injector) {
     import('chart.js').then(() => chartJsLoaded$.next(true));
 
     const lazyLoadService: LazyLoadService = injector.get(LazyLoadService);
-
-    return forkJoin(
-      lazyLoadService.load(
-        null,
-        'style',
-        styles,
-        'head',
-        'afterbegin',
-      ) /* lazyLoadService.load(null, 'script', scripts) */,
-    ).toPromise();
+    return lazyLoadService.load(null, 'style', styles, 'head', 'afterbegin').toPromise();
   };
 
   return fn;
@@ -75,6 +66,8 @@ export function appendScript(injector: Injector) {
   entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {
+  constructor(private errorHandler: ErrorHandler) {}
+
   static forRoot(options = {} as RootParams): ModuleWithProviders {
     return {
       ngModule: ThemeSharedModule,
@@ -82,7 +75,7 @@ export class ThemeSharedModule {
         {
           provide: APP_INITIALIZER,
           multi: true,
-          deps: [Injector, ErrorHandler],
+          deps: [Injector],
           useFactory: appendScript,
         },
         { provide: MessageService, useClass: MessageService },