From 786d235de0dd890c37baa8d2d8d854c76aa3d4f7 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 16 May 2024 18:46:25 +0300 Subject: [PATCH 1/9] 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/9] 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/9] 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/9] 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 { From 5cc09f251ee172c8b539238d80f0ed251f1640ef Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 20 May 2024 10:39:36 +0300 Subject: [PATCH 5/9] fix build --- src/lib/dialog/base-dialog.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/dialog/base-dialog.component.ts b/src/lib/dialog/base-dialog.component.ts index 4a43972..b4bffb3 100644 --- a/src/lib/dialog/base-dialog.component.ts +++ b/src/lib/dialog/base-dialog.component.ts @@ -16,6 +16,7 @@ const TEXT_INPUT = 'text'; export interface SaveOptions { closeAfterSave?: boolean; nextAction?: boolean; + addMembers?: boolean; } @Directive() From b7c8634407b3f2b4e071a22a9f338ddac010c814 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 20 May 2024 14:31:30 +0300 Subject: [PATCH 6/9] removed base dialog from help mode dialog --- .../help-mode-dialog/help-mode-dialog.component.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 d3c0ef4..935eccf 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,6 +1,4 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; -import { BaseDialogComponent } from '../../dialog'; -import { MatDialogRef } from '@angular/material/dialog'; const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200'; const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; @@ -10,12 +8,12 @@ const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; styleUrls: ['./help-mode-dialog.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy { +export class HelpModeDialogComponent implements OnInit, OnDestroy { protected doNotShowAgainOption = false; - constructor(protected readonly _dialogRef: MatDialogRef) { - super(_dialogRef); - } + // constructor(protected readonly _dialogRef: MatDialogRef) { + // super(_dialogRef); + // } ngOnInit(): void { this._setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX); @@ -34,7 +32,7 @@ export class HelpModeDialogComponent extends BaseDialogComponent implements OnIn } close() { - return this._dialogRef.close(this.doNotShowAgainOption); + // return this._dialogRef.close(this.doNotShowAgainOption); } private _setCdkOverlayContainerZIndex(zIndex: string): void { From 848e46cf6abc9cafbca5158540e34c65e8dde73d Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 20 May 2024 16:27:20 +0300 Subject: [PATCH 7/9] removed user preferences service from help mode service --- src/lib/help-mode/help-mode.service.ts | 30 ++++++++++++-------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 0986478..059ab2a 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -17,7 +17,6 @@ import { WEB_VIEWER_ELEMENTS, } from './utils/constants'; import { getConfig } from '../services'; -import { UserPreferenceService } from '../../../../../apps/red-ui/src/app/users/user-preference.service'; import { MatDialog } from '@angular/material/dialog'; export interface Helper { @@ -54,7 +53,6 @@ export class HelpModeService { private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2, private readonly _translateService: TranslateService, - private readonly _userPreferencesService: UserPreferenceService, ) { this.#renderer = this._rendererFactory.createRenderer(null, null); } @@ -68,20 +66,20 @@ export class HelpModeService { } async openHelpModeDialog() { - if (!this._userPreferencesService.getHelpModeDialog()) { - this.#helpModeDialogIsOpened$.next(true); - - const ref = this._dialog.open(HelpModeDialogComponent, { - width: '600px', - }); - - firstValueFrom(ref.afterClosed()).then(result => { - this.#helpModeDialogIsOpened$.next(false); - if (result) { - this._userPreferencesService.toggleHelpModeDialog(); - } - }); - } + // if (!this._userPreferencesService.getHelpModeDialog()) { + // this.#helpModeDialogIsOpened$.next(true); + // + // const ref = this._dialog.open(HelpModeDialogComponent, { + // width: '600px', + // }); + // + // firstValueFrom(ref.afterClosed()).then(result => { + // this.#helpModeDialogIsOpened$.next(false); + // if (result) { + // this._userPreferencesService.toggleHelpModeDialog(); + // } + // }); + // } } activateHelpMode(dialogMode: boolean = false): void { From 174d77d2eaedb17b2e729efdc29a07e7942e46e5 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 20 May 2024 17:10:25 +0300 Subject: [PATCH 8/9] RED-8882 - moved help mode dialog preference into iqser-user-preferences.service --- .../help-mode-dialog.component.ts | 12 ++++--- src/lib/help-mode/help-mode.service.ts | 31 ++++++++++--------- .../services/iqser-user-preference.service.ts | 12 ++++++- 3 files changed, 34 insertions(+), 21 deletions(-) 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 935eccf..f44e035 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,4 +1,6 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material/dialog'; +import { BaseDialogComponent } from '../../dialog'; const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200'; const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; @@ -8,12 +10,12 @@ const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; styleUrls: ['./help-mode-dialog.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class HelpModeDialogComponent implements OnInit, OnDestroy { +export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy { protected doNotShowAgainOption = false; - // constructor(protected readonly _dialogRef: MatDialogRef) { - // super(_dialogRef); - // } + constructor(protected readonly _dialogRef: MatDialogRef) { + super(_dialogRef); + } ngOnInit(): void { this._setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX); @@ -32,7 +34,7 @@ export class HelpModeDialogComponent implements OnInit, OnDestroy { } close() { - // return this._dialogRef.close(this.doNotShowAgainOption); + return this._dialogRef.close(this.doNotShowAgainOption); } private _setCdkOverlayContainerZIndex(zIndex: string): void { diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 059ab2a..36e8a65 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -16,7 +16,7 @@ import { ScrollableParentViews, WEB_VIEWER_ELEMENTS, } from './utils/constants'; -import { getConfig } from '../services'; +import { getConfig, IqserUserPreferenceService } from '../services'; import { MatDialog } from '@angular/material/dialog'; export interface Helper { @@ -53,6 +53,7 @@ export class HelpModeService { private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2, private readonly _translateService: TranslateService, + private readonly _iqserUserPreferenceService: IqserUserPreferenceService, ) { this.#renderer = this._rendererFactory.createRenderer(null, null); } @@ -66,20 +67,20 @@ export class HelpModeService { } async openHelpModeDialog() { - // if (!this._userPreferencesService.getHelpModeDialog()) { - // this.#helpModeDialogIsOpened$.next(true); - // - // const ref = this._dialog.open(HelpModeDialogComponent, { - // width: '600px', - // }); - // - // firstValueFrom(ref.afterClosed()).then(result => { - // this.#helpModeDialogIsOpened$.next(false); - // if (result) { - // this._userPreferencesService.toggleHelpModeDialog(); - // } - // }); - // } + if (!this._iqserUserPreferenceService.getHelpModeDialog()) { + this.#helpModeDialogIsOpened$.next(true); + + const ref = this._dialog.open(HelpModeDialogComponent, { + width: '600px', + }); + + firstValueFrom(ref.afterClosed()).then(result => { + this.#helpModeDialogIsOpened$.next(false); + if (result) { + this._iqserUserPreferenceService.toggleHelpModeDialog(); + } + }); + } } activateHelpMode(dialogMode: boolean = false): void { diff --git a/src/lib/services/iqser-user-preference.service.ts b/src/lib/services/iqser-user-preference.service.ts index a841b8a..1bafc99 100644 --- a/src/lib/services/iqser-user-preference.service.ts +++ b/src/lib/services/iqser-user-preference.service.ts @@ -6,9 +6,10 @@ import { APP_BASE_HREF } from '@angular/common'; export type UserAttributes = Record; -const KEYS = { +export const KEYS = { language: 'Language', theme: 'Theme', + helpModeDialog: 'HelpModeDialog', } as const; @Injectable() @@ -43,6 +44,15 @@ export abstract class IqserUserPreferenceService extends GenericService { + const nextValue = (!this.getHelpModeDialog()).toString(); + await this.save(KEYS.helpModeDialog, nextValue); + } + toggleDevFeatures(): void { sessionStorage.setItem(this._devFeaturesEnabledKey, String(!this.isIqserDevMode)); window.location.reload(); From 4811d301e6980d3f7fb0125c673cb6b8b9b4f0cf Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 20 May 2024 19:06:58 +0300 Subject: [PATCH 9/9] RED-8882 - removed base dialog --- .../help-mode-dialog.component.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) 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 f44e035..e1908d1 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,6 +1,6 @@ -import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; -import { BaseDialogComponent } from '../../dialog'; +import { Subscription } from 'rxjs'; const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200'; const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; @@ -10,11 +10,18 @@ const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800'; styleUrls: ['./help-mode-dialog.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy { +export class HelpModeDialogComponent implements OnInit, OnDestroy { + #backdropClickSubscription: Subscription; protected doNotShowAgainOption = false; constructor(protected readonly _dialogRef: MatDialogRef) { - super(_dialogRef); + this.#backdropClickSubscription = this._dialogRef.backdropClick().subscribe(() => this.close()); + } + + @HostListener('window:keydown.Enter', ['$event']) + @HostListener('window:keydown.Escape', ['$event']) + close() { + return this._dialogRef.close(this.doNotShowAgainOption); } ngOnInit(): void { @@ -23,20 +30,13 @@ export class HelpModeDialogComponent extends BaseDialogComponent implements OnIn ngOnDestroy(): void { this._setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX); + this.#backdropClickSubscription.unsubscribe(); } setDoNotShowAgainOption(checked: boolean): void { this.doNotShowAgainOption = checked; } - save() { - this.close(); - } - - close() { - return this._dialogRef.close(this.doNotShowAgainOption); - } - private _setCdkOverlayContainerZIndex(zIndex: string): void { const cdkOverlayContainer = document.querySelector('.cdk-overlay-container'); if (cdkOverlayContainer) {