Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(toastr): use Nebular components

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-19 22:25:44 +03:00
parent 01b801cbde
commit 5aad309e07
4 changed files with 42 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/pages/modal-overlays/modal-overlays.module.ts
View file

@ -4,8 +4,10 @@ import {
NbButtonModule,
NbCardModule,
NbCheckboxModule,
NbDialogModule, NbInputModule,
NbDialogModule,
NbInputModule,
NbPopoverModule,
NbSelectModule,
NbTabsetModule,
NbWindowModule,
} from '@nebular/theme';
@ -66,6 +68,7 @@ const MODULES = [
NbPopoverModule,
NbButtonModule,
NbInputModule,
NbSelectModule,
];
const SERVICES = [

61
src/app/pages/modal-overlays/toastr/toastr.component.html
View file

@ -7,56 +7,53 @@
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label class="form-control-label">Place to show toast:</label>
<div class="dropdown" ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
{{ position }}
</button>
<ul ngbDropdownMenu class="dropdown-menu">
<li class="dropdown-item" *ngFor="let p of positions" (click)="position = p">
{{ p }}
</li>
</ul>
</div>
<label class="label">Position:</label>
<nb-select [(selected)]="position" class="position-select">
<nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option>
</nb-select>
</div>
<div class="form-group">
<label class="form-control-label">Title:</label>
<input class="form-control" [(ngModel)]="title" name="title">
<label class="label">Title:</label>
<input nbInput [(ngModel)]="title" name="title">
</div>
<form>
<div class="form-group">
<label class="form-control-label">Content:</label>
<input class="form-control" [(ngModel)]="content" name="content">
<label class="label">Content:</label>
<input nbInput [(ngModel)]="content" name="content">
</div>
</form>
<div class="form-group">
<label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label>
<input class="form-control" type="number" [(ngModel)]="duration" name="timeout">
<label class="label">Time to hide toast, ms. 0 to persistent toast:</label>
<input nbInput type="number" [(ngModel)]="duration" name="timeout">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label class="form-control-label">Toast type:</label>
<div class="dropdown" ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
{{ status }}
</button>
<ul ngbDropdownMenu class="dropdown-menu">
<li class="dropdown-item" *ngFor="let t of types" (click)="status = t">{{ t }}</li>
</ul>
</div>
<label class="label">Toast type:</label>
<nb-select [(selected)]="status">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</div>
<div>
<nb-checkbox [(ngModel)]="destroyByClick">Hide on click</nb-checkbox>
</div>
<div>
<nb-checkbox [(ngModel)]="preventDuplicates">Prevent arising of duplicate toast</nb-checkbox>
</div>
<div>
<nb-checkbox [(ngModel)]="hasIcon">Show toast with icon</nb-checkbox>
</div>
<div><nb-checkbox [(ngModel)]="destroyByClick">Hide on click</nb-checkbox></div>
<div><nb-checkbox [(ngModel)]="preventDuplicates">Prevent arising of duplicate toast</nb-checkbox></div>
<div><nb-checkbox [(ngModel)]="hasIcon">Show toast with icon</nb-checkbox></div>
</div>
</div>
</nb-card-body>
<nb-card-footer>
<button class="btn btn-primary" (click)="makeToast()">Show toast</button>
<button class="btn btn-success" (click)="openRandomToast()">Random toast</button>
<button nbButton (click)="makeToast()">Show toast</button>
<button nbButton status="success" (click)="openRandomToast()">Random toast</button>
</nb-card-footer>
</nb-card>

25
src/app/pages/modal-overlays/toastr/toastr.component.scss
View file

@ -3,27 +3,16 @@
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-card-footer {
padding-bottom: 0.25rem;
button {
@include nb-ltr(margin, 0 1rem 1rem 0);
@include nb-rtl(margin, 0 0 1rem 1rem);
}
.position-select {
min-width: 13rem;
}
/* stylelint-disable */
toaster-container ::ng-deep {
#toast-container .toast-close-button {
right: 0;
}
.label {
display: block;
}
/* stylelint-enable */
@include media-breakpoint-down(xs) {
.dropdown-toggle {
font-size: 0.75rem;
}
nb-card-footer button:first-child {
@include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem);
}
}

4
src/app/pages/modal-overlays/toastr/toastr.component.ts
View file

@ -26,17 +26,17 @@ export class ToastrComponent {
hasIcon = true;
position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
preventDuplicates = false;
status: NbComponentStatus = 'success';
status: NbComponentStatus = 'primary';
title = 'HI there!';
content = `I'm cool toaster!`;
types: NbComponentStatus[] = [
'primary',
'success',
'info',
'warning',
'danger',
'primary',
];
positions: string[] = [
NbGlobalPhysicalPosition.TOP_RIGHT,