Skip to content

Commit

Permalink
chore: improve demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@vapkse
vapkse committed Jul 8, 2024
1 parent bc08191 commit 4eccfde
Show file tree
Hide file tree
Showing 9 changed files with 140 additions and 99 deletions.
2 changes: 1 addition & 1 deletion projects/demo-app/src/app/message-box/message-box-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/message-box/readme.md'"></markdown> -->
</mat-card>

<div *ngIf="tabIndex === 1" class="example">
<div class="demo-content" *ngIf="tabIndex === 1" class="example">
<mat-card class="demo-card">
<mat-toolbar color="primary">MessageBox</mat-toolbar>
<mat-card-content>
Expand Down
4 changes: 1 addition & 3 deletions projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/v2/numeric-stepper/readme.md'"></markdown> -->
</mat-card>

<div *ngIf="tabIndex === 1">
<div *ngIf="tabIndex === 1" class="demo-content">
<mat-card class="demo-card">
<mat-toolbar color="primary">Numeric Stepper in Material Form Field with different appearances</mat-toolbar>
<mat-card-content>
Expand Down Expand Up @@ -82,7 +82,6 @@
</div>
</mat-card-content>
</mat-card>

<mat-card class="demo-card">
<mat-toolbar color="primary">Numeric Stepper with horizontal layout</mat-toolbar>
<mat-card-content>
Expand Down Expand Up @@ -121,7 +120,6 @@
</div>
</mat-card-content>
</mat-card>

<mat-card class="demo-card">
<mat-toolbar color="primary">Numeric Stepper with inlay horizontal layout</mat-toolbar>
<mat-card-content>
Expand Down
4 changes: 3 additions & 1 deletion projects/demo-app/src/app/numeric-stepper/numeric-stepper-demo.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
:host {
.mat-card {
.demo-card {
min-height: 200px;

.mat-card-content {
display: flex;
flex-direction: row;
Expand Down
2 changes: 1 addition & 1 deletion projects/demo-app/src/app/overlay/overlay-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">TODO</mat-card>

<div *ngIf="tabIndex === 1" (contextmenu)="onContextMenu($event)">
<div *ngIf="tabIndex === 1" (contextmenu)="onContextMenu($event)" class="demo-content">
<overlay #contextMenu overlayContainerClass="ngx-menu">
<div class="menu-content">
<ul>
Expand Down
2 changes: 1 addition & 1 deletion projects/demo-app/src/app/snackbar/snackbar-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/snackbar/readme.md'"></markdown> -->
</mat-card>

<div class="demo-card" *ngIf="tabIndex === 1">
<div class="demo-content" *ngIf="tabIndex === 1">
<mat-card class="demo-card">
<mat-toolbar color="primary">Snackbar</mat-toolbar>
<mat-card-content>
Expand Down
22 changes: 16 additions & 6 deletions projects/demo-app/src/app/snackbar/snackbar-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MessageBoxComponent } from '@hug/ngx-message-box';
import { SnackbarComponent } from '@hug/ngx-snackbar';
import { defaultIfEmpty, filter, from, interval, map, Observable, scan } from 'rxjs';
import { Observable, defaultIfEmpty, filter, from, interval, map, scan, shareReplay } from 'rxjs';

class Message {
public constructor(public content = 'Some snackbar', public gate = true) { }
Expand Down Expand Up @@ -55,29 +55,39 @@ export class SnackbarDemoComponent {
filter(type => type === 'danger'),
map(() => new Message('Danger snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]));
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
);

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[]));
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
);

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[]));
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
);

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[]));
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
);

