From 75d23f4755e0b0b62fe57ca646299c722a2d13b5 Mon Sep 17 00:00:00 2001 From: FourthOf5 Date: Thu, 14 Nov 2019 12:35:44 +0300 Subject: [PATCH] fix(toastr service): add class to toastr overlay with a bigger z-index --- .../cdk/overlay/_overlay.theme.scss | 4 ++ .../components/toastr/toastr.service.spec.ts | 14 +++++- .../theme/components/toastr/toastr.service.ts | 46 +++++++++++-------- 3 files changed, 43 insertions(+), 21 deletions(-) diff --git a/src/framework/theme/components/cdk/overlay/_overlay.theme.scss b/src/framework/theme/components/cdk/overlay/_overlay.theme.scss index 16994e414f..8ff4ea4344 100644 --- a/src/framework/theme/components/cdk/overlay/_overlay.theme.scss +++ b/src/framework/theme/components/cdk/overlay/_overlay.theme.scss @@ -8,6 +8,10 @@ .cdk-overlay-container { z-index: 1040; } + + .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 index 24fb493773..d11a9151bf 100644 --- 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 index 871421b35d..79dc5d7039 100644 --- a/src/framework/theme/components/toastr/toastr.service.ts +++ b/src/framework/theme/components/toastr/toastr.service.ts @@ -4,17 +4,18 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { ComponentFactoryResolver, ComponentRef, Inject, Injectable } from '@angular/core'; - -import { NbComponentPortal, NbOverlayRef } from '../cdk/overlay/mapping'; -import { NbOverlayService, patch } from '../cdk/overlay/overlay-service'; -import { NbPositionBuilderService } from '../cdk/overlay/overlay-position'; -import { NbGlobalLogicalPosition, NbGlobalPosition, NbPositionHelper } from '../cdk/overlay/position-helper'; -import { NbToastrContainerComponent } from './toastr-container.component'; -import { NB_TOASTR_CONFIG, NbToastrConfig } from './toastr-config'; -import { NbToast } from './model'; -import { NbToastComponent } from './toast.component'; -import { NB_DOCUMENT } from '../../theme.options'; +import {ComponentFactoryResolver, ComponentRef, Inject, Injectable} from '@angular/core'; + +import {NbComponentPortal, NbOverlayRef} from '../cdk/overlay/mapping'; +import {NbOverlayService, patch} from '../cdk/overlay/overlay-service'; +import {NbPositionBuilderService} from '../cdk/overlay/overlay-position'; +import {NbGlobalLogicalPosition, NbGlobalPosition, NbPositionHelper} from '../cdk/overlay/position-helper'; +import {NbToastrContainerComponent} from './toastr-container.component'; +import {NB_TOASTR_CONFIG, NbToastrConfig} from './toastr-config'; +import {NbToast} from './model'; +import {NbToastComponent} from './toast.component'; +import {NB_DOCUMENT} from '../../theme.options'; +import {OverlayRef} from '@angular/cdk/overlay'; export class NbToastRef { constructor(private toastContainer: NbToastContainer, @@ -171,6 +172,7 @@ 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, @@ -178,6 +180,10 @@ export class NbToastrContainerRegistry { }; } + protected addClassToOverlayHost(overlayRef: OverlayRef) { + overlayRef.hostElement.classList.add('toastr-overlay-container'); + } + protected existsInDom(toastContainer: NbToastContainer): boolean { return this.document.body.contains(toastContainer.nativeElement); } @@ -266,9 +272,9 @@ export class NbToastrService { * Shows toast with message, title and user config. * */ show(message, title?, userConfig?: Partial): NbToastRef { - const config = new NbToastrConfig({ ...this.globalConfig, ...userConfig }); + const config = new NbToastrConfig({...this.globalConfig, ...userConfig}); const container = this.containerRegistry.get(config.position); - const toast = { message, title, config }; + const toast = {message, title, config}; return container.attach(toast); } @@ -276,48 +282,48 @@ export class NbToastrService { * Shows success toast with message, title and user config. * */ success(message, title?, config?: Partial): NbToastRef { - return this.show(message, title, { ...config, status: 'success' }); + return this.show(message, title, {...config, status: 'success'}); } /** * Shows info toast with message, title and user config. * */ info(message, title?, config?: Partial): NbToastRef { - return this.show(message, title, { ...config, status: 'info' }); + return this.show(message, title, {...config, status: 'info'}); } /** * Shows warning toast with message, title and user config. * */ warning(message, title?, config?: Partial): NbToastRef { - return this.show(message, title, { ...config, status: 'warning' }); + return this.show(message, title, {...config, status: 'warning'}); } /** * Shows primary toast with message, title and user config. * */ primary(message, title?, config?: Partial): NbToastRef { - return this.show(message, title, { ...config, status: 'primary' }); + return this.show(message, title, {...config, status: 'primary'}); } /** * Shows danger toast with message, title and user config. * */ danger(message, title?, config?: Partial): NbToastRef { - return this.show(message, title, { ...config, status: 'danger' }); + return this.show(message, title, {...config, status: 'danger'}); } /** * Shows basic toast with message, title and user config. * */ default(message, title?, config?: Partial): NbToastRef { - return this.show(message, title, { ...config, status: 'basic' }); + return this.show(message, title, {...config, status: 'basic'}); } /** * Shows control toast with message, title and user config. * */ control(message, title?, config?: Partial): NbToastRef { - return this.default(message, title, { ...config, status: 'control' }); + return this.default(message, title, {...config, status: 'control'}); } }