diff --git a/src/assets/icons/help-outline.svg b/src/assets/icons/help-outline.svg new file mode 100644 index 0000000..2fd05c3 --- /dev/null +++ b/src/assets/icons/help-outline.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index c0bbebe..1b53185 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -56,7 +56,7 @@ const utils = [SortByPipe, HumanizePipe, SyncWidthDirective, HelpModeDirective]; }) export class CommonUiModule { constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) { - const icons = ['arrow-down', 'check', 'close', 'edit', 'sort-asc', 'sort-desc', 'search']; + const icons = ['arrow-down', 'check', 'close', 'edit', 'sort-asc', 'sort-desc', 'search', 'help-outline']; icons.forEach(icon => { _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`)); 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 38933ad..ae75872 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,7 +1,8 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ templateUrl: './help-mode-dialog.component.html', - styleUrls: ['./help-mode-dialog.component.scss'] + styleUrls: ['./help-mode-dialog.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class HelpModeDialogComponent {} diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index e471839..220d04b 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -1,6 +1,7 @@ import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { TranslateService } from '@ngx-translate/core'; +import { BehaviorSubject } from 'rxjs'; import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component'; import { HELP_DOCS } from '../utils/injection-tokens'; @@ -13,8 +14,10 @@ interface Helper { providedIn: 'root' }) export class HelpModeService { - isHelpModeActive = false; - helpModeDialogIsOpened = false; + private readonly _isHelpModeActive$ = new BehaviorSubject(false); + readonly isHelpModeActive$ = this._isHelpModeActive$.asObservable(); + private readonly _helpModeDialogIsOpened$ = new BehaviorSubject(false); + readonly helpModeDialogIsOpened$ = this._helpModeDialogIsOpened$.asObservable(); private readonly _elements: Record = {}; private readonly _renderer: Renderer2; @@ -28,8 +31,16 @@ export class HelpModeService { this._renderer = this._rendererFactory.createRenderer(null, null); } + get isHelpModeActive(): boolean { + return this._isHelpModeActive$.getValue(); + } + + get helpModeDialogIsOpened(): boolean { + return this._helpModeDialogIsOpened$.getValue(); + } + openHelpModeDialog(): MatDialogRef { - this.helpModeDialogIsOpened = true; + this._helpModeDialogIsOpened$.next(true); const ref = this._dialog.open(HelpModeDialogComponent, { width: '600px' @@ -38,7 +49,7 @@ export class HelpModeService { ref.afterClosed() .toPromise() .then(() => { - this.helpModeDialogIsOpened = false; + this._helpModeDialogIsOpened$.next(false); }); return ref; } @@ -50,13 +61,13 @@ export class HelpModeService { } activateHelpMode(): void { - this.isHelpModeActive = true; + this._isHelpModeActive$.next(true); this.openHelpModeDialog(); this._enableHelperElements(); } deactivateHelpMode(): void { - this.isHelpModeActive = false; + this._isHelpModeActive$.next(false); this._disableHelperElements(); } 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 2e86423..4a01d8b 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.html +++ b/src/lib/help-mode/help-mode/help-mode.component.html @@ -1,20 +1,17 @@ -
- +
+
{{ 'help-mode.button-text' | translate }}
-
+ +

{{ 'help-mode.text' | translate }}

- + {{ 'help-mode.instructions' | translate }}
(esc) - +
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 6293193..5709d51 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.ts +++ b/src/lib/help-mode/help-mode/help-mode.component.ts @@ -1,11 +1,12 @@ -import { Component, HostListener } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core'; import { HelpModeService } from '../help-mode.service'; import { IqserEventTarget } from '../../utils/types/events.type'; @Component({ selector: 'iqser-help-mode', templateUrl: './help-mode.component.html', - styleUrls: ['./help-mode.component.scss'] + styleUrls: ['./help-mode.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class HelpModeComponent { constructor(readonly helpModeService: HelpModeService) {}