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

added functionality for help mode to highlight helper elements when clicking outside of them

Browse Source
This commit is contained in:
Valentin 2021-08-14 16:46:22 +03:00
parent 23c298b6f6
commit 4c515eb165
6 changed files with 89 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/red-ui/src/app/components/help-mode/help-mode.component.html
View File

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

1
apps/red-ui/src/app/components/help-mode/help-mode.component.scss
View File

@ -46,7 +46,6 @@
border-bottom: 60px solid $green-2;
z-index: 10;
position: absolute;
pointer-events: none;
display: flex;
justify-content: center;

16
apps/red-ui/src/app/components/help-mode/help-mode.component.ts
View File

@ -9,22 +9,22 @@ import { HelpModeService } from '@shared/services/help-mode.service';
export class HelpModeComponent {
constructor(readonly helpModeService: HelpModeService) {}
activateHelpMode() {
this.helpModeService.isHelpModeActive = true;
this.helpModeService.openHelpModeDialog();
}
@HostListener('document:keydown.escape') onEscKeydownHandler() {
if (!this.helpModeService.helpModeDialogIsOpened) {
this.helpModeService.isHelpModeActive = false;
this.helpModeService.deactivateHelpMode();
}
}
@HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
const node = event?.target?.nodeName?.toLocaleLowerCase();
console.log(node);
if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
this.activateHelpMode();
this.helpModeService.activateHelpMode();
}
}
@HostListener('click') onClick() {
if (this.helpModeService.isHelpModeActive) {
this.helpModeService.highlightHelperElements();
}
}
}

50
apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
View File

@ -1,4 +1,4 @@
import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { HelpModeService } from '@shared/services/help-mode.service';
import * as links from '../../../../assets/help-mode/links.json';
import { LanguageService } from '@i18n/language.service';
@ -7,8 +7,8 @@ import { LanguageService } from '@i18n/language.service';
selector: '[redactionHelpMode]',
exportAs: 'redactionHelpMode'
})
export class HelpModeDirective {
@Input('redactionHelpMode') element: string;
export class HelpModeDirective implements OnInit {
@Input('redactionHelpMode') elementName: string;
private _lastChildCreated = null;
constructor(
@ -18,37 +18,25 @@ export class HelpModeDirective {
private readonly _languageService: LanguageService
) {}
ngOnInit(): void {
this._createHelperElement();
}
private _createHelperElement() {
const element = this._elementRef.nativeElement;
const helperElement = this._renderer.createElement('div');
this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
this._helpModeService.elements.push(element);
this._helpModeService.helperElements[this.elementName] = helperElement;
}
@HostListener('click') onClick() {
if (this._helpModeService.isHelpModeActive) {
const currentLocale = this._languageService.currentLanguage;
window.open(links[this.element][currentLocale]);
}
}
@HostListener('mouseover') onMouseOver() {
if (this._helpModeService.isHelpModeActive && !this._lastChildCreated) {
const element = this._elementRef.nativeElement;
this._renderer.setStyle(element, 'position', 'relative');
this._lastChildCreated = this._renderer.createElement('div');
this._renderer.addClass(this._lastChildCreated, 'help-mode-on-mouse-over');
this._renderer.addClass(this._lastChildCreated, `help-mode-on-mouse-over-${this.element}`);
if (this.element === 'quick-filters') {
this._renderer.insertBefore(element, this._lastChildCreated, element.firstChild);
} else {
this._renderer.appendChild(element, this._lastChildCreated);
}
}
}
@HostListener('mouseleave') onMouseLeave() {
if (this._helpModeService.isHelpModeActive && this._lastChildCreated) {
const element = this._elementRef.nativeElement;
this._renderer.removeStyle(element, 'position');
this._renderer.removeChild(element, this._lastChildCreated);
this._lastChildCreated = null;
window.open(links[this.elementName][currentLocale]);
}
}
}

53
apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
View File

@ -1,6 +1,7 @@
import { Injectable } from '@angular/core';
import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { HelpModeDialogComponent } from '@components/help-mode-dialog/help-mode-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { forEach } from 'lodash';
@Injectable({
providedIn: 'root'
@ -8,8 +9,14 @@ import { MatDialog } from '@angular/material/dialog';
export class HelpModeService {
isHelpModeActive = false;
helpModeDialogIsOpened = false;
elements = [];
helperElements = {};
constructor(private readonly _dialog: MatDialog) {}
private _renderer: Renderer2;
constructor(private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2) {
this._renderer = this._rendererFactory.createRenderer(null, null);
}
openHelpModeDialog() {
this.helpModeDialogIsOpened = true;
@ -22,4 +29,46 @@ export class HelpModeService {
this.helpModeDialogIsOpened = false;
});
}
activateHelpMode() {
this.isHelpModeActive = true;
this.openHelpModeDialog();
this._enableHelperElements();
}
deactivateHelpMode() {
this.isHelpModeActive = false;
this._disableHelperElements();
}
highlightHelperElements() {
for (const key of Object.keys(this.helperElements)) {
this._renderer.addClass(this.helperElements[key], 'highlight');
setTimeout(() => {
this._renderer.removeClass(this.helperElements[key], 'highlight');
}, 500);
}
}
private _enableHelperElements() {
for (const [index, [elementName, helperElement]] of Object.entries(Object.entries(this.helperElements))) {
const element = this.elements[index];
this._renderer.setStyle(element, 'position', 'relative');
if (elementName === 'quick-filters') {
this._renderer.insertBefore(element, helperElement, element.firstChild);
} else {
this._renderer.appendChild(element, helperElement);
}
}
}
private _disableHelperElements() {
for (const [index, [elementName, helperElement]] of Object.entries(Object.entries(this.helperElements))) {
const element = this.elements[index];
this._renderer.removeStyle(element, 'position');
this._renderer.removeChild(element, helperElement);
}
}
}

12
apps/red-ui/src/assets/styles/red-help-mode.scss
View File

@ -1,9 +1,7 @@
@import 'variables';
.help-mode-on-mouse-over {
background: rgba(92, 229, 148, 0.5);
z-index: 1;
box-shadow: 0 0 0 2px $green-2 inset;
z-index: 100;
position: absolute;
top: -5px;
left: -5px;
@ -11,6 +9,13 @@
height: 100%;
padding-right: 5px;
padding-bottom: 10px;
transition: all 0.25s;
}
.highlight,
.help-mode-on-mouse-over:hover {
background: rgba(92, 229, 148, 0.5);
box-shadow: 0 0 0 2px $green-2 inset;
cursor: help;
}
@ -20,7 +25,6 @@
padding-right: 10px;
}
.help-mode-on-mouse-over-search,
.help-mode-on-mouse-over-notifications {
padding-left: 4px;
}