fix: overlay-demo.component and add demo

DSI-HUG · Jul 4, 2024 · c8ac2b4 · c8ac2b4
1 parent 79feb6e
commit c8ac2b4
Show file tree

Hide file tree

Showing 13 changed files with 345 additions and 54 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -23,7 +23,7 @@
         "editor.defaultFormatter": "vscode.html-language-features"
     },
     "[scss]": {
-        "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
+        "editor.defaultFormatter": "HookyQR.beautify"
     },
     "npm.exclude": "**/{dist,tmp}{,/**}",
     "npm.scriptExplorerExclude": [

diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
@@ -1 +1,31 @@
-<b>Hello World</b>
+<div class="demo-container"
+     [class.demo-is-mobile]="mobileQuery.matches">
+    <mat-toolbar color="primary"
+                 class="demo-toolbar">
+        <button mat-icon-button (click)="snav.toggle()">
+            <mat-icon>menu</mat-icon>
+        </button>
+        <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-nav-list>
+                <mat-list-item title="Overlay"
+                               routerLink="/overlay"
+                               routerLinkActive="active">
+                    <mat-icon mat-list-icon>menu</mat-icon>
+                    <span mat-line>Overlay</span>
+                </mat-list-item>
+            </mat-nav-list>
+        </mat-sidenav>
+
+        <mat-sidenav-content>
+            <router-outlet></router-outlet>
+        </mat-sidenav-content>
+    </mat-sidenav-container>
+</div>
diff --git a/projects/demo-app/src/app/app.component.scss b/projects/demo-app/src/app/app.component.scss
@@ -0,0 +1,33 @@
+:host {
+    .demo-container {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .demo-is-mobile .demo-toolbar {
+        position: fixed;
+        /* Make sure the toolbar will stay on top of the content as it scrolls past. */
+        z-index: 2;
+    }
+
+    h1.demo-app-name {
+        margin-left: 8px;
+    }
+
+    .demo-sidenav-container {
+        /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
+       causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
+        flex: 1;
+    }
+
+    .demo-is-mobile .demo-sidenav-container {
+        /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
+       `<body>` to be our scrolling element for mobile layouts. */
+        flex: 1 0 auto;
+    }
+}
diff --git a/projects/demo-app/src/app/app.component.spec.ts b/projects/demo-app/src/app/app.component.spec.ts
diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts
@@ -1,14 +1,44 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy } 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';
 
+
 @Component({
     selector: 'app-root',
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [RouterOutlet],
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    imports: [
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        NgIf,
+        NgFor,
+        RouterOutlet
+    ]
 })
-export class AppComponent {
-    public title = 'demo-app';
+export class AppComponent implements OnDestroy {
+    protected mobileQuery: MediaQueryList;
+
+    private _mobileQueryListener: () => void;
+
+    private changeDetectorRef = inject(ChangeDetectorRef);
+    private media = inject(MediaMatcher);
+
+    public constructor() {
+        this.mobileQuery = this.media.matchMedia('(max-width: 600px)');
+        this._mobileQueryListener = (): void => this.changeDetectorRef.detectChanges();
+        this.mobileQuery.addListener(this._mobileQueryListener);
+    }
+
+    public ngOnDestroy(): void {
+        this.mobileQuery.removeListener(this._mobileQueryListener);
+    }
 }
diff --git a/projects/demo-app/src/app/app.routes.ts b/projects/demo-app/src/app/app.routes.ts
@@ -1,3 +1,7 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const appRoutes: Routes = [
+    { path: '', redirectTo: 'overlay', pathMatch: 'full' },
+    { path: 'overlay', loadComponent: () => import('./overlay/overlay-demo.component').then(m => m.OverlayDemoComponent), data: { title: 'Overlay' } },
+    { path: '**', redirectTo: 'overlay', pathMatch: 'prefix' }
+];
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.html b/projects/demo-app/src/app/overlay/overlay-demo.component.html
@@ -0,0 +1,123 @@
+<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">
+    TODO
+</mat-card>
+
+<div *ngIf="tabIndex === 1"
+     (contextmenu)="onContextMenu($event)">
+    <overlay #contextMenu>
+        <div class="deja-menu-content">
+            <ul>
+                <li class="menu-item"
+                    (click)="contextMenu.close()">
+                    <mat-icon>delete_sweep</mat-icon> Context menu
+                </li>
+                <li class="menu-item"
+                    (click)="contextMenu.close()">
+                    <mat-icon>content_copy</mat-icon> Dupliquer
+                </li>
+                <li class="menu-item"
+                    (click)="contextMenu.close()">
+                    <mat-icon>edit</mat-icon> Editer
+                </li>
+            </ul>
+        </div>
+    </overlay>
+    <mat-card class="demo-card">
+        <mat-toolbar color="primary">Overlay</mat-toolbar>
+        <mat-card-content>
+            <overlay #posYMenu>
+                <div class="deja-menu-content">
+                    <ul>
+                        <li class="menu-item"
+                            (click)="posYMenu.close()">
+                            <mat-icon>delete_sweep</mat-icon> Supprimer
+                        </li>
+                        <li class="menu-item"
+                            (click)="posYMenu.close()">
+                            <mat-icon>content_copy</mat-icon> Dupliquer
+                        </li>
+                        <li class="menu-item"
+                            (click)="posYMenu.close()">
+                            <mat-icon>edit</mat-icon> Editer
+                        </li>
+                    </ul>
+                </div>
+            </overlay>
+
+            <div id="demo-deja-menu">
+                <div class="menu-section">
+                    <p>You clicked on: {{ selected }}</p>
+
+                    <mat-toolbar>
+                        <button mat-icon-button (click)="menu.show($event)">
+							<mat-icon>more_vert</mat-icon>
+						</button>
+                    </mat-toolbar>
+
+                    <overlay #menu>
+                        <div class="deja-menu-content">
+                            <button class="menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
+								{{ item.text }}
+							</button>
+                        </div>
+                    </overlay>
+                </div>
+                <div class="menu-section">
+                    <p> Clicking these will navigate:</p>
+                    <mat-toolbar>
+                        <button mat-icon-button (click)="anchorMenu.show($event)">
+							<mat-icon>more_vert</mat-icon>
+						</button>
+                    </mat-toolbar>
+
+                    <overlay #anchorMenu>
+                        <div id="anchorMenu"
+                             class="deja-menu-content">
+                            <a class="menu-item" *ngFor="let item of items" href="http://www.google.com">
+                                {{ item.text }}
+                            </a>
+                        </div>
+                    </overlay>
+                </div>
+                <div class="menu-section">
+                    <p>
+                        With buttons position before
+                    </p>
+                    <mat-toolbar class="end-icon">
+                        <button mat-icon-button (click)="posXMenu.show($event)">
+							<mat-icon>more_vert</mat-icon>
+						</button>
+                    </mat-toolbar>
+
+                    <overlay #posXMenu
+                             class="before"
+                             positions="end bottom end top">
+                        <div class="deja-menu-content">
+                            <button class="menu-item" *ngFor="let item of items" (click)="posXMenu.close()">
+								{{ item.text }}
+							</button>
+                        </div>
+                    </overlay>
+                </div>
+
+                <div class="menu-section">
+                    <p>
+                        With ul/li, position top
+                    </p>
+                    <mat-toolbar>
+                        <button mat-icon-button (click)="posYMenu.show($event)">
+							<mat-icon>more_vert</mat-icon>
+						</button>
+                    </mat-toolbar>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
@@ -0,0 +1,30 @@
+overlay-demo {
+    #demo-deja-menu {
+        display: flex;
+        flex-flow: row;
+
+        .menu-section {
+            width: 300px;
+            margin: 0.5rem;
+        }
+
+        .end-icon {
+            align-items: flex-end;
+        }
+    }
+}
+
+.overlay-container {
+    .deja-menu-content {
+        &#anchorMenu {
+            .menu-item {
+                white-space: nowrap;
+                padding: 0.5rem 2rem;
+            }
+        }
+
+        .mat-icon {
+            margin-right: 0.5rem;
+        }
+    }
+}
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.ts b/projects/demo-app/src/app/overlay/overlay-demo.component.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+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 { MatToolbarModule } from '@angular/material/toolbar';
+import { OverlayComponent } from '@hug/ngx-overlay';
+
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-overlay-demo',
+    styleUrls: ['./overlay-demo.component.scss'],
+    templateUrl: './overlay-demo.component.html',
+    standalone: true,
+    imports: [
+        CommonModule,
+        OverlayComponent,
+        FormsModule,
+        MatButtonModule,
+        MatCardModule,
+        MatIconModule,
+        MatTabsModule,
+        MatToolbarModule
+    ]
+})
+export class OverlayDemoComponent {
+    @ViewChild('contextMenu')
+    private contextMenu?: OverlayComponent;
+
+    public selected = '';
+    public items = [
+        { text: 'Refresh' },
+        { text: 'Settings' },
+        { text: 'Help', disabled: true },
+        { text: 'Sign Out' }
+    ];
+
+    public tabIndex = 1;
+
+    public select(text: string): void {
+        this.selected = text;
+    }
+
+    public onContextMenu(event: MouseEvent): boolean {
+        const parent = event.currentTarget as HTMLElement;
+        const parentRect = parent.getBoundingClientRect();
+        this.contextMenu?.show(event.pageX - parentRect.left, event.pageY - parentRect.top);
+        event.preventDefault();
+        return false;
+    }
+}
diff --git a/projects/demo-app/src/main.ts b/projects/demo-app/src/main.ts
@@ -1,14 +1,19 @@
 import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
 
 import { AppComponent } from './app/app.component';
+import { appRoutes } from './app/app.routes';
 import { environment } from './environments/environment';
 
 if (environment.production) {
     enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-    providers: [provideAnimations()]
+    providers: [
+        provideAnimations(),
+        provideRouter(appRoutes, withPreloading(PreloadAllModules))
+    ]
 }).catch(err => console.error(err));