fix: fix some issues

DSI-HUG · Jun 24, 2024 · 74cc405 · 74cc405
1 parent 620b43e
commit 74cc405
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 55 deletions.
diff --git a/projects/core/src/styles/mixins/_menu-theme.scss b/projects/core/src/styles/mixins/_menu-theme.scss
@@ -1,34 +1,35 @@
-@use '@angular/material' as mat;
+@use "@angular/material" as mat;
 
 @mixin menu-theme($theme) {
     $primary: map-get($theme, primary);
 
-    .ngx-overlay-container {
+    .ngx-menu,
+    [ngx-menu] {
         .menu-content {
-            background-color: #FFF;
+            background-color: #fff;
             border-color: rgba(0, 0, 0, 0.3);
 
-            >ul,
+            > ul,
             &ul {
                 li {
-                    background-color: #FFF;
+                    background-color: #fff;
                     color: mat.get-color-from-palette($primary);
 
                     &:hover {
                         background-color: mat.get-color-from-palette($primary);
-                        color: #FFF;
+                        color: #fff;
                     }
                 }
             }
 
-            >button,
-            >a {
-                background-color: #FFF;
+            > button,
+            > a {
+                background-color: #fff;
                 color: mat.get-color-from-palette($primary);
 
                 &:hover {
                     background-color: mat.get-color-from-palette($primary);
-                    color: #FFF;
+                    color: #fff;
                 }
             }
         }

diff --git a/projects/core/src/styles/mixins/_menu.scss b/projects/core/src/styles/mixins/_menu.scss
@@ -1,43 +1,47 @@
 @mixin menu() {
-    .ngx-overlay-container {
-        .menu-content {
-            overflow-x: hidden;
-            overflow-y: auto;
-            height: 100%;
-            display: block;
-            border-style: solid;
-            border-width: 1px;
-            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-            padding: 0.5rem 0;
+    .ngx-menu,
+    [ngx-menu] {
+        .cdk-overlay-pane {
+            display: flex;
+            flex-direction: column;
 
-            >button,
-            >a {
-                cursor: pointer;
+            .menu-content {
+                overflow-x: hidden;
+                overflow-y: auto;
                 display: block;
-                border: none;
-                width: 100%;
-                padding: 0.5rem 1rem 0.5rem 1rem;
-            }
-
-            >a {
-                text-decoration: none;
-            }
+                border-style: solid;
+                border-width: 1px;
+                box-shadow:
+                    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+                    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+                height: 100%;
 
-            >ul,
-            &ul {
-                padding: 0;
-                margin: 0;
+                .menu-header,
+                .menu-footer {
+                    flex: 0 0 auto;
+                    padding: 0.5rem;
+                }
 
-                li {
-                    cursor: pointer;
-                    align-items: center;
+                > ul,
+                &ul {
+                    padding: 0;
+                    margin: 0;
                     display: flex;
-                    justify-content: flex-start;
-                    list-style-type: none;
-                    padding: 0.5rem 1rem 0.5rem 0.5rem;
+                    flex-direction: column;
+                    flex: 1 1 auto;
+
+                    li {
+                        cursor: pointer;
+                        align-items: center;
+                        display: flex;
+                        justify-content: flex-start;
+                        list-style-type: none;
+                        padding: 0.5rem;
 
-                    md-icon {
-                        margin: 0 0.5rem;
+                        md-icon {
+                            margin: 0 0.5rem;
+                        }
                     }
                 }
             }

diff --git a/projects/overlay/src/overlay.component.html b/projects/overlay/src/overlay.component.html
@@ -1,5 +1,21 @@
 <ng-container *ngIf="overlayInfos$ | async as overlayInfos">
-    <ng-template #overlayCmp cdk-connected-overlay [cdkConnectedOverlayHasBackdrop]="hasBackdrop" [cdkConnectedOverlayBackdropClass]="overlayBackdropClass" [cdkConnectedOverlayOpen]="true" [cdkConnectedOverlayOffsetY]="overlayInfos.offsetY" [cdkConnectedOverlayOffsetX]="overlayInfos.offsetX" [cdkConnectedOverlayOrigin]="overlayInfos.origin" (backdropClick)="close()" (detach)="close()" [cdkConnectedOverlayPositions]="positionPairs" [cdkConnectedOverlayWidth]="overlayInfos.width">
-        <ng-content></ng-content>
+    <ng-template #overlayCmp
+                 cdk-connected-overlay
+                 [cdkConnectedOverlayHasBackdrop]="hasBackdrop"
+                 [cdkConnectedOverlayBackdropClass]="overlayBackdropClass"
+                 [cdkConnectedOverlayOpen]="true"
+                 [cdkConnectedOverlayOffsetY]="overlayInfos.offsetY"
+                 [cdkConnectedOverlayOffsetX]="overlayInfos.offsetX"
+                 [cdkConnectedOverlayOrigin]="overlayInfos.origin"
+                 (backdropClick)="close()"
+                 (detach)="close()"
+                 [cdkConnectedOverlayPositions]="positionPairs"
+                 [cdkConnectedOverlayWidth]="overlayInfos.width">
+        <ng-template *ngIf="contentTemplate; else noContentTemplate"
+                     [ngTemplateOutlet]="contentTemplate"
+                     [ngTemplateOutletContext]="{$implicit: overlayInfos.context}"></ng-template>
+        <ng-template #noContentTemplate>
+            <ng-content></ng-content>
+        </ng-template>
     </ng-template>
 </ng-container>
diff --git a/projects/overlay/src/overlay.component.ts b/projects/overlay/src/overlay.component.ts
@@ -1,7 +1,7 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+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';
 
@@ -11,13 +11,15 @@ export interface ShowParams {
     event?: MouseEvent;
     offsetX?: number;
     offsetY?: number;
+    context?: unknown;
 }
 
 interface OverlayInfos {
     offsetX: number;
     offsetY: number;
     origin: CdkOverlayOrigin;
     width: string;
+    context: unknown;
 }
 
 @Component({
@@ -45,6 +47,8 @@ export class OverlayComponent implements OnChanges {
 
     @Input() public isMobile?: BooleanInput;
 
+    @ContentChild('content') protected contentTemplate?: TemplateRef<unknown>;
+
     /** Overlay pane containing the options. */
     @ViewChild(CdkConnectedOverlay, { static: true }) private overlay?: CdkConnectedOverlay;
 
@@ -115,7 +119,8 @@ export class OverlayComponent implements OnChanges {
                         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
+                        width: isMobile ? this.widthForMobile : this.width,
+                        context: showParams.context
                     } as OverlayInfos))
                 );
 
@@ -180,11 +185,11 @@ export class OverlayComponent implements OnChanges {
     }
 
     /** Affiche le dialog. */
-    public show(eventOrOffsetX?: MouseEvent | number, offsetY?: number): void {
+    public show(eventOrOffsetX?: MouseEvent | number, offsetY?: number, context?: unknown): void {
         if (typeof eventOrOffsetX === 'number') {
-            this.show$.next({ offsetX: eventOrOffsetX, offsetY });
+            this.show$.next({ offsetX: eventOrOffsetX, offsetY, context });
         } else {
-            this.show$.next({ event: eventOrOffsetX, offsetY });
+            this.show$.next({ event: eventOrOffsetX, offsetY, context });
         }
     }
 

diff --git a/projects/tooltip/src/tooltip.directive.ts b/projects/tooltip/src/tooltip.directive.ts
@@ -12,23 +12,30 @@ export class TooltipDirective extends Destroy {
 
     @Input('app-tooltip') public openTooltip$?: (element: HTMLElement) => Observable<void>;
 
-    public constructor(elementRef: ElementRef) {
+    public constructor(elementRef: ElementRef<HTMLElement>) {
         super();
 
-        const triggerElement = elementRef.nativeElement as HTMLElement;
+        const triggerElement = elementRef.nativeElement;
 
         // Install global CSS if not already present
         const docEl = triggerElement.ownerDocument;
         if (!docEl.head.querySelector('style[data-ngx-tooltip]')) {
             const styleEl = docEl.createElement('style');
             styleEl.setAttribute('data-ngx-tooltip', '');
-            styleEl.textContent =
-                '.tooltip-opening { opacity: 0; visibility: hidden; transition: opacity 200ms linear; } ' +
-                '.tooltip-opening.tooltip-opened { opacity: 1; visibility: visible; }';
+            styleEl.textContent = `.tooltip-opening {
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 200ms linear;
+            }
+            .tooltip-opening.tooltip-opened {
+                opacity: 1;
+                visibility: visible;
+            }`;
             docEl.head.appendChild(styleEl);
         }
 
         const leave$ = fromEvent<MouseEvent>(triggerElement, 'mouseleave');
+
         fromEvent<MouseEvent>(triggerElement, 'mouseenter').pipe(
             switchMap(() => timer(this.delay).pipe(
                 take(1),