-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
257 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,4 +10,4 @@ | |
| } | ||
| ] | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
projects/demo-app/src/app/snackbar/snackbar-demo.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="tabIndex = $event.index"> | ||
| <!--<mat-tab label="OVERVIEW">--> | ||
| <!--<mat-card class="demo-card demo-basic">--> | ||
| <!--TODO--> | ||
| <!--</mat-card>--> | ||
| <!--</mat-tab>--> | ||
| <mat-tab label="API REFERENCE"></mat-tab> | ||
| <mat-tab label="EXAMPLES"></mat-tab> | ||
| </mat-tab-group> | ||
|
|
||
| <mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0"> | ||
| <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/js/component/snackbar/readme.md'"></markdown> --> | ||
| </mat-card> | ||
|
|
||
| <div class="demo-card" *ngIf="tabIndex === 1"> | ||
| <!-- | ||
| important: | ||
| using web-animations-js polyfill is mandatory for IE & Safari because | ||
| they don't implement the Web Animation API natively | ||
| note: | ||
| the graphic representation of the snackbar has no link with it's implementation beside it's size (see impl) | ||
| the graphic impl proposed here may be impl in the future as a separate component | ||
| it may be something that looks like a mat-card but with context property defining the context (danger, warning, success, info, simple) | ||
| which will be translated to it's color and z index | ||
| --> | ||
|
|
||
| <!-- | ||
| todo | ||
| check body position if scrollHeight > viewportHeight | ||
| check if html container but !outerContainerElement => position on viewport | ||
| --> | ||
|
|
||
| <div class="btn-container"> | ||
| <button mat-raised-button background="danger" (click)="push.emit('danger')">Danger</button> | ||
| <button mat-raised-button background="warning" (click)="push.emit('warning')">Warning</button> | ||
| <button mat-raised-button background="success" (click)="push.emit('success')">Success</button> | ||
| <button mat-raised-button background="info" (click)="push.emit('info')">Info</button> | ||
| <button mat-raised-button (click)="simpleGate = true">Simple</button> | ||
| </div> | ||
|
|
||
| <!-- simple use case, single snackbar --> | ||
| <snackbar *ngIf="simpleGate" alignment="top left" [duration]="2000" (onAnimationDone)="simpleGate = false"> | ||
| <message-box type="primary" horizontal>Hello world ! I'm a simple snackbar.</message-box> | ||
| </snackbar> | ||
|
|
||
| <!-- event driven from UI --> | ||
| <!-- this behavior is to be used to react to user behavior on the UI, snackbars MUST be disposed using user interraction --> | ||
|
|
||
| <!--inside a container--> | ||
| <section #containerEl class="container" [style.position]="'relative'"> | ||
| <ng-template ngFor let-message [ngForOf]="infos$ | async"> | ||
| <snackbar *ngIf="message.gate" alignment="right" [outerContainerElement]="containerEl"> | ||
| <message-box type="primary" horizontal> | ||
| {{ message.content }} | ||
| <ng-template #actionsTemplate> | ||
| <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false"> | ||
| <mat-icon>clear</mat-icon> | ||
| </button> | ||
| </ng-template> | ||
| </message-box> | ||
| </snackbar> | ||
| </ng-template> | ||
| </section> | ||
|
|
||
| <!--on the viewport--> | ||
| <ng-template ngFor let-message [ngForOf]="successes$ | async"> | ||
| <snackbar *ngIf="message.gate" alignment="bottom left"> | ||
| <message-box type="success" horizontal> | ||
| {{ message.content }} | ||
| <ng-template #actionsTemplate> | ||
| <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false"> | ||
| <mat-icon>clear</mat-icon> | ||
| </button> | ||
| </ng-template> | ||
| </message-box> | ||
| </snackbar> | ||
| </ng-template> | ||
|
|
||
| <ng-template ngFor let-message [ngForOf]="warnings$ | async"> | ||
| <snackbar *ngIf="message.gate" alignment="bottom"> | ||
| <message-box type="warn" horizontal> | ||
| {{ message.content }} | ||
| <ng-template #actionsTemplate> | ||
| <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false"> | ||
| <mat-icon>clear</mat-icon> | ||
| </button> | ||
| </ng-template> | ||
| </message-box> | ||
| </snackbar> | ||
| </ng-template> | ||
|
|
||
| <ng-template ngFor let-message [ngForOf]="dangers$ | async"> | ||
| <snackbar *ngIf="message.gate" alignment="bottom right"> | ||
| <message-box type="danger" horizontal> | ||
| {{ message.content }} | ||
| <ng-template #actionsTemplate> | ||
| <button mat-icon-button class="action-button" [color]="'blank'" (click)="message.gate = false"> | ||
| <mat-icon>clear</mat-icon> | ||
| </button> | ||
| </ng-template> | ||
| </message-box> | ||
| </snackbar> | ||
| </ng-template> | ||
|
|
||
| <section class="push-section"> | ||
| <!-- server push like feed --> | ||
| <!-- this behavior is to be used to push message to the client for example, snackbars MUST be displosed by themself --> | ||
| <!-- to do so, define duration @Input and negate flag used for disposal using the onAnimationDone @Output --> | ||
| <ng-template ngFor let-message [ngForOf]="messages$ | async"> | ||
| <snackbar *ngIf="message.gate" alignment="left" [duration]="5000" (onAnimationDone)="message.gate = false"> | ||
| <message-box type="primary" horizontal> | ||
| {{ message.content }} | ||
| </message-box> | ||
| </snackbar> | ||
| </ng-template> | ||
| </section> | ||
| </div> |
45 changes: 45 additions & 0 deletions
45
projects/demo-app/src/app/snackbar/snackbar-demo.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| @use '@angular/material' as mat; | ||
|
|
||
| :host { | ||
| .container { | ||
| display: block; | ||
| margin: auto; | ||
| max-width: 800px; | ||
| max-height: 800px; | ||
| min-height: 400px; | ||
| box-sizing: border-box; | ||
| border: solid rgba(0, 0, 0, 1) 1px; | ||
| } | ||
|
|
||
| .btn-container { | ||
| width: 500px; | ||
| margin: auto; | ||
| margin-bottom: 12px; | ||
|
|
||
| [background='danger'] { | ||
| background: mat.get-color-from-palette(mat.$red-palette, 400); | ||
| } | ||
|
|
||
| [background='warning'] { | ||
| background: mat.get-color-from-palette(mat.$orange-palette, 400); | ||
| } | ||
|
|
||
| [background='success'] { | ||
| background: mat.get-color-from-palette(mat.$green-palette, 400); | ||
| } | ||
|
|
||
| [background='info'] { | ||
| background: mat.get-color-from-palette(mat.$blue-palette, 400); | ||
| } | ||
|
|
||
| [background='default'] { | ||
| background: mat.get-color-from-palette(mat.$grey-palette, 900); | ||
| } | ||
| } | ||
|
|
||
| .push-section { | ||
| width: 400px; | ||
| height: 4000px; | ||
| border: red solid 1px; | ||
| } | ||
| } |
81 changes: 81 additions & 0 deletions
81
projects/demo-app/src/app/snackbar/snackbar-demo.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { AsyncPipe, NgFor, NgIf } from '@angular/common'; | ||
| import { ChangeDetectionStrategy, Component, EventEmitter } from '@angular/core'; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
| import { MatCardModule } from '@angular/material/card'; | ||
| import { MatIconModule } from '@angular/material/icon'; | ||
| import { MatTabsModule } from '@angular/material/tabs'; | ||
| import { MessageBoxComponent } from '@hug/ngx-message-box'; | ||
| import { SnackbarComponent } from '@hug/ngx-snackbar'; | ||
| import { Observable, defaultIfEmpty, filter, from, interval, map, scan } from 'rxjs'; | ||
|
|
||
| class Message { | ||
| public constructor(public content = 'Some snackbar', public gate = true) { } | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'app-snackbar-demo', | ||
| styleUrls: ['./snackbar-demo.component.scss'], | ||
| templateUrl: './snackbar-demo.component.html', | ||
| standalone: true, | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| imports: [ | ||
| AsyncPipe, | ||
| MatButtonModule, | ||
| MatCardModule, | ||
| MatIconModule, | ||
| MatTabsModule, | ||
| MessageBoxComponent, | ||
| NgIf, | ||
| NgFor, | ||
| SnackbarComponent | ||
| ] | ||
| }) | ||
| export class SnackbarDemoComponent { | ||
| public tabIndex = 1; | ||
|
|
||
| /* | ||
| The example below demonstrate how you can dynamically add snackbars using *ngFor structural directive. | ||
| Here the Observable simulate items being push from the server | ||
| */ | ||
| public messages$: Observable<Message[]>; | ||
|
|
||
| public dangers$: Observable<Message[]>; | ||
| public warnings$: Observable<Message[]>; | ||
| public successes$: Observable<Message[]>; | ||
| public infos$: Observable<Message[]>; | ||
|
|
||
| public push = new EventEmitter<string>(); | ||
|
|
||
| public simpleGate = false; | ||
|
|
||
| public constructor() { | ||
| this.dangers$ = from(this.push).pipe( | ||
| filter(type => type === 'danger'), | ||
| map(() => new Message('Danger snackbar')), | ||
| scan((acc, curr) => [...acc, curr], [] as Message[]), | ||
| defaultIfEmpty([] as Message[])); | ||
|
|
||
| this.warnings$ = from(this.push).pipe( | ||
| filter(type => type === 'warning'), | ||
| map(() => new Message('Warning snackbar')), | ||
| scan((acc, curr) => [...acc, curr], [] as Message[]), | ||
| defaultIfEmpty([] as Message[])); | ||
|
|
||
| this.successes$ = from(this.push).pipe( | ||
| filter(type => type === 'success'), | ||
| map(() => new Message('Success snackbar')), | ||
| scan((acc, curr) => [...acc, curr], [] as Message[]), | ||
| defaultIfEmpty([] as Message[])); | ||
|
|
||
| this.infos$ = from(this.push).pipe( | ||
| filter(type => type === 'info'), | ||
| map(() => new Message('Info snackbar')), | ||
| scan((acc, curr) => [...acc, curr], [] as Message[]), | ||
| defaultIfEmpty([] as Message[])); | ||
|
|
||
| this.messages$ = interval(2000).pipe( | ||
| map(() => new Message('Server push snackbar')), | ||
| scan((acc, curr) => [...acc, curr], [] as Message[]), | ||
| defaultIfEmpty([] as Message[])); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters