chore: demo

DSI-HUG · Jul 8, 2024 · a4eea24 · a4eea24
1 parent 125a116
commit a4eea24
Show file tree

Hide file tree

Showing 15 changed files with 258 additions and 103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,9 @@
         "@angular/platform-browser": "~14.3.0",
         "@angular/platform-browser-dynamic": "~14.3.0",
         "@angular/router": "~14.3.0",
+        "@fontsource-variable/material-symbols-outlined": "~5.0.19",
+        "@fontsource/material-icons": "4.5.4",
+        "@fontsource/roboto": "4.5.8",
         "date-fns": "~2.30.0",
         "lodash-es": "~4.17.21",
         "rxjs": "~7.8.1",

diff --git a/projects/core/package.json b/projects/core/package.json
@@ -27,6 +27,9 @@
         "./themeVariables": {
             "sass": "./styles/_themeVariables.scss"
         },
+        "./dialog": {
+            "sass": "./styles/mixins/_dialog.scss"
+        },
         "./menu": {
             "sass": "./styles/mixins/_menu.scss"
         },

diff --git a/projects/core/src/styles/mixins/_dialog.scss b/projects/core/src/styles/mixins/_dialog.scss
@@ -0,0 +1,53 @@
+@mixin dialog() {
+    .no-padding-dialog .mat-dialog-container {
+        padding: 0;
+
+        .mat-dialog-content {
+            margin: 0;
+        }
+    }
+
+    .mat-dialog-container {
+        padding: 0;
+
+        .mat-dialog-content {
+            margin: 0;
+        }
+
+        .dialog-toolbar {
+            display: flex;
+            justify-content: space-between;
+
+            .dialog-title {
+                padding: 0 1rem 0 0;
+            }
+
+            .dialog-action {
+                display: flex;
+                justify-content: baseline;
+                align-items: center;
+                cursor: pointer;
+                font-size: 85%;
+                opacity: 0.9;
+            }
+        }
+
+        .dialog-container {
+            padding: 1rem;
+            max-height: 65vh;
+            max-width: 90vw;
+            overflow: auto;
+        }
+
+        .dialog-buttons {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 0.7rem;
+
+            .mat-button {
+                margin: 0 0.5rem;
+            }
+        }
+    }
+}
diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
@@ -7,7 +7,13 @@ <h1 class="demo-app-name">hug/ngx-components Demo</h1>
     </mat-toolbar>
 
     <mat-sidenav-container class="demo-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
-        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
+        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" opened="true">
+            <mat-nav-list>
+                <mat-list-item title="Message Box" routerLink="/message-box" routerLinkActive="active">
+                    <mat-icon mat-list-icon>message</mat-icon>
+                    <span mat-line>Message Box</span>
+                </mat-list-item>
+            </mat-nav-list>
             <mat-nav-list>
                 <mat-list-item title="Overlay" routerLink="/overlay" routerLinkActive="active">
                     <mat-icon mat-list-icon>menu</mat-icon>

diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts
@@ -1,11 +1,11 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, inject } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { RouterOutlet } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 
 @Component({
@@ -21,7 +21,7 @@ import { RouterOutlet } from '@angular/router';
         MatToolbarModule,
         NgIf,
         NgFor,
-        RouterOutlet
+        RouterModule
     ]
 })
 export class AppComponent implements OnDestroy {

diff --git a/projects/demo-app/src/app/app.routes.ts b/projects/demo-app/src/app/app.routes.ts
@@ -1,7 +1,8 @@
 import { Routes } from '@angular/router';
 
 export const appRoutes: Routes = [
-    { path: '', redirectTo: 'overlay', pathMatch: 'full' },
+    { path: '', redirectTo: 'message-box', pathMatch: 'full' },
     { path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } },
-    { path: '**', redirectTo: 'overlay', pathMatch: 'prefix' }
+    { path: 'message-box', loadComponent: () => import('./message-box/message-box-demo.component').then(m => m.MessageBoxDemoComponent), data: { title: 'Message Box' } },
+    { path: '**', redirectTo: 'message-box', pathMatch: 'prefix' }
 ];
