From 23c298b6f6a9aa4ca7c0bc087fc22e5b22d78098 Mon Sep 17 00:00:00 2001 From: Valentin Date: Sat, 14 Aug 2021 02:23:31 +0300 Subject: [PATCH 1/7] added more css updates --- .../base-screen/base-screen.component.html | 2 +- .../help-mode-dialog.component.html | 8 ++++--- .../help-mode-dialog.component.scss | 23 ++++--------------- .../help-mode/help-mode.component.html | 2 +- .../help-mode/help-mode.component.scss | 1 + .../help-mode/help-mode.component.ts | 10 +++++++- 6 files changed, 22 insertions(+), 24 deletions(-) diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index 47a649a11..668564f71 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -1,5 +1,5 @@ - +
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html index 324dba8cd..58470ee76 100644 --- a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html +++ b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html @@ -1,6 +1,8 @@
-

- -

+
+

+ +

+
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss index 7658ba88b..3a3a69d4e 100644 --- a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss +++ b/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 { - height: 78px; +.content { width: 440px; - font-size: 20px; - font-weight: 600; - letter-spacing: 0; - line-height: 26px; + display: flex; + flex-direction: column; + align-items: center; 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; } diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.html b/apps/red-ui/src/app/components/help-mode/help-mode.component.html index 18dd783f9..940a1cbfc 100644 --- a/apps/red-ui/src/app/components/help-mode/help-mode.component.html +++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.html @@ -4,7 +4,7 @@
-

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

+

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

{{ 'help-mode.instructions' | translate }} 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..8c3b1186f 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 { 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..8d5cb92d9 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 @@ -14,9 +14,17 @@ export class HelpModeComponent { this.helpModeService.openHelpModeDialog(); } - @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) { + @HostListener('document:keydown.escape') onEscKeydownHandler() { if (!this.helpModeService.helpModeDialogIsOpened) { this.helpModeService.isHelpModeActive = false; } } + + @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(); + } + } } From 4c515eb1652f9ecf873ba4cbf41d65733b741d9f Mon Sep 17 00:00:00 2001 From: Valentin Date: Sat, 14 Aug 2021 16:46:22 +0300 Subject: [PATCH 2/7] added functionality for help mode to highlight helper elements when clicking outside of them --- .../help-mode/help-mode.component.html | 10 ++-- .../help-mode/help-mode.component.scss | 1 - .../help-mode/help-mode.component.ts | 16 +++--- .../shared/directives/help-mode.directive.ts | 50 +++++++---------- .../shared/services/help-mode.service.ts | 53 ++++++++++++++++++- .../src/assets/styles/red-help-mode.scss | 12 +++-- 6 files changed, 89 insertions(+), 53 deletions(-) diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.html b/apps/red-ui/src/app/components/help-mode/help-mode.component.html index 940a1cbfc..cc3de9335 100644 --- a/apps/red-ui/src/app/components/help-mode/help-mode.component.html +++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.html @@ -1,20 +1,16 @@ -
+
{{ 'help-mode.button-text' | translate }}

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

