From 4902994643b207eac23caa63fd0f6e419e070710 Mon Sep 17 00:00:00 2001 From: mwiraszka Date: Fri, 27 Dec 2024 18:51:54 +0200 Subject: [PATCH] fix: Remove tooltip from dialog header to fix circular dependency issue; feat: Create an lcc-icon-button class to wrap icons in a button tag with no default styling added; feat: Remove need for full-screen overlay for Photo Viewer buttons, allowing click events to be handled as expected now --- .../components/dialog/dialog.component.scss | 6 +--- src/app/components/dialog/dialog.component.ts | 16 ++++----- .../photo-viewer/photo-viewer.component.html | 36 ++++++++----------- .../photo-viewer/photo-viewer.component.scss | 27 +++++++------- .../photo-viewer/photo-viewer.component.ts | 31 ++-------------- .../components/tooltip/tooltip.directive.ts | 1 + .../upcoming-event-banner.component.html | 13 ++++--- .../upcoming-event-banner.component.scss | 3 -- .../schedule/schedule-screen.component.ts | 4 +-- src/app/services/dialog.service.ts | 25 ++++++------- src/styles/components/_button.scss | 17 +++++++++ 11 files changed, 76 insertions(+), 103 deletions(-) diff --git a/src/app/components/dialog/dialog.component.scss b/src/app/components/dialog/dialog.component.scss index 8b59496b..9f4e18e3 100644 --- a/src/app/components/dialog/dialog.component.scss +++ b/src/app/components/dialog/dialog.component.scss @@ -19,15 +19,11 @@ $header-border-bottom-thickness: 2px; border-bottom: $header-border-bottom-thickness solid var(--lcc-color--dialog-headerBorderBottom); - .close-icon { + .close-button { margin: 0 4px 0 auto; - background-color: unset; - height: calc($header-height - 4px); - width: calc($header-height - 4px); color: var(--lcc-color--dialog-closeIcon); &:hover { - cursor: pointer; color: var(--lcc-color--dialog-closeIconOnHover); } } diff --git a/src/app/components/dialog/dialog.component.ts b/src/app/components/dialog/dialog.component.ts index 87c40b04..0b8565a0 100644 --- a/src/app/components/dialog/dialog.component.ts +++ b/src/app/components/dialog/dialog.component.ts @@ -9,7 +9,6 @@ import { ViewContainerRef, } from '@angular/core'; -import { TooltipDirective } from '@app/components/tooltip/tooltip.directive'; import IconsModule from '@app/icons'; import { DIALOG_CONFIG_TOKEN } from '@app/services'; import type { DialogConfig, DialogOutput } from '@app/types'; @@ -18,18 +17,19 @@ import type { DialogConfig, DialogOutput } from '@app/types'; selector: 'lcc-dialog', template: `
- - +
`, styleUrl: './dialog.component.scss', - imports: [IconsModule, TooltipDirective], + imports: [IconsModule], }) export class DialogComponent, TResult> implements AfterViewInit diff --git a/src/app/components/photo-viewer/photo-viewer.component.html b/src/app/components/photo-viewer/photo-viewer.component.html index 52619a42..311a3ab0 100644 --- a/src/app/components/photo-viewer/photo-viewer.component.html +++ b/src/app/components/photo-viewer/photo-viewer.component.html @@ -1,25 +1,19 @@ -
-
- -
+
+ +
-
- -
+
+
diff --git a/src/app/components/photo-viewer/photo-viewer.component.scss b/src/app/components/photo-viewer/photo-viewer.component.scss index 41002c8b..d9d02323 100644 --- a/src/app/components/photo-viewer/photo-viewer.component.scss +++ b/src/app/components/photo-viewer/photo-viewer.component.scss @@ -18,29 +18,26 @@ figcaption { border-radius: var(--lcc-borderRadius--small); line-height: 20px; text-align: center; - // TODO: No idea why this is needed translate: 0 -2px; } -.navigation-buttons-container { - justify-self: center; - width: calc(100% - 16px); - max-width: calc(var(--lcc-width--appContent) + 100px); +.previous-photo-button-wrapper, +.next-photo-button-wrapper { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - align-items: center; - justify-content: space-between; - margin: 8px; + top: 50%; - .previous-photo-button, - .next-photo-button { + button { display: flex; padding: 8px; background-color: var(--lcc-color--photoViewer-buttonBackground) !important; } } + +.previous-photo-button-wrapper { + left: 40px; +} + +.next-photo-button-wrapper { + right: 40px; +} diff --git a/src/app/components/photo-viewer/photo-viewer.component.ts b/src/app/components/photo-viewer/photo-viewer.component.ts index 60470020..e6d676f3 100644 --- a/src/app/components/photo-viewer/photo-viewer.component.ts +++ b/src/app/components/photo-viewer/photo-viewer.component.ts @@ -2,12 +2,10 @@ import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, - ElementRef, EventEmitter, Input, Output, Renderer2, - ViewChild, } from '@angular/core'; import { TooltipDirective } from '@app/components/tooltip/tooltip.directive'; @@ -23,12 +21,6 @@ import { ImagePreloadDirective } from '../image-preload/image-preload.directive' imports: [CommonModule, IconsModule, ImagePreloadDirective, TooltipDirective], }) export class PhotoViewerComponent implements AfterViewInit, DialogOutput { - @ViewChild('navigationButtonsContainer') - navigationButtonsContainer?: ElementRef; - @ViewChild('previousPhotoButton') previousPhotoButton?: ElementRef; - @ViewChild('nextPhotoButton') nextPhotoButton?: ElementRef; - - private clickListener?: () => void; private keyListener?: () => void; @Input() index = 0; @@ -39,11 +31,10 @@ export class PhotoViewerComponent implements AfterViewInit, DialogOutput { constructor(private readonly renderer: Renderer2) {} ngAfterViewInit(): void { - setTimeout(() => this.initEventListeners()); + setTimeout(() => this.initKeyListener()); } ngOnDestroy(): void { - this.clickListener?.(); this.keyListener?.(); } @@ -55,25 +46,7 @@ export class PhotoViewerComponent implements AfterViewInit, DialogOutput { this.index = this.index < this.photos.length - 1 ? this.index + 1 : 0; } - private initEventListeners(): void { - this.clickListener = this.renderer.listen( - this.navigationButtonsContainer?.nativeElement, - 'click', - (event: MouseEvent) => { - if ( - event.target instanceof Node && - !this.previousPhotoButton?.nativeElement.contains(event.target) && - !this.nextPhotoButton?.nativeElement.contains(event.target) - ) { - // Due to absolute positioning on navigation buttons, default backdrop event listener in - // dialog service is overridden, and unable to easily gain access to DOM elements behind - // the buttons overlay to set up new click listeners. So instead, this is set up to close - // when anything but the previous and next buttons (and for reason the label) are clicked - this.dialogResult.emit('close'); - } - }, - ); - + private initKeyListener(): void { this.keyListener = this.renderer.listen( 'document', 'keydown', diff --git a/src/app/components/tooltip/tooltip.directive.ts b/src/app/components/tooltip/tooltip.directive.ts index 750047f8..546ee01b 100644 --- a/src/app/components/tooltip/tooltip.directive.ts +++ b/src/app/components/tooltip/tooltip.directive.ts @@ -64,6 +64,7 @@ export class TooltipDirective implements OnDestroy { ], }); + // TODO: Prevent unstyled tooltip text from displaying briefly on rapid mousemove events const componentPortal = new ComponentPortal( TooltipComponent, this.viewContainerRef, diff --git a/src/app/components/upcoming-event-banner/upcoming-event-banner.component.html b/src/app/components/upcoming-event-banner/upcoming-event-banner.component.html index ae36b15a..e759439b 100644 --- a/src/app/components/upcoming-event-banner/upcoming-event-banner.component.html +++ b/src/app/components/upcoming-event-banner/upcoming-event-banner.component.html @@ -12,11 +12,14 @@ {{ nextEvent.eventDate | formatDate: 'short' }} - - + +
} diff --git a/src/app/components/upcoming-event-banner/upcoming-event-banner.component.scss b/src/app/components/upcoming-event-banner/upcoming-event-banner.component.scss index 12741bbe..1638a137 100644 --- a/src/app/components/upcoming-event-banner/upcoming-event-banner.component.scss +++ b/src/app/components/upcoming-event-banner/upcoming-event-banner.component.scss @@ -71,12 +71,9 @@ } .close-icon { - height: 18px; - width: 18px; color: var(--lcc-color--upcomingEventBanner-closeIcon); &:hover { - cursor: pointer; color: var(--lcc-color--upcomingEventBanner-closeIconOnHover); } } diff --git a/src/app/screens/schedule/schedule-screen.component.ts b/src/app/screens/schedule/schedule-screen.component.ts index 37033cdb..c58e0fa9 100644 --- a/src/app/screens/schedule/schedule-screen.component.ts +++ b/src/app/screens/schedule/schedule-screen.component.ts @@ -27,9 +27,9 @@ export class ScheduleScreenComponent implements OnInit { ); constructor( - private readonly store: Store, - private readonly metaAndTitleService: MetaAndTitleService, @Inject(DOCUMENT) private _document: Document, + private readonly metaAndTitleService: MetaAndTitleService, + private readonly store: Store, ) {} ngOnInit(): void { diff --git a/src/app/services/dialog.service.ts b/src/app/services/dialog.service.ts index e44368b7..9f959b17 100644 --- a/src/app/services/dialog.service.ts +++ b/src/app/services/dialog.service.ts @@ -60,21 +60,16 @@ export class DialogService, TResult> { providers: [{ provide: DIALOG_CONFIG_TOKEN, useValue: dialogConfig }], }); - // const dialogComponentPortal = new ComponentPortal( - // DialogComponent, - // null, - // injector, - // ); - // this.dialogComponentRef = this.overlayRef.attach(dialogComponentPortal); - - // return firstValueFrom( - // this.dialogComponentRef.instance.result.pipe(tap(() => this.close())), - // ); - return new Promise(resolve => { - setTimeout(() => { - resolve('close'); - }, 300); - }); + const dialogComponentPortal = new ComponentPortal( + DialogComponent, + null, + injector, + ); + this.dialogComponentRef = this.overlayRef.attach(dialogComponentPortal); + + return firstValueFrom( + this.dialogComponentRef.instance.result.pipe(tap(() => this.close())), + ); } public close(): void { diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss index d8e25ace..b5ecca97 100644 --- a/src/styles/components/_button.scss +++ b/src/styles/components/_button.scss @@ -79,3 +79,20 @@ background-color: var(--lcc-color--button-warningButtonBackgroundOnHover); } } + +.lcc-icon-button { + background-color: unset; + border: none; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + cursor: pointer; + } + + i-feather { + height: 18px; + width: 18px; + } +}