From 74cc405b41efd9d7349171124c4f93a8165c0ea3 Mon Sep 17 00:00:00 2001 From: Badisi Date: Mon, 24 Jun 2024 18:07:09 +0200 Subject: [PATCH] fix: fix some issues --- .../core/src/styles/mixins/_menu-theme.scss | 21 +++--- projects/core/src/styles/mixins/_menu.scss | 70 ++++++++++--------- projects/overlay/src/overlay.component.html | 20 +++++- projects/overlay/src/overlay.component.ts | 15 ++-- projects/tooltip/src/tooltip.directive.ts | 17 +++-- 5 files changed, 88 insertions(+), 55 deletions(-) diff --git a/projects/core/src/styles/mixins/_menu-theme.scss b/projects/core/src/styles/mixins/_menu-theme.scss index e3a95e42..faba5bf8 100644 --- 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 index 49cfc4f1..08d36591 100644 --- 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 index 8f656048..4e227c9c 100644 --- a/projects/overlay/src/overlay.component.html +++ b/projects/overlay/src/overlay.component.html @@ -1,5 +1,21 @@ - - + + + + + diff --git a/projects/overlay/src/overlay.component.ts b/projects/overlay/src/overlay.component.ts index feeda935..4a06e4b4 100644 --- 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,6 +11,7 @@ export interface ShowParams { event?: MouseEvent; offsetX?: number; offsetY?: number; + context?: unknown; } interface OverlayInfos { @@ -18,6 +19,7 @@ interface OverlayInfos { 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; + /** 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 index fed4cb05..c9f054b8 100644 --- 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; - public constructor(elementRef: ElementRef) { + public constructor(elementRef: ElementRef) { 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(triggerElement, 'mouseleave'); + fromEvent(triggerElement, 'mouseenter').pipe( switchMap(() => timer(this.delay).pipe( take(1),