From 786d235de0dd890c37baa8d2d8d854c76aa3d4f7 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 16 May 2024 18:46:25 +0300 Subject: [PATCH 1/4] RED-8882 - Help Mode design improvements --- src/assets/icons/help-outline-active.svg | 14 ++++ .../circle-button.component.html | 1 - .../circle-button/circle-button.component.ts | 1 - src/lib/buttons/types/circle-button.type.ts | 1 - .../help-button/help-button.component.html | 18 ++++-- .../help-button/help-button.component.scss | 64 +++++++++++++++++++ .../help-button/help-button.component.ts | 57 +++++++++++++---- .../help-mode-dialog.component.html | 3 + .../help-mode-dialog.component.ts | 25 ++++++-- src/lib/help-mode/help-mode.module.ts | 5 +- src/lib/help-mode/help-mode.service.ts | 19 +++--- .../help-mode/help-mode.component.html | 1 - .../help-mode/help-mode.component.ts | 5 -- 13 files changed, 170 insertions(+), 44 deletions(-) create mode 100644 src/assets/icons/help-outline-active.svg create mode 100644 src/lib/help-mode/help-button/help-button.component.scss diff --git a/src/assets/icons/help-outline-active.svg b/src/assets/icons/help-outline-active.svg new file mode 100644 index 0000000..c0271f7 --- /dev/null +++ b/src/assets/icons/help-outline-active.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/src/lib/buttons/circle-button/circle-button.component.html b/src/lib/buttons/circle-button/circle-button.component.html index fd481e3..ba7e816 100644 --- a/src/lib/buttons/circle-button/circle-button.component.html +++ b/src/lib/buttons/circle-button/circle-button.component.html @@ -3,7 +3,6 @@ (click)="performAction($event)" [class.dark-bg]="type === _circleButtonTypes.dark" [class.grey-selected]="greySelected" - [class.help]="type === _circleButtonTypes.help" [class.overlay]="showDot" [class.primary]="type === _circleButtonTypes.primary" [class.warn]="type === _circleButtonTypes.warn" diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts index 03dfe97..3e8e6ca 100644 --- a/src/lib/buttons/circle-button/circle-button.component.ts +++ b/src/lib/buttons/circle-button/circle-button.component.ts @@ -30,7 +30,6 @@ export class CircleButtonComponent implements OnInit { @Input() disabled = false; @Input() type: CircleButtonType = CircleButtonTypes.default; @Input() greySelected = false; - @Input() helpModeButton = false; @Input() removeTooltip = false; @Input() isSubmit = false; @Input() dropdownButton = false; diff --git a/src/lib/buttons/types/circle-button.type.ts b/src/lib/buttons/types/circle-button.type.ts index dd4494c..349c720 100644 --- a/src/lib/buttons/types/circle-button.type.ts +++ b/src/lib/buttons/types/circle-button.type.ts @@ -3,7 +3,6 @@ export const CircleButtonTypes = { primary: 'primary', warn: 'warn', dark: 'dark', - help: 'help', } as const; export type CircleButtonType = keyof typeof CircleButtonTypes; diff --git a/src/lib/help-mode/help-button/help-button.component.html b/src/lib/help-mode/help-button/help-button.component.html index 45fbb64..9f53692 100644 --- a/src/lib/help-mode/help-button/help-button.component.html +++ b/src/lib/help-mode/help-button/help-button.component.html @@ -1,6 +1,12 @@ - + diff --git a/src/lib/help-mode/help-button/help-button.component.scss b/src/lib/help-mode/help-button/help-button.component.scss new file mode 100644 index 0000000..c8bbedf --- /dev/null +++ b/src/lib/help-mode/help-button/help-button.component.scss @@ -0,0 +1,64 @@ +:host { + display: flex; + align-items: center; + width: 60px; +} + +.help-mode-slide-toggle { + display: inline-block; + position: relative; + width: 60px; + height: 34px; + cursor: pointer; + + &.active, &.dialog-toggle { + z-index: 1100; + } + + .toggle-input { + display: none; + } + + .toggle-track { + position: absolute; + top: 50%; + left: 0; + width: 100%; + height: 34px; + background-color: var(--iqser-grey-4); + border-radius: 20px; + transform: translateY(-50%); + } + + .toggle-thumb { + position: absolute; + top: 50%; + left: 4px; + width: 25px; + height: 25px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + transform: translateY(-50%); + transition: left 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + + mat-icon { + transform: scale(0.6); + } + + .active-thumb { + color: var(--iqser-helpmode-primary);; + } + } + + .toggle-input:checked + .toggle-track { + background: var(--iqser-helpmode-primary); + } + + .toggle-input:checked + .toggle-track + .toggle-thumb { + left: calc(100% - 30px); + } +} diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts index e924372..984c562 100644 --- a/src/lib/help-mode/help-button/help-button.component.ts +++ b/src/lib/help-mode/help-button/help-button.component.ts @@ -1,31 +1,60 @@ /* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; import { HelpModeService } from '../index'; @Component({ selector: 'iqser-help-button', templateUrl: './help-button.component.html', + styleUrls: ['./help-button.component.scss'], }) -export class HelpButtonComponent implements OnInit, OnDestroy { - @Input() dialogButton = false; - @Input() helpButtonKey?: string; +export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { + @Input() dialogButton = true; + helpModeButton: HTMLElement; - constructor(private readonly _helpModeService: HelpModeService) {} + constructor( + private readonly _elementRef: ElementRef, + readonly helpModeService: HelpModeService, + ) {} - ngOnInit(): void { - this._helpModeService.helpButtonKey = this.helpButtonKey; + get buttonId() { + return `help-mode-button${this.dialogButton ? '-dialog' : ''}`; } - ngOnDestroy(): void { - this._helpModeService.helpButtonKey = undefined; + ngOnInit() { + if (this.dialogButton) { + const defaultButton = document.getElementById('help-mode-button') as HTMLElement; + defaultButton.style.setProperty('z-index', '100'); + } } - activateHelpMode(): void { - if (this.helpButtonKey) { - const url = this._helpModeService.generateDocsLink(this.helpButtonKey); - window.open(url, '_blank'); + ngAfterViewInit() { + const currentComponent = this._elementRef.nativeElement; + this.helpModeButton = currentComponent.querySelector('.help-mode-slide-toggle'); + + if (this.helpModeButton) { + setTimeout(() => { + const currentComponentRect = currentComponent.getBoundingClientRect(); + this.helpModeButton.style.setProperty('position', 'fixed'); + this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`); + this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`); + document.body.appendChild(this.helpModeButton); + }, 500); + } + } + + ngOnDestroy() { + document.body.removeChild(this.helpModeButton); + if (this.dialogButton) { + const defaultButton = document.getElementById('help-mode-button') as HTMLElement; + defaultButton.style.removeProperty('z-index'); + } + } + + toggleHelpMode(): void { + if (this.helpModeService.isHelpModeActive) { + this.helpModeService.deactivateHelpMode(); return; } - this._helpModeService.activateHelpMode(this.dialogButton); + this.helpModeService.activateHelpMode(this.dialogButton); } } 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 42884bb..7eef302 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 @@ -3,6 +3,9 @@

+ + {{ '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 8d25698..39cde83 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,23 +1,40 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { IqserDialogComponent } from '../../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 implements OnInit, OnDestroy { +export class HelpModeDialogComponent + extends IqserDialogComponent + implements OnInit, OnDestroy +{ + protected doNotShowAgainOption = false; + + constructor() { + super(); + } + 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); } - private _setCdkOverlayContainerZindex(zIndex: string): void { + setDoNotShowAgainOption(checked: boolean): void { + this.doNotShowAgainOption = checked; + } + + #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 f0250c7..4fdd066 100644 --- a/src/lib/help-mode/help-mode.module.ts +++ b/src/lib/help-mode/help-mode.module.ts @@ -8,12 +8,15 @@ 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'; const components = [HelpModeComponent, HelpModeDialogComponent, HelpButtonComponent]; @NgModule({ declarations: [...components], - imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent], + imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox], 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 04f12a5..9c784a9 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -18,6 +18,7 @@ import { WEB_VIEWER_ELEMENTS, } from './utils/constants'; import { getConfig } from '../services'; +import { IqserDialog } from '../dialog'; export interface Helper { readonly element: HTMLElement; @@ -38,7 +39,6 @@ export interface HelpModeKey { @Injectable() export class HelpModeService { - helpButtonKey: string | undefined; readonly #isHelpModeActive$ = new BehaviorSubject(false); readonly isHelpModeActive$ = this.#isHelpModeActive$.asObservable(); readonly #helpModeDialogIsOpened$ = new BehaviorSubject(false); @@ -51,7 +51,7 @@ export class HelpModeService { constructor( @Inject(HELP_MODE_KEYS) private readonly _keys: HelpModeKey[], @Inject(MANUAL_BASE_URL) private readonly _manualBaseURL: string, - private readonly _dialog: MatDialog, + private readonly _iqserDialog: IqserDialog, private readonly _rendererFactory: RendererFactory2, private readonly _translateService: TranslateService, ) { @@ -66,17 +66,16 @@ export class HelpModeService { return this.#helpModeDialogIsOpened$.getValue(); } - openHelpModeDialog(): MatDialogRef { + openHelpModeDialog() { this.#helpModeDialogIsOpened$.next(true); - const ref = this._dialog.open(HelpModeDialogComponent, { + this._iqserDialog.open(HelpModeDialogComponent, { width: '600px', }); - firstValueFrom(ref.afterClosed()).then(() => { - this.#helpModeDialogIsOpened$.next(false); - }); - return ref; + // firstValueFrom(ref.afterClosed()).then(() => { + // this.#helpModeDialogIsOpened$.next(false); + // }); } activateHelpMode(dialogMode: boolean = false): void { @@ -137,7 +136,7 @@ export class HelpModeService { #getHelperElement(element: HTMLElement, key: string): HTMLElement { const helperElement = this.#renderer.createElement('a') as HTMLElement; - this.#renderer.setAttribute(helperElement, 'href', this.generateDocsLink(key)); + this.#renderer.setAttribute(helperElement, 'href', this.#generateDocsLink(key)); this.#renderer.setAttribute(helperElement, 'target', '_blank'); this.#renderer.addClass(helperElement, HELP_MODE_CLASS); if (this.#isDocumine) { @@ -150,7 +149,7 @@ export class HelpModeService { return Math.random().toString(36).substring(2, 9); } - generateDocsLink(key: string) { + #generateDocsLink(key: string) { const currentLang = this._translateService.currentLang; return `${this._manualBaseURL}/${currentLang}/index-${currentLang}.html?contextId=${key}`; } diff --git a/src/lib/help-mode/help-mode/help-mode.component.html b/src/lib/help-mode/help-mode/help-mode.component.html index 0f59d6e..f14bc48 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.html +++ b/src/lib/help-mode/help-mode/help-mode.component.html @@ -11,7 +11,6 @@ (click)="helpModeService.deactivateHelpMode()" [iconSize]="10" [size]="20" - [type]="circleButtonTypes.help" class="ml-8" icon="iqser:close" > diff --git a/src/lib/help-mode/help-mode/help-mode.component.ts b/src/lib/help-mode/help-mode/help-mode.component.ts index 6ff53e3..ce4ae7e 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.ts +++ b/src/lib/help-mode/help-mode/help-mode.component.ts @@ -30,11 +30,6 @@ export class HelpModeComponent { onHKeydownHandler(event: KeyboardEvent): void { const node = (event.target as IqserEventTarget).localName; if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') { - if (this.helpModeService.helpButtonKey) { - const url = this.helpModeService.generateDocsLink(this.helpModeService.helpButtonKey); - window.open(url, '_blank'); - return; - } const dialogMode = !!this._dialog.openDialogs.length; this.helpModeService.activateHelpMode(dialogMode); } From 252c2616211112e23a18151fafd9a127c800ca65 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 16 May 2024 18:47:35 +0300 Subject: [PATCH 2/4] lint --- src/lib/help-mode/help-button/help-button.component.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/help-mode/help-button/help-button.component.scss b/src/lib/help-mode/help-button/help-button.component.scss index c8bbedf..fad7ffe 100644 --- a/src/lib/help-mode/help-button/help-button.component.scss +++ b/src/lib/help-mode/help-button/help-button.component.scss @@ -11,7 +11,8 @@ height: 34px; cursor: pointer; - &.active, &.dialog-toggle { + &.active, + &.dialog-toggle { z-index: 1100; } @@ -50,7 +51,7 @@ } .active-thumb { - color: var(--iqser-helpmode-primary);; + color: var(--iqser-helpmode-primary); } } From 0021307c71c2d0b18de52dd3f14040b5730cd9c4 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Fri, 17 May 2024 17:50:32 +0300 Subject: [PATCH 3/4] 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 { From 217a44c2e0bd4fd2073aae8f7ed4f6626babbdfb Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Fri, 17 May 2024 18:59:48 +0300 Subject: [PATCH 4/4] removed not needed imports --- src/lib/help-mode/help-mode.module.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/help-mode/help-mode.module.ts b/src/lib/help-mode/help-mode.module.ts index 126cfee..f395c73 100644 --- a/src/lib/help-mode/help-mode.module.ts +++ b/src/lib/help-mode/help-mode.module.ts @@ -6,17 +6,15 @@ import { HelpButtonComponent } from './help-button/help-button.component'; import { HelpModeKey, HelpModeService } from './help-mode.service'; 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, HelpButtonComponent, HelpModeDialogComponent]; @NgModule({ declarations: [...components], - imports: [CommonModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox, MatDialogClose], + imports: [CommonModule, TranslateModule, CircleButtonComponent, MatCheckbox, MatIcon], exports: [...components], }) export class IqserHelpModeModule {