From 0021307c71c2d0b18de52dd3f14040b5730cd9c4 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Fri, 17 May 2024 17:50:32 +0300 Subject: [PATCH] RED-8882 - Help Mode design improvements --- src/lib/empty-state/empty-state.component.ts | 3 +- .../help-mode-dialog.component.html | 2 +- .../help-mode-dialog.component.ts | 29 ++++++++++--------- src/lib/help-mode/help-mode.module.ts | 8 ++--- src/lib/help-mode/help-mode.service.ts | 28 +++++++++++------- 5 files changed, 39 insertions(+), 31 deletions(-) diff --git a/src/lib/empty-state/empty-state.component.ts b/src/lib/empty-state/empty-state.component.ts index 622c31b..f6c7c59 100644 --- a/src/lib/empty-state/empty-state.component.ts +++ b/src/lib/empty-state/empty-state.component.ts @@ -3,7 +3,6 @@ import { IconButtonComponent, IconButtonTypes } from '../buttons'; import { randomString } from '../utils'; import { NgIf, NgStyle } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; -import { IqserHelpModeModule } from '../help-mode'; @Component({ selector: 'iqser-empty-state [text]', @@ -11,7 +10,7 @@ import { IqserHelpModeModule } from '../help-mode'; styleUrls: ['./empty-state.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent, IqserHelpModeModule], + imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent], }) export class EmptyStateComponent implements OnInit { readonly iconButtonTypes = IconButtonTypes; diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html index 7eef302..4fbffad 100644 --- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html +++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html @@ -7,5 +7,5 @@ {{ 'help-mode.options.do-not-show-again' | translate }} - + diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts index 39cde83..d3c0ef4 100644 --- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts +++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts @@ -1,40 +1,43 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; -import { IqserDialogComponent } from '../../dialog'; +import { BaseDialogComponent } from '../../dialog'; +import { MatDialogRef } from '@angular/material/dialog'; const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200'; const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; -interface HelpModeDialogData {} -interface HelpModeDialogResult {} - @Component({ templateUrl: './help-mode-dialog.component.html', styleUrls: ['./help-mode-dialog.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class HelpModeDialogComponent - extends IqserDialogComponent - implements OnInit, OnDestroy -{ +export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy { protected doNotShowAgainOption = false; - constructor() { - super(); + constructor(protected readonly _dialogRef: MatDialogRef) { + super(_dialogRef); } ngOnInit(): void { - this.#setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX); + this._setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX); } ngOnDestroy(): void { - this.#setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX); + this._setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX); } setDoNotShowAgainOption(checked: boolean): void { this.doNotShowAgainOption = checked; } - #setCdkOverlayContainerZIndex(zIndex: string): void { + save() { + this.close(); + } + + close() { + return this._dialogRef.close(this.doNotShowAgainOption); + } + + private _setCdkOverlayContainerZIndex(zIndex: string): void { const cdkOverlayContainer = document.querySelector('.cdk-overlay-container'); if (cdkOverlayContainer) { cdkOverlayContainer.style.zIndex = zIndex; diff --git a/src/lib/help-mode/help-mode.module.ts b/src/lib/help-mode/help-mode.module.ts index 4fdd066..126cfee 100644 --- a/src/lib/help-mode/help-mode.module.ts +++ b/src/lib/help-mode/help-mode.module.ts @@ -1,22 +1,22 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; -import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component'; import { HelpModeComponent } from './help-mode/help-mode.component'; import { HelpButtonComponent } from './help-button/help-button.component'; import { HelpModeKey, HelpModeService } from './help-mode.service'; -import { MatDialogModule } from '@angular/material/dialog'; import { CircleButtonComponent } from '../buttons'; import { HELP_MODE_KEYS } from './tokens'; import { MatSlideToggle } from '@angular/material/slide-toggle'; import { MatIcon } from '@angular/material/icon'; import { MatCheckbox } from '@angular/material/checkbox'; +import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component'; +import { MatDialogClose } from '@angular/material/dialog'; -const components = [HelpModeComponent, HelpModeDialogComponent, HelpButtonComponent]; +const components = [HelpModeComponent, HelpButtonComponent, HelpModeDialogComponent]; @NgModule({ declarations: [...components], - imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox], + imports: [CommonModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox, MatDialogClose], exports: [...components], }) export class IqserHelpModeModule { diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 9c784a9..0986478 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -1,5 +1,4 @@ import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; -import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { TranslateService } from '@ngx-translate/core'; import { BehaviorSubject, firstValueFrom } from 'rxjs'; import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component'; @@ -18,7 +17,8 @@ import { WEB_VIEWER_ELEMENTS, } from './utils/constants'; import { getConfig } from '../services'; -import { IqserDialog } from '../dialog'; +import { UserPreferenceService } from '../../../../../apps/red-ui/src/app/users/user-preference.service'; +import { MatDialog } from '@angular/material/dialog'; export interface Helper { readonly element: HTMLElement; @@ -51,9 +51,10 @@ export class HelpModeService { constructor( @Inject(HELP_MODE_KEYS) private readonly _keys: HelpModeKey[], @Inject(MANUAL_BASE_URL) private readonly _manualBaseURL: string, - private readonly _iqserDialog: IqserDialog, + private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2, private readonly _translateService: TranslateService, + private readonly _userPreferencesService: UserPreferenceService, ) { this.#renderer = this._rendererFactory.createRenderer(null, null); } @@ -66,16 +67,21 @@ export class HelpModeService { return this.#helpModeDialogIsOpened$.getValue(); } - openHelpModeDialog() { - this.#helpModeDialogIsOpened$.next(true); + async openHelpModeDialog() { + if (!this._userPreferencesService.getHelpModeDialog()) { + this.#helpModeDialogIsOpened$.next(true); - this._iqserDialog.open(HelpModeDialogComponent, { - width: '600px', - }); + const ref = this._dialog.open(HelpModeDialogComponent, { + width: '600px', + }); - // firstValueFrom(ref.afterClosed()).then(() => { - // this.#helpModeDialogIsOpened$.next(false); - // }); + firstValueFrom(ref.afterClosed()).then(result => { + this.#helpModeDialogIsOpened$.next(false); + if (result) { + this._userPreferencesService.toggleHelpModeDialog(); + } + }); + } } activateHelpMode(dialogMode: boolean = false): void {