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

solved comments

Browse Source
This commit is contained in:
Valentin 2021-08-16 18:18:22 +03:00
parent 0b2d787ba5
commit 94847c7fbd
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,6 @@ import { LanguageService } from '@i18n/language.service';
}) })
export class HelpModeDirective implements OnInit { export class HelpModeDirective implements OnInit {
@Input('redactionHelpMode') elementName: string; @Input('redactionHelpMode') elementName: string;
private _lastChildCreated = null;
constructor( constructor(
private readonly _elementRef: ElementRef, 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._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`); this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
this._helpModeService.elements.push(element); this._helpModeService.addElement(this.elementName, element, helperElement);
this._helpModeService.helperElements[this.elementName] = helperElement;
} }
@HostListener('click') onClick() { @HostListener('click') onClick() {

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

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