Skip to content

Commit

Permalink
feat(toastr): Eva style (#1411)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:

NbToastStatus enum removed. Toastr now uses common NbComponentstatus type.

NbToastComponent status class names changed to 'status-[status-name]'.
'default' class removed.

Following theme properties were renamed:
toastr-bg -> toastr-background
toastr-fg -> toastr-text-color
toastr-border -> toastr-border-style, toastr-border-width

'toastr-icon-radius' removed.
  • Loading branch information
@yggg
yggg authored Apr 24, 2019
1 parent 98b51c0 commit ccdaf9b
Show file tree
Hide file tree
Showing 9 changed files with 140 additions and 183 deletions.
151 changes: 39 additions & 112 deletions src/framework/theme/components/toastr/_toast.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,39 @@

@mixin nb-toast-theme() {
nb-toast {
background-color: nb-theme(toastr-bg);
padding: nb-theme(toastr-padding);
color: nb-theme(toastr-fg);
border: nb-theme(toastr-border);
background-color: nb-theme(toastr-background);
border-color: nb-theme(toastr-border-color);
border-style: nb-theme(toastr-border-style);
border-width: nb-theme(toastr-border-width);
border-radius: nb-theme(toastr-border-radius);
padding: nb-theme(toastr-padding);
box-shadow: nb-theme(toastr-shadow);

color: nb-theme(toastr-text-color);

&.destroy-by-click:hover {
background: nb-theme(toastr-destroyable-hover-background);
border-color: nb-theme(toastr-destroyable-hover-border-color);
}

.title {
font-family: nb-theme(toastr-title-text-font-family);
font-size: nb-theme(toastr-title-text-font-size);
font-weight: nb-theme(toastr-title-text-font-weight);
line-height: nb-theme(toastr-title-text-line-height);
}

.message {
font-family: nb-theme(toastr-text-font-family);
font-size: nb-theme(toastr-text-font-size);
font-weight: nb-theme(toastr-text-font-weight);
line-height: nb-theme(toastr-text-line-height);
}

.icon-container {
@include nb-ltr(margin-right, 1.25rem);
@include nb-rtl(margin-left, 1.25rem);
border-radius: nb-theme(toastr-icon-radius);
border-radius: nb-theme(toastr-border-radius);
width: 2.5rem;
height: 2.5rem;
display: flex;
Expand All @@ -26,118 +49,22 @@
font-size: 1.5rem;
}
}
}

@include nb-except-theme(cosmic) {
box-shadow: nb-theme(toastr-shadow);
}

&.default {
border-color: nb-theme(toastr-border-color);
padding: calc(#{nb-theme(toastr-padding)} / 2) nb-theme(toastr-padding);

@include nb-for-theme(cosmic) {
color: nb-theme(toastr-color-fg);
background-color: nb-theme(toastr-default-background);
}
}

&.success {
border-color: nb-theme(color-success);
color: nb-theme(color-success);

.icon-container {
background-color: nb-theme(color-success);
color: nb-theme(color-white);
}

@include nb-for-theme(cosmic) {
background-color: nb-theme(color-success);
color: nb-theme(toastr-color-fg);

.icon-container {
background-color: nb-theme(color-white);
color: nb-theme(color-success);
}
}
}

&.info {
border-color: nb-theme(color-info);
color: nb-theme(color-info);

.icon-container {
background-color: nb-theme(color-info);
color: nb-theme(color-white);
}

@include nb-for-theme(cosmic) {
background-color: nb-theme(color-info);
color: nb-theme(toastr-color-fg);

.icon-container {
background-color: nb-theme(color-white);
color: nb-theme(color-info);
}
}
}

&.warning {
border-color: nb-theme(color-warning);
color: nb-theme(color-warning);

.icon-container {
background-color: nb-theme(color-warning);
color: nb-theme(color-white);
}

@include nb-for-theme(cosmic) {
background-color: nb-theme(color-warning);
color: nb-theme(toastr-color-fg);

.icon-container {
background-color: nb-theme(color-white);
color: nb-theme(color-warning);
}
}
}

&.primary {
border-color: nb-theme(color-primary);
color: nb-theme(color-primary);

.icon-container {
background-color: nb-theme(color-primary);
color: nb-theme(color-white);
}

@include nb-for-theme(cosmic) {
background-color: nb-theme(color-primary);
color: nb-theme(toastr-color-fg);
@each $status in nb-get-statuses() {
nb-toast.status-#{$status} {
background: nb-theme(toastr-#{$status}-background);
border-color: nb-theme(toastr-#{$status}-border-color);
color: nb-theme(toastr-#{$status}-text-color);

.icon-container {
background-color: nb-theme(color-white);
color: nb-theme(color-primary);
}
&.destroy-by-click:hover {
background: nb-theme(toastr-destroyable-hover-#{$status}-background);
border-color: nb-theme(toastr-destroyable-hover-#{$status}-border-color);
}
}

&.danger {
border-color: nb-theme(color-danger);
color: nb-theme(color-danger);

.icon-container {
background-color: nb-theme(color-danger);
color: nb-theme(color-white);
}

@include nb-for-theme(cosmic) {
background-color: nb-theme(color-danger);
color: nb-theme(toastr-color-fg);

.icon-container {
background-color: nb-theme(color-white);
color: nb-theme(color-danger);
}
background: nb-theme(toastr-icon-#{$status}-background);
color: nb-theme(toastr-icon-#{$status}-color);
}
}
}
Expand Down
10 changes: 0 additions & 10 deletions src/framework/theme/components/toastr/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,6 @@

import { NbToastrConfig } from './toastr-config';


export enum NbToastStatus {
SUCCESS = 'success',
INFO = 'info',
WARNING = 'warning',
PRIMARY = 'primary',
DANGER = 'danger',
DEFAULT = 'default',
}

export class NbToast {
title: string;
message: string;
Expand Down
5 changes: 0 additions & 5 deletions src/framework/theme/components/toastr/toast.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
align-items: center;
width: 25rem;
margin: 0.5rem;
opacity: 0.9;

.title {
font-weight: 800;
Expand All @@ -33,10 +32,6 @@

&.destroy-by-click {
cursor: pointer;

&:hover {
opacity: 1;
}
}

nb-icon {
Expand Down
34 changes: 12 additions & 22 deletions src/framework/theme/components/toastr/toast.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@

import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';

import { NbToast, NbToastStatus } from './model';

import { NbToast } from './model';

/**
* The `NbToastComponent` is responsible for rendering each toast with appropriate styles.
Expand All @@ -21,10 +20,6 @@ import { NbToast, NbToastStatus } from './model';
* toastr-border-radius
* toastr-border-color
* */
/**
* TODO
* Remove svg icons, include them in font.
* */
@Component({
selector: 'nb-toast',
styleUrls: ['./toast.component.scss'],
Expand All @@ -36,34 +31,29 @@ export class NbToastComponent {

@Output() destroy: EventEmitter<void> = new EventEmitter();

@HostBinding('class.success')
@HostBinding('class.status-success')
get success(): boolean {
return this.toast.config.status === NbToastStatus.SUCCESS;
return this.toast.config.status === 'success';
}

@HostBinding('class.info')
@HostBinding('class.status-info')
get info(): boolean {
return this.toast.config.status === NbToastStatus.INFO;
return this.toast.config.status === 'info';
}

@HostBinding('class.warning')
@HostBinding('class.status-warning')
get warning(): boolean {
return this.toast.config.status === NbToastStatus.WARNING;
return this.toast.config.status === 'warning';
}

@HostBinding('class.primary')
@HostBinding('class.status-primary')
get primary(): boolean {
return this.toast.config.status === NbToastStatus.PRIMARY;
return this.toast.config.status === 'primary';
}

@HostBinding('class.danger')
@HostBinding('class.status-danger')
get danger(): boolean {
return this.toast.config.status === NbToastStatus.DANGER;
}

@HostBinding('class.default')
get default(): boolean {
return this.toast.config.status === NbToastStatus.DEFAULT;
return this.toast.config.status === 'danger';
}

@HostBinding('class.destroy-by-click')
Expand All @@ -73,7 +63,7 @@ export class NbToastComponent {

@HostBinding('class.has-icon')
get hasIcon(): boolean {
return this.toast.config.hasIcon && this.toast.config.status !== NbToastStatus.DEFAULT;
return this.toast.config.hasIcon && !!this.toast.config.status;
}

@HostBinding('class.custom-icon')
Expand Down
21 changes: 12 additions & 9 deletions src/framework/theme/components/toastr/toastr-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@

import { InjectionToken } from '@angular/core';

import { NbToastStatus } from './model';
import { NbGlobalLogicalPosition, NbGlobalPosition } from '../cdk';
import { NbComponentStatus } from '../component-status';

type IconToClassMap = {
[status in NbComponentStatus]: string;
}

export const NB_TOASTR_CONFIG = new InjectionToken<NbToastrConfig>('Default toastr options');

Expand All @@ -23,7 +26,7 @@ export class NbToastrConfig {
/**
* Status chooses color scheme for the toast.
* */
status: NbToastStatus = NbToastStatus.PRIMARY;
status: '' | NbComponentStatus = 'primary';
/**
* Duration is timeout between toast appears and disappears.
* */
Expand Down Expand Up @@ -51,12 +54,12 @@ export class NbToastrConfig {
/**
* Toast status icon-class mapping.
* */
protected icons = {
[NbToastStatus.DANGER]: 'flash-outline',
[NbToastStatus.SUCCESS]: 'checkmark-outline',
[NbToastStatus.INFO]: 'question-mark-outline',
[NbToastStatus.WARNING]: 'alert-triangle-outline',
[NbToastStatus.PRIMARY]: 'email-outline',
protected icons: IconToClassMap = {
danger: 'flash-outline',
success: 'checkmark-outline',
info: 'question-mark-outline',
warning: 'alert-triangle-outline',
primary: 'email-outline',
};

constructor(config: Partial<NbToastrConfig>) {
Expand All @@ -66,7 +69,7 @@ export class NbToastrConfig {

protected patchIcon(config: Partial<NbToastrConfig>) {
if (!('icon' in config)) {
config.icon = this.icons[config.status || NbToastStatus.PRIMARY];
config.icon = this.icons[config.status || 'primary'];
config.iconPack = 'nebular-essentials';
}
}
Expand Down
Loading

0 comments on commit ccdaf9b

Please sign in to comment.