diff --git a/projects/demo-app/src/app/message-box/message-box-demo.component.html b/projects/demo-app/src/app/message-box/message-box-demo.component.html
@@ -0,0 +1,56 @@
+<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="tabIndex = $event.index">
+    <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/deja-js/component/message-box/readme.md'"></markdown> -->
+</mat-card>
+
+<div *ngIf="tabIndex === 1" class="example">
+    <message-box type="primary" title="Title" [actions]="closeAction">
+        Du texte dans la
+        <b>message box</b>
+    </message-box>
+
+    <message-box type="primary" title="Title" horizontal [actions]="closeAction">
+        Du texte dans la
+        <b>message box</b>
+    </message-box>
+
+    <message-box type="warn" horizontal title="Title" [actions]="closeAction">
+        Un message "warn"
+        <b>horizontal</b>
+        avec titre
+    </message-box>
+
+    <message-box type="info" horizontal>
+        Un message "info"
+        <b>horizontal</b>
+    </message-box>
+
+    <message-box type="warn" horizontal [actions]="closeAction">
+        Un message "warn"
+        <b>horizontal</b>
+    </message-box>
+
+    <message-box type="danger" horizontal title="Title">
+        Un message "danger"
+        <b>horizontal</b>
+        avec une action au format template
+        <ng-template #actionsTemplate>
+            <button mat-icon-button>
+                <mat-icon>clear</mat-icon>
+            </button>
+        </ng-template>
+    </message-box>
+
+    <message-box horizontal>Un message horizontal sans type ni titre</message-box>
+
+    <message-box type="danger" horizontal light [actions]="closeAction">Un message horizontal sans type ni titre</message-box>
+    <message-box type="success" horizontal light>Un message horizontal sans type ni titre</message-box>
+    <message-box type="warn" horizontal light>Un message horizontal sans type ni titre</message-box>
+    <message-box type="info" horizontal light>Un message horizontal sans type ni titre</message-box>
+
+    <button mat-raised-button (click)="openDialog$.next()">Open dialog</button>
+</div>
diff --git a/projects/demo-app/src/app/message-box/message-box-demo.component.scss b/projects/demo-app/src/app/message-box/message-box-demo.component.scss
@@ -0,0 +1,9 @@
+:host {
+    .example {
+        margin-top: 2rem;
+    }
+
+    message-box {
+        margin-bottom: 1rem;
+    }
+}
diff --git a/projects/demo-app/src/app/message-box/message-box-demo.component.ts b/projects/demo-app/src/app/message-box/message-box-demo.component.ts
@@ -0,0 +1,59 @@
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } 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 { Destroy } from '@hug/ngx-core';
+import { MessageBoxAction, MessageBoxComponent } from '@hug/ngx-message-box';
+import { MessageBoxDialogButtons, MessageBoxDialogService } from '@hug/ngx-message-box-dialog';
+import { Subject, switchMap, takeUntil } from 'rxjs';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-message-box-demo',
+    styleUrls: ['./message-box-demo.component.scss'],
+    templateUrl: './message-box-demo.component.html',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        MatCardModule,
+        MatIconModule,
+        MatTabsModule,
+        MessageBoxComponent,
+        NgIf
+    ],
+})
+export class MessageBoxDemoComponent extends Destroy {
+    public tabIndex = 1;
+
+    public closeAction = [
+        {
+            action: (): void => alert('test action'),
+            icon: 'clear'
+        }
+    ] as ReadonlyArray<MessageBoxAction>;
+
+    protected openDialog$ = new Subject<void>();
+
+    private messageBoxService = inject(MessageBoxDialogService);
+
+    public constructor() {
+        super();
+
+        this.openDialog$.pipe(
+            switchMap(() => {
+                const dialogData = {
+                    title: 'MessageBox Dialog',
+                    text: 'This is a message box dialog. Click OK or Cancel to close.',
+                    buttons: MessageBoxDialogButtons.OK + MessageBoxDialogButtons.CANCEL,
+                };
+
+                return this.messageBoxService.openDialog$(dialogData);
+            }),
+            takeUntil(this.destroyed$)
+        ).subscribe(response => {
+            alert(`${response} was clicked`);
+        });
+    }
+}
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
@@ -19,7 +19,8 @@ app-overlay-demo {
 
 .ngx-menu {
     .menu-content {
-        background-color: #fff;
+        display: flex;
+        flex-direction: column;
 
         &.anchor-menu,
         &.button-menu {

diff --git a/projects/demo-app/src/main.ts b/projects/demo-app/src/main.ts
@@ -3,6 +3,9 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
 
+import { DIALOG_SCROLL_STRATEGY_PROVIDER, Dialog } from '@angular/cdk/dialog';
+import { Overlay } from '@angular/cdk/overlay';
+import { MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MatDialog } from '@angular/material/dialog';
 import { AppComponent } from './app/app.component';
 import { appRoutes } from './app/app.routes';
 import { environment } from './environments/environment';
@@ -14,6 +17,11 @@ if (environment.production) {
 bootstrapApplication(AppComponent, {
     providers: [
         provideAnimations(),
-        provideRouter(appRoutes, withPreloading(PreloadAllModules))
+        provideRouter(appRoutes, withPreloading(PreloadAllModules)),
+        MatDialog,
+        Overlay,
+        MAT_DIALOG_SCROLL_STRATEGY_PROVIDER,
+        Dialog,
+        DIALOG_SCROLL_STRATEGY_PROVIDER
     ]
 }).catch(err => console.error(err));