From c8ac2b49fa14b9201b64ef2db3c89cbc98ef9a24 Mon Sep 17 00:00:00 2001 From: Serge Date: Thu, 4 Jul 2024 12:29:57 +0200 Subject: [PATCH] fix: overlay-demo.component and add demo --- .vscode/settings.json | 2 +- projects/demo-app/src/app/app.component.html | 32 ++++- projects/demo-app/src/app/app.component.scss | 33 +++++ .../demo-app/src/app/app.component.spec.ts | 30 ----- projects/demo-app/src/app/app.component.ts | 40 +++++- projects/demo-app/src/app/app.routes.ts | 6 +- .../app/overlay/overlay-demo.component.html | 123 ++++++++++++++++++ .../app/overlay/overlay-demo.component.scss | 30 +++++ .../src/app/overlay/overlay-demo.component.ts | 55 ++++++++ projects/demo-app/src/main.ts | 7 +- projects/demo-app/src/styles.scss | 1 + projects/overlay/package.json | 2 +- projects/overlay/src/overlay.component.ts | 38 ++++-- 13 files changed, 345 insertions(+), 54 deletions(-) delete mode 100644 projects/demo-app/src/app/app.component.spec.ts create mode 100644 projects/demo-app/src/app/overlay/overlay-demo.component.html create mode 100644 projects/demo-app/src/app/overlay/overlay-demo.component.scss create mode 100644 projects/demo-app/src/app/overlay/overlay-demo.component.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index d4cfe13c..bfdf84c8 100644 --- 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 index 0f5bda97..b0ecf3fc 100644 --- a/projects/demo-app/src/app/app.component.html +++ b/projects/demo-app/src/app/app.component.html @@ -1 +1,31 @@ -Hello World +
+ + +

@hug/ngx-components Demo

+ + + + + + + menu + Overlay + + + + + + + + +
\ No newline at end of file diff --git a/projects/demo-app/src/app/app.component.scss b/projects/demo-app/src/app/app.component.scss index e69de29b..40d009e5 100644 --- 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 `` 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 + `` 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 deleted file mode 100644 index d747e171..00000000 --- a/projects/demo-app/src/app/app.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent] - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it('should have the \'demo-app\' title property', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('demo-app'); - }); - - it('should render example', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('b')?.textContent).toContain('Hello World'); - }); -}); diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts index 81e6cd67..6b247cbb 100644 --- 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 index dc39edb5..7ce24d14 100644 --- 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 new file mode 100644 index 00000000..77892800 --- /dev/null +++ b/projects/demo-app/src/app/overlay/overlay-demo.component.html @@ -0,0 +1,123 @@ + + + + + + + TODO + + +
+ +
+
    +
  • + delete_sweep Context menu +
    • +
  • + content_copy Dupliquer +
    • +
  • + edit Editer +
    • +
+
+ + + Overlay + + +
+
    +
  • + delete_sweep Supprimer +
    • +
  • + content_copy Dupliquer +
    • +
  • + edit Editer +
    • +
+
+ + +
+
+

You clicked on: {{ selected }}

+ + + + + + +
+ +
+ +
+
+

Clicking these will navigate:

+ + + + + +
+ + {{ item.text }} + +
+ +
+
+

+ With buttons position before +

+ + + + + +
+ +
+ +
+ +
+

+ With ul/li, position top +

