Pull request #269: VM/HelpModeUpdates

Merge in RED/ui from VM/HelpModeUpdates to master

* commit 'b1ee9495ad023504122092e35b0efa0304e16a22':
  solved comments
  solved comments
  chore(release)
  disable help mode
  chore(release)
  added functionality for help mode to highlight helper elements when clicking outside of them
  added more css updates

apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html

@@ -1,6 +1,8 @@
 <section class="dialog">
-    <p class="welcome-to-help-mode pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
+    <div class="content">
-    <img src="assets/illustrations/illustration.gif" alt="" width="335" />
+        <p class="heading-l pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
-    <p class="clicking-anywhere-on pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
+        <img src="assets/illustrations/illustration.gif" alt="" width="335" />
+        <p class="pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
+    </div>
     <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>

apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss

@@ -1,31 +1,18 @@
 @import '../../../assets/styles/variables';
 
 section {
-    height: 90%;
     background: $grey-11;
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 
-.welcome-to-help-mode {
+.content {
-    height: 78px;
     width: 440px;
-    font-size: 20px;
+    display: flex;
-    font-weight: 600;
+    flex-direction: column;
-    letter-spacing: 0;
+    align-items: center;
-    line-height: 26px;
     text-align: center;
     padding-top: 20px;
-}
-
-.clicking-anywhere-on {
-    height: 54px;
-    width: 440px;
-    font-size: 13px;
-    letter-spacing: 0;
-    line-height: 18px;
-    text-align: center;
     padding-bottom: 30px;
+    line-height: 18px;
 }

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

@@ -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">
-        <h3>{{ 'help-mode.text' | translate }}</h3>
+        <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
+            <iqser-circle-button class="dialog-close" icon="red:close" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
-                class="dialog-close"
-                icon="red:close"
-                (click)="helpModeService.isHelpModeActive = false"
-            ></iqser-circle-button>
         </div>
     </div>
 </div>

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;
 

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() {
+    @HostListener('document:keydown.escape') onEscKeydownHandler() {
-        this.helpModeService.isHelpModeActive = true;
+        if (!this.helpModeService.helpModeDialogIsOpened) {
-        this.helpModeService.openHelpModeDialog();
+            this.helpModeService.deactivateHelpMode();
+        }
     }
 
-    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
+    @HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
-        if (!this.helpModeService.helpModeDialogIsOpened) {
+        const node = event?.target?.nodeName?.toLocaleLowerCase();
-            this.helpModeService.isHelpModeActive = false;
+        if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
+            this.helpModeService.activateHelpMode();
+        }
+    }
+
+    @HostListener('click') onClick() {
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.highlightHelperElements();
         }
     }
 }

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 {
+export class HelpModeDirective implements OnInit {
-    @Input('redactionHelpMode') element: string;
+    @Input('redactionHelpMode') elementName: string;
-    private _lastChildCreated = null;
 
     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]);
+            window.open(links[this.elementName][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;
         }
     }
 }

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);
+        }
+    }
 }

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: 100;
-    z-index: 1;
-    box-shadow: 0 0 0 2px $green-2 inset;
     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;
 }