this.messages$ = interval(2000).pipe(
map(() => new Message('Server push snackbar')),
scan((acc, curr) => [...acc, curr], [] as Message[]),
defaultIfEmpty([] as Message[]));
defaultIfEmpty([] as Message[]),
shareReplay({ bufferSize: 1, refCount: false})
);
}
}
130 changes: 64 additions & 66 deletions projects/demo-app/src/app/splitter/splitter-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,75 +4,73 @@
<!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/splitter/readme.md'"></markdown> -->
</mat-card>
</mat-tab>
<mat-tab label="EXAMPLES">
<div>
<mat-card class="demo-card">
<mat-toolbar color="primary">Horizontal splitter</mat-toolbar>
<mat-card-content class="no-padding">
<div class="container">
<splitter direction="horizontal" order="1">
<split-area size="25" minSizePixel="100">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="75" minSizePixel="100">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</splitter>
</div>
</mat-card-content>
</mat-card>
<mat-tab label="EXAMPLES" class="demo-content">
<mat-card class="demo-card">
<mat-toolbar color="primary">Horizontal splitter</mat-toolbar>
<mat-card-content class="no-padding">
<div class="container">
<splitter direction="horizontal" order="1">
<split-area size="25" minSizePixel="100">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="75" minSizePixel="100">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</splitter>
</div>
</mat-card-content>
</mat-card>

<mat-card class="demo-card">
<mat-toolbar color="primary">Vertical splitter</mat-toolbar>
<mat-card-content class="no-padding">
<div class="container">
<splitter direction="vertical">
<split-area size="25">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="75">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</splitter>
</div>
</mat-card-content>
</mat-card>
<mat-card class="demo-card">
<mat-toolbar color="primary">Vertical splitter</mat-toolbar>
<mat-card-content class="no-padding">
<div class="container">
<splitter direction="vertical">
<split-area size="25">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="75">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</splitter>
</div>
</mat-card-content>
</mat-card>

<mat-card class="demo-card">
<mat-toolbar color="primary">Multiple splitter</mat-toolbar>
<mat-card-content class="no-padding">
<div class="container">
<splitter direction="horizontal">
<split-area size="40">
<splitter direction="vertical">
<split-area size="30">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="40">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
<split-area size="30">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
</splitter>
</split-area>
<split-area size="60">
<splitter direction="vertical">
<split-area size="50">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="50">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</splitter>
</split-area>
</splitter>
</div>
</mat-card-content>
</mat-card>
</div>
<mat-card class="demo-card">
<mat-toolbar color="primary">Multiple splitter</mat-toolbar>
<mat-card-content class="no-padding">
<div class="container">
<splitter direction="horizontal">
<split-area size="40">
<splitter direction="vertical">
<split-area size="30">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="40">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
<split-area size="30">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
</splitter>
</split-area>
<split-area size="60">
<splitter direction="vertical">
<split-area size="50">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area size="50">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</splitter>
</split-area>
</splitter>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab label="EXAMPLE FULL PAGE" bodyClass="fixed-height">
<mat-tab label="EXAMPLE FULL PAGE" bodyClass="fixed-height" class="demo-content">
<mat-card class="demo-card">
<mat-toolbar color="primary">Vertical splitter</mat-toolbar>
<mat-card-content class="no-padding">
Expand Down
49 changes: 31 additions & 18 deletions projects/demo-app/src/app/splitter/splitter-demo.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,40 @@ app-splitter-demo {
.mat-tab-body-wrapper {
flex: 1;

.mat-tab-body.fixed-height {
overflow: hidden;

.mat-tab-body {
.mat-tab-body-content {
overflow: hidden;
padding: 5px;
display: flex;
flex-direction: column;

.mat-card {
height: calc(100% - 10px);
margin: 0;
display: flex;
flex-direction: column;

.mat-card-content {
flex: 1;

splitter {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
flex: 1 1 100%;
overflow: hidden;
min-height: 300px;
}
}

&.fixed-height {
overflow: hidden;

.mat-tab-body-content {
overflow: hidden;
padding: 5px;

.mat-card {
height: calc(100% - 10px);
margin: 0;
display: flex;
flex-direction: column;

.mat-card-content {
flex: 1;

splitter {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
}
}
}
Expand Down
24 changes: 22 additions & 2 deletions projects/demo-app/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,26 @@ body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
}

.mat-toolbar {
margin-bottom: 2rem;
.demo-content {
display: flex;
flex-direction: column;
height: calc(100% - 50px);

.demo-card {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;

.mat-toolbar {
flex: 0 0 auto;
margin-bottom: 2rem;
padding: 1rem;
}

.mat-card-content {
flex: 1 1 auto;
overflow: auto;
}
}
}

0 comments on commit 4eccfde

Please sign in to comment.