fix(toastr): move toastr overlay in front of other overlays (#2078)

akveo · Nov 14, 2019 · 906d3c0 · 906d3c0
1 parent 1d52a20
commit 906d3c0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/framework/theme/components/toastr/_toast.component.theme.scss b/src/framework/theme/components/toastr/_toast.component.theme.scss
@@ -63,4 +63,7 @@
  }
  }
  }
+ .toastr-overlay-container {
+ z-index: 1041;
+ }
 }
diff --git a/src/framework/theme/components/toastr/toastr.service.spec.ts b/src/framework/theme/components/toastr/toastr.service.spec.ts
@@ -45,11 +45,18 @@ describe('toastr-component', () => {
  fixture = TestBed.createComponent(NbToastrTestComponent);
  }));
 
+ it('should add \'toastr-overlay-container\' class to overlay', () => {
+ fixture.debugElement.componentInstance.showToast('toast-test-class');
+ fixture.detectChanges();
+ expect(fixture.nativeElement.querySelector('.cdk-global-overlay-wrapper').classList)
+ .toContain('toastr-overlay-container');
+ });
+
  it('should set class if provided', () => {
  fixture.debugElement.componentInstance.showToast('toast-test-class');
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('.toast-test-class')).toBeTruthy();
- })
+ });
 });
 
 describe('toastr-service', () => {
@@ -188,6 +195,11 @@ describe('toastr-container-registry', () => {
  }
  },
  dispose() {},
+ hostElement: {
+ classList: {
+ add() {},
+ },
+ },
  };
 
  overlayStub = {

diff --git a/src/framework/theme/components/toastr/toastr.service.ts b/src/framework/theme/components/toastr/toastr.service.ts
@@ -171,13 +171,18 @@ export class NbToastrContainerRegistry {
  protected createContainer(position: NbGlobalLogicalPosition): NbToastrOverlayWithContainer {
  const positionStrategy = this.positionBuilder.global().position(position);
  const ref = this.overlay.create({ positionStrategy });
+ this.addClassToOverlayHost(ref);
  const containerRef = ref.attach(new NbComponentPortal(NbToastrContainerComponent, null, null, this.cfr));
  return {
  overlayRef: ref,
  toastrContainer: new NbToastContainer(position, containerRef, this.positionHelper),
  };
  }
 
+ protected addClassToOverlayHost(overlayRef: NbOverlayRef) {
+ overlayRef.hostElement.classList.add('toastr-overlay-container');
+ }
+
  protected existsInDom(toastContainer: NbToastContainer): boolean {
  return this.document.body.contains(toastContainer.nativeElement);
  }