- + {{ 'help-mode.instructions' | translate }}
(esc) - +
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 8c3b1186f..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 @@ -46,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 8d5cb92d9..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,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(); } } } 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..36a79ab85 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,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]); } } } 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..a29e0f8ec 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,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); + } + } } 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; } From 669ca000a1688b110c34961565a53208f111a207 Mon Sep 17 00:00:00 2001 From: Bamboo Date: Sat, 14 Aug 2021 15:48:29 +0200 Subject: [PATCH 3/7] chore(release) --- libs/common-ui | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/common-ui b/libs/common-ui index 360ef9bd6..89376a655 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 360ef9bd6c87ec2ebb22554253e9ce9390775f09 +Subproject commit 89376a65544fcdfcab1d960fba0d9f580cddc1ca From 75bac408d6af87468be5d3a3b47a0f9d32b39a49 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 16 Aug 2021 11:08:57 +0300 Subject: [PATCH 4/7] disable help mode --- .../src/app/components/base-screen/base-screen.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index 668564f71..47a649a11 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -1,5 +1,5 @@ - +
From 04f3d13a6f340d82ed24f996034ae41feaf0379b Mon Sep 17 00:00:00 2001 From: Bamboo Date: Mon, 16 Aug 2021 10:14:18 +0200 Subject: [PATCH 5/7] chore(release) --- libs/common-ui | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/common-ui b/libs/common-ui index 89376a655..0bb0e4454 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 89376a65544fcdfcab1d960fba0d9f580cddc1ca +Subproject commit 0bb0e4454f3015d1c81ccd23415c8135c89eeeff From 94847c7fbd9b27a4b9004a93e42e6cdbda4896e7 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 16 Aug 2021 18:18:22 +0300 Subject: [PATCH 6/7] solved comments --- .../shared/directives/help-mode.directive.ts | 4 +- .../shared/services/help-mode.service.ts | 38 ++++++++++--------- 2 files changed, 21 insertions(+), 21 deletions(-) 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 36a79ab85..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 @@ -9,7 +9,6 @@ import { LanguageService } from '@i18n/language.service'; }) export class HelpModeDirective implements OnInit { @Input('redactionHelpMode') elementName: string; - private _lastChildCreated = null; constructor( private readonly _elementRef: ElementRef, @@ -29,8 +28,7 @@ export class HelpModeDirective implements OnInit { 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; + this._helpModeService.addElement(this.elementName, element, helperElement); } @HostListener('click') onClick() { 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 a29e0f8ec..e9f09f454 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,6 @@ 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' @@ -9,10 +8,10 @@ import { forEach } from 'lodash'; export class HelpModeService { isHelpModeActive = false; helpModeDialogIsOpened = false; - elements = []; - helperElements = {}; - private _renderer: Renderer2; + private _elements = {}; + + private readonly _renderer: Renderer2; constructor(private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2) { this._renderer = this._rendererFactory.createRenderer(null, null); @@ -42,30 +41,33 @@ export class HelpModeService { } highlightHelperElements() { - for (const key of Object.keys(this.helperElements)) { - this._renderer.addClass(this.helperElements[key], 'highlight'); + for (const key of Object.keys(this._elements)) { + const helperElement = this._elements[key].helperElement; + this._renderer.addClass(helperElement, 'highlight'); setTimeout(() => { - this._renderer.removeClass(this.helperElements[key], 'highlight'); + this._renderer.removeClass(helperElement, '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'); + addElement(elementName, element, helperElement) { + this._elements[elementName] = { element, helperElement }; + } - if (elementName === 'quick-filters') { - this._renderer.insertBefore(element, helperElement, element.firstChild); - } else { - this._renderer.appendChild(element, helperElement); - } + private _enableHelperElements() { + for (const key of Object.keys(this._elements)) { + const element = this._elements[key].element; + const helperElement = this._elements[key].helperElement; + + this._renderer.setStyle(element, 'position', 'relative'); + this._renderer.appendChild(element, helperElement); } } private _disableHelperElements() { - for (const [index, [elementName, helperElement]] of Object.entries(Object.entries(this.helperElements))) { - const element = this.elements[index]; + for (const key of Object.keys(this._elements)) { + const element = this._elements[key].element; + const helperElement = this._elements[key].helperElement; this._renderer.removeStyle(element, 'position'); this._renderer.removeChild(element, helperElement); From b1ee9495ad023504122092e35b0efa0304e16a22 Mon Sep 17 00:00:00 2001 From: Valentin Date: Tue, 17 Aug 2021 11:56:21 +0300 Subject: [PATCH 7/7] solved comments --- .../shared/services/help-mode.service.ts | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) 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 e9f09f454..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 @@ -2,6 +2,15 @@ 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,7 @@ export class HelpModeService { isHelpModeActive = false; helpModeDialogIsOpened = false; - private _elements = {}; + private _elements: HelpElement = {}; private readonly _renderer: Renderer2; @@ -41,8 +50,7 @@ export class HelpModeService { } highlightHelperElements() { - for (const key of Object.keys(this._elements)) { - const helperElement = this._elements[key].helperElement; + for (const { helperElement } of Object.values(this._elements)) { this._renderer.addClass(helperElement, 'highlight'); setTimeout(() => { this._renderer.removeClass(helperElement, 'highlight'); @@ -50,25 +58,19 @@ export class HelpModeService { } } - addElement(elementName, element, helperElement) { + addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement) { this._elements[elementName] = { element, helperElement }; } private _enableHelperElements() { - for (const key of Object.keys(this._elements)) { - const element = this._elements[key].element; - const helperElement = this._elements[key].helperElement; - + for (const { element, helperElement } of Object.values(this._elements)) { this._renderer.setStyle(element, 'position', 'relative'); this._renderer.appendChild(element, helperElement); } } private _disableHelperElements() { - for (const key of Object.keys(this._elements)) { - const element = this._elements[key].element; - const helperElement = this._elements[key].helperElement; - + for (const { element, helperElement } of Object.values(this._elements)) { this._renderer.removeStyle(element, 'position'); this._renderer.removeChild(element, helperElement); }