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

Pull request #269: VM/HelpModeUpdates

Browse Source 
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
This commit is contained in:
Valentin-Gabriel Mihai 2021-08-17 11:21:54 +02:00
commit 2a021fa727
8 changed files with 110 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
<section class="dialog">
<p class="welcome-to-help-mode pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
<img src="assets/illustrations/illustration.gif" alt="" width="335" />
<p class="clicking-anywhere-on pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
<div class="content">
<p class="heading-l pre" [innerHTML]="'help-mode.welcome-to-help-mode' | 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>

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

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

12
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">
<h3>{{ 'help-mode.text' | translate }}</h3>
<a class="instructions" (click)="helpModeService.openHelpModeDialog()" *ngIf="!helpModeService.helpModeDialogIsOpened">
<p class="heading">{{ 'help-mode.text' | translate }}</p>
<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>

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

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

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

@ -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();
}
}
}

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,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]);
}
}
}

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

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

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