+
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
index 9d76eb43c..6b4d04a32 100644
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
+++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
@@ -14,6 +14,7 @@
display: flex;
align-items: center;
justify-content: center;
+ transition: all 0.25s;
}
.help-button:hover {
@@ -45,7 +46,6 @@
border-bottom: 60px solid $green-2;
z-index: 10;
position: absolute;
- pointer-events: none;
display: flex;
justify-content: center;
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
index 9cae62bc8..c50754e22 100644
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
+++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
@@ -9,14 +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.deactivateHelpMode();
+ }
}
- @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
- if (!this.helpModeService.helpModeDialogIsOpened) {
- this.helpModeService.isHelpModeActive = false;
+ @HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
+ const node = event?.target?.nodeName?.toLocaleLowerCase();
+ if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
+ this.helpModeService.activateHelpMode();
+ }
+ }
+
+ @HostListener('click') onClick() {
+ if (this.helpModeService.isHelpModeActive) {
+ this.helpModeService.highlightHelperElements();
}
}
}
diff --git a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
index abb5ae7d4..dfc6d0f9f 100644
--- a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
+++ b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
@@ -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,9 +7,8 @@ import { LanguageService } from '@i18n/language.service';
selector: '[redactionHelpMode]',
exportAs: 'redactionHelpMode'
})
-export class HelpModeDirective {
- @Input('redactionHelpMode') element: string;
- private _lastChildCreated = null;
+export class HelpModeDirective implements OnInit {
+ @Input('redactionHelpMode') elementName: string;
constructor(
private readonly _elementRef: ElementRef,
@@ -18,37 +17,24 @@ 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.addElement(this.elementName, element, 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]);
}
}
}
diff --git a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
index 716e54776..ead68d7c8 100644
--- a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
@@ -1,7 +1,16 @@
-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';
+interface Helper {
+ readonly element: HTMLElement;
+ readonly helperElement: HTMLElement;
+}
+
+interface HelpElement {
+ [key: string]: Helper;
+}
+
@Injectable({
providedIn: 'root'
})
@@ -9,7 +18,13 @@ export class HelpModeService {
isHelpModeActive = false;
helpModeDialogIsOpened = false;
- constructor(private readonly _dialog: MatDialog) {}
+ private _elements: HelpElement = {};
+
+ private readonly _renderer: Renderer2;
+
+ constructor(private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2) {
+ this._renderer = this._rendererFactory.createRenderer(null, null);
+ }
openHelpModeDialog() {
this.helpModeDialogIsOpened = true;
@@ -22,4 +37,42 @@ export class HelpModeService {
this.helpModeDialogIsOpened = false;
});
}
+
+ activateHelpMode() {
+ this.isHelpModeActive = true;
+ this.openHelpModeDialog();
+ this._enableHelperElements();
+ }
+
+ deactivateHelpMode() {
+ this.isHelpModeActive = false;
+ this._disableHelperElements();
+ }
+
+ highlightHelperElements() {
+ for (const { helperElement } of Object.values(this._elements)) {
+ this._renderer.addClass(helperElement, 'highlight');
+ setTimeout(() => {
+ this._renderer.removeClass(helperElement, 'highlight');
+ }, 500);
+ }
+ }
+
+ addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement) {
+ this._elements[elementName] = { element, helperElement };
+ }
+
+ private _enableHelperElements() {
+ for (const { element, helperElement } of Object.values(this._elements)) {
+ this._renderer.setStyle(element, 'position', 'relative');
+ this._renderer.appendChild(element, helperElement);
+ }
+ }
+
+ private _disableHelperElements() {
+ for (const { element, helperElement } of Object.values(this._elements)) {
+ this._renderer.removeStyle(element, 'position');
+ this._renderer.removeChild(element, helperElement);
+ }
+ }
}
diff --git a/apps/red-ui/src/assets/styles/red-help-mode.scss b/apps/red-ui/src/assets/styles/red-help-mode.scss
index d36937a1f..c0958a77e 100644
--- a/apps/red-ui/src/assets/styles/red-help-mode.scss
+++ b/apps/red-ui/src/assets/styles/red-help-mode.scss
@@ -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;
}
+
+