Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use help mode with on push change detection

Browse Source
This commit is contained in:
Dan Percic 2021-08-23 12:59:25 +03:00
parent a935fb413b
commit c20bac8232
6 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/icons/help-outline.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero">
<g id="help-button" transform="translate(1294.000000, 635.000000)">
<g id="help" transform="translate(114.000000, 10.000000)">
<path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
src/lib/common-ui.module.ts
View File

@ -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`));

5
src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts
View File

@ -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 {}

23
src/lib/help-mode/help-mode.service.ts
View File

@ -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<string, Helper> = {};
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<HelpModeDialogComponent> {
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();
}

15
src/lib/help-mode/help-mode/help-mode.component.html
View File

@ -1,20 +1,17 @@
<div class="help-button" *ngIf="!helpModeService.isHelpModeActive" (click)="helpModeService.activateHelpMode()">
<mat-icon svgIcon="red:help-outline"></mat-icon>
<div class="help-button" *ngIf="(helpModeService.isHelpModeActive$ | async) === false" (click)="helpModeService.activateHelpMode()">
<mat-icon svgIcon="iqser:help-outline"></mat-icon>
<div class="text">{{ 'help-mode.button-text' | translate }}</div>
</div>
<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive">
<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive$ | async">
<div class="bottom">
<p class="heading">{{ 'help-mode.text' | translate }}</p>
<a class="instructions" *ngIf="!helpModeService.helpModeDialogIsOpened" (click)="helpModeService.openHelpModeDialog()">
<a *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false" (click)="helpModeService.openHelpModeDialog()">
{{ 'help-mode.instructions' | translate }}
</a>
<div class="close">
(esc)
<iqser-circle-button
class="dialog-close"
icon="iqser:close"
(click)="helpModeService.deactivateHelpMode()"
></iqser-circle-button>
<iqser-circle-button icon="iqser:close" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
</div>
</div>
</div>

5
src/lib/help-mode/help-mode/help-mode.component.ts
View File

@ -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) {}