+ + + +
+
+ + +
\ No newline at end of file diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss new file mode 100644 index 00000000..a98e8d8f --- /dev/null +++ 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 new file mode 100644 index 00000000..8506dc0e --- /dev/null +++ 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 index 4a61f92e..c68b56b6 100644 --- a/projects/demo-app/src/main.ts +++ b/projects/demo-app/src/main.ts @@ -1,8 +1,10 @@ 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) { @@ -10,5 +12,8 @@ if (environment.production) { } bootstrapApplication(AppComponent, { - providers: [provideAnimations()] + providers: [ + provideAnimations(), + provideRouter(appRoutes, withPreloading(PreloadAllModules)) + ] }).catch(err => console.error(err)); diff --git a/projects/demo-app/src/styles.scss b/projects/demo-app/src/styles.scss index c99331b8..472dc441 100644 --- a/projects/demo-app/src/styles.scss +++ b/projects/demo-app/src/styles.scss @@ -44,6 +44,7 @@ html, body { height: 100%; } + body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; diff --git a/projects/overlay/package.json b/projects/overlay/package.json index a0732d58..c319d89a 100644 --- a/projects/overlay/package.json +++ b/projects/overlay/package.json @@ -1,6 +1,6 @@ { "name": "@hug/ngx-overlay", - "version": "1.1.2", + "version": "1.1.3", "description": "HUG Angular - overlay component", "homepage": "https://github.com/dsi-hug/ngx-components", "license": "GPL-3.0-only", diff --git a/projects/overlay/src/overlay.component.ts b/projects/overlay/src/overlay.component.ts index 4a06e4b4..84e7b18c 100644 --- a/projects/overlay/src/overlay.component.ts +++ b/projects/overlay/src/overlay.component.ts @@ -1,9 +1,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; -import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule } from '@angular/cdk/overlay'; +import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule, OverlayRef } from '@angular/cdk/overlay'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { MediaService } from '@hug/ngx-core'; -import { BehaviorSubject, combineLatestWith, delay, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap } from 'rxjs'; +import { BehaviorSubject, combineLatestWith, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, ReplaySubject, shareReplay, startWith, Subject, switchMap, take } from 'rxjs'; import { defaultConnectionPositionPair, OverlayConnectionPositionPair } from './connection-position-pair'; @@ -50,11 +50,18 @@ export class OverlayComponent implements OnChanges { @ContentChild('content') protected contentTemplate?: TemplateRef; /** Overlay pane containing the options. */ - @ViewChild(CdkConnectedOverlay, { static: true }) private overlay?: CdkConnectedOverlay; + @ViewChild(CdkConnectedOverlay) protected set overlay(value: CdkConnectedOverlay | undefined) { + if (!value) { + return; + } + + this.overlayRef$.next(value.overlayRef); + } public readonly isVisible$: Observable; protected overlayInfos$: Observable; + protected overlayRef$ = new ReplaySubject(1); private show$ = new ReplaySubject(1); private hide$ = new Subject(); @@ -115,19 +122,22 @@ export class OverlayComponent implements OnChanges { const info$ = this.ownerElement$.pipe( combineLatestWith(isMobile$), - map(([ownerElement, isMobile]) => ({ - offsetX: showParams.offsetX && +showParams.offsetX || 0, - offsetY: showParams.offsetY && +showParams.offsetY || 0, - origin: new CdkOverlayOrigin(new ElementRef((isMobile && document.body) ?? showParams.event?.target ?? ownerElement ?? this.elementRef.nativeElement)), - width: isMobile ? this.widthForMobile : this.width, - context: showParams.context - } as OverlayInfos)) + map(([ownerElement, isMobile]) => { + const mobileElement = isMobile ? document.body : undefined; + return { + offsetX: showParams.offsetX && +showParams.offsetX || 0, + offsetY: showParams.offsetY && +showParams.offsetY || 0, + origin: new CdkOverlayOrigin(new ElementRef(mobileElement ?? showParams.event?.target ?? ownerElement ?? this.elementRef.nativeElement)), + width: isMobile ? this.widthForMobile : this.width, + context: showParams.context + } as OverlayInfos; + }) ); - const updatePosition$ = info$.pipe( - delay(1), - switchMap(() => { - this.overlay?.overlayRef?.updatePosition(); + const updatePosition$ = this.overlayRef$.pipe( + take(1), + switchMap(overlayRef => { + overlayRef.updatePosition(); return EMPTY; }) );