RED-8882 - Help Mode design improvements

src/assets/icons/help-outline-active.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
+>
+    <g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
+            <g id="help-button" transform="translate(1294.000000, 635.000000)">
+                <g id="help" transform="translate(114.000000, 10.000000)">
+                    <path
+                        d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/lib/buttons/circle-button/circle-button.component.html

@@ -3,7 +3,6 @@
         (click)="performAction($event)"
         [class.dark-bg]="type === _circleButtonTypes.dark"
         [class.grey-selected]="greySelected"
-        [class.help]="type === _circleButtonTypes.help"
         [class.overlay]="showDot"
         [class.primary]="type === _circleButtonTypes.primary"
         [class.warn]="type === _circleButtonTypes.warn"

src/lib/buttons/circle-button/circle-button.component.ts

@@ -30,7 +30,6 @@ export class CircleButtonComponent implements OnInit {
     @Input() disabled = false;
     @Input() type: CircleButtonType = CircleButtonTypes.default;
     @Input() greySelected = false;
-    @Input() helpModeButton = false;
     @Input() removeTooltip = false;
     @Input() isSubmit = false;
     @Input() dropdownButton = false;

src/lib/buttons/types/circle-button.type.ts

@@ -3,7 +3,6 @@ export const CircleButtonTypes = {
     primary: 'primary',
     warn: 'warn',
     dark: 'dark',
-    help: 'help',
 } as const;
 
 export type CircleButtonType = keyof typeof CircleButtonTypes;

src/lib/help-mode/help-button/help-button.component.html

@@ -1,6 +1,12 @@
-<iqser-circle-button
+<label
-    (action)="activateHelpMode()"
+    [id]="buttonId"
-    [tooltip]="'help-mode.button-text' | translate"
+    class="help-mode-slide-toggle"
-    icon="iqser:help-outline"
+    [class.dialog-toggle]="dialogButton"
-    type="help"
+    [class.active]="helpModeService.isHelpModeActive"
-></iqser-circle-button>
+>
+    <input type="checkbox" class="toggle-input" [checked]="helpModeService.isHelpModeActive" (change)="toggleHelpMode()" />
+    <div class="toggle-track"></div>
+    <div class="toggle-thumb">
+        <mat-icon svgIcon="iqser:help-outline" [class.active-thumb]="helpModeService.isHelpModeActive"></mat-icon>
+    </div>
+</label>

src/lib/help-mode/help-button/help-button.component.scss

@@ -0,0 +1,64 @@
+:host {
+    display: flex;
+    align-items: center;
+    width: 60px;
+}
+
+.help-mode-slide-toggle {
+    display: inline-block;
+    position: relative;
+    width: 60px;
+    height: 34px;
+    cursor: pointer;
+
+    &.active, &.dialog-toggle {
+        z-index: 1100;
+    }
+
+    .toggle-input {
+        display: none;
+    }
+
+    .toggle-track {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 34px;
+        background-color: var(--iqser-grey-4);
+        border-radius: 20px;
+        transform: translateY(-50%);
+    }
+
+    .toggle-thumb {
+        position: absolute;
+        top: 50%;
+        left: 4px;
+        width: 25px;
+        height: 25px;
+        background-color: #fff;
+        border-radius: 50%;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        transform: translateY(-50%);
+        transition: left 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        mat-icon {
+            transform: scale(0.6);
+        }
+
+        .active-thumb {
+            color: var(--iqser-helpmode-primary);;
+        }
+    }
+
+    .toggle-input:checked + .toggle-track {
+        background: var(--iqser-helpmode-primary);
+    }
+
+    .toggle-input:checked + .toggle-track + .toggle-thumb {
+        left: calc(100% - 30px);
+    }
+}

src/lib/help-mode/help-button/help-button.component.ts

@@ -1,31 +1,60 @@
 /* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { HelpModeService } from '../index';
 
 @Component({
     selector: 'iqser-help-button',
     templateUrl: './help-button.component.html',
+    styleUrls: ['./help-button.component.scss'],
 })
-export class HelpButtonComponent implements OnInit, OnDestroy {
+export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
-    @Input() dialogButton = false;
+    @Input() dialogButton = true;
-    @Input() helpButtonKey?: string;
+    helpModeButton: HTMLElement;
 
-    constructor(private readonly _helpModeService: HelpModeService) {}
+    constructor(
+        private readonly _elementRef: ElementRef,
+        readonly helpModeService: HelpModeService,
+    ) {}
 
-    ngOnInit(): void {
+    get buttonId() {
-        this._helpModeService.helpButtonKey = this.helpButtonKey;
+        return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
     }
 
-    ngOnDestroy(): void {
+    ngOnInit() {
-        this._helpModeService.helpButtonKey = undefined;
+        if (this.dialogButton) {
+            const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
+            defaultButton.style.setProperty('z-index', '100');
+        }
     }
 
-    activateHelpMode(): void {
+    ngAfterViewInit() {
-        if (this.helpButtonKey) {
+        const currentComponent = this._elementRef.nativeElement;
-            const url = this._helpModeService.generateDocsLink(this.helpButtonKey);
+        this.helpModeButton = currentComponent.querySelector('.help-mode-slide-toggle');
-            window.open(url, '_blank');
+
+        if (this.helpModeButton) {
+            setTimeout(() => {
+                const currentComponentRect = currentComponent.getBoundingClientRect();
+                this.helpModeButton.style.setProperty('position', 'fixed');
+                this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
+                this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
+                document.body.appendChild(this.helpModeButton);
+            }, 500);
+        }
+    }
+
+    ngOnDestroy() {
+        document.body.removeChild(this.helpModeButton);
+        if (this.dialogButton) {
+            const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
+            defaultButton.style.removeProperty('z-index');
+        }
+    }
+
+    toggleHelpMode(): void {
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.deactivateHelpMode();
             return;
         }
-        this._helpModeService.activateHelpMode(this.dialogButton);
+        this.helpModeService.activateHelpMode(this.dialogButton);
     }
 }

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html

@@ -3,6 +3,9 @@
         <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>
+        <mat-checkbox [checked]="doNotShowAgainOption" (change)="setDoNotShowAgainOption($event.checked)" color="primary">
+            {{ 'help-mode.options.do-not-show-again' | translate }}
+        </mat-checkbox>
     </div>
     <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts

@@ -1,23 +1,40 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { IqserDialogComponent } from '../../dialog';
 
 const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200';
 const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
 
+interface HelpModeDialogData {}
+interface HelpModeDialogResult {}
+
 @Component({
     templateUrl: './help-mode-dialog.component.html',
     styleUrls: ['./help-mode-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HelpModeDialogComponent implements OnInit, OnDestroy {
+export class HelpModeDialogComponent
+    extends IqserDialogComponent<HelpModeDialogComponent, HelpModeDialogData, HelpModeDialogResult>
+    implements OnInit, OnDestroy
+{
+    protected doNotShowAgainOption = false;
+
+    constructor() {
+        super();
+    }
+
     ngOnInit(): void {
-        this._setCdkOverlayContainerZindex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX);
+        this.#setCdkOverlayContainerZIndex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX);
     }
 
     ngOnDestroy(): void {
-        this._setCdkOverlayContainerZindex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX);
+        this.#setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX);
     }
 
-    private _setCdkOverlayContainerZindex(zIndex: string): void {
+    setDoNotShowAgainOption(checked: boolean): void {
+        this.doNotShowAgainOption = checked;
+    }
+
+    #setCdkOverlayContainerZIndex(zIndex: string): void {
         const cdkOverlayContainer = document.querySelector<HTMLElement>('.cdk-overlay-container');
         if (cdkOverlayContainer) {
             cdkOverlayContainer.style.zIndex = zIndex;

src/lib/help-mode/help-mode.module.ts

@@ -8,12 +8,15 @@ import { HelpModeKey, HelpModeService } from './help-mode.service';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CircleButtonComponent } from '../buttons';
 import { HELP_MODE_KEYS } from './tokens';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatIcon } from '@angular/material/icon';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 const components = [HelpModeComponent, HelpModeDialogComponent, HelpButtonComponent];
 
 @NgModule({
     declarations: [...components],
-    imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent],
+    imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent, MatSlideToggle, MatIcon, MatCheckbox],
     exports: [...components],
 })
 export class IqserHelpModeModule {

src/lib/help-mode/help-mode.service.ts

@@ -18,6 +18,7 @@ import {
     WEB_VIEWER_ELEMENTS,
 } from './utils/constants';
 import { getConfig } from '../services';
+import { IqserDialog } from '../dialog';
 
 export interface Helper {
     readonly element: HTMLElement;
@@ -38,7 +39,6 @@ export interface HelpModeKey {
 
 @Injectable()
 export class HelpModeService {
-    helpButtonKey: string | undefined;
     readonly #isHelpModeActive$ = new BehaviorSubject(false);
     readonly isHelpModeActive$ = this.#isHelpModeActive$.asObservable();
     readonly #helpModeDialogIsOpened$ = new BehaviorSubject(false);
@@ -51,7 +51,7 @@ export class HelpModeService {
     constructor(
         @Inject(HELP_MODE_KEYS) private readonly _keys: HelpModeKey[],
         @Inject(MANUAL_BASE_URL) private readonly _manualBaseURL: string,
-        private readonly _dialog: MatDialog,
+        private readonly _iqserDialog: IqserDialog,
         private readonly _rendererFactory: RendererFactory2,
         private readonly _translateService: TranslateService,
     ) {
@@ -66,17 +66,16 @@ export class HelpModeService {
         return this.#helpModeDialogIsOpened$.getValue();
     }
 
-    openHelpModeDialog(): MatDialogRef<HelpModeDialogComponent> {
+    openHelpModeDialog() {
         this.#helpModeDialogIsOpened$.next(true);
 
-        const ref = this._dialog.open(HelpModeDialogComponent, {
+        this._iqserDialog.open(HelpModeDialogComponent, {
             width: '600px',
         });
 
-        firstValueFrom(ref.afterClosed()).then(() => {
+        // firstValueFrom(ref.afterClosed()).then(() => {
-            this.#helpModeDialogIsOpened$.next(false);
+        //     this.#helpModeDialogIsOpened$.next(false);
-        });
+        // });
-        return ref;
     }
 
     activateHelpMode(dialogMode: boolean = false): void {
@@ -137,7 +136,7 @@ export class HelpModeService {
 
     #getHelperElement(element: HTMLElement, key: string): HTMLElement {
         const helperElement = this.#renderer.createElement('a') as HTMLElement;
-        this.#renderer.setAttribute(helperElement, 'href', this.generateDocsLink(key));
+        this.#renderer.setAttribute(helperElement, 'href', this.#generateDocsLink(key));
         this.#renderer.setAttribute(helperElement, 'target', '_blank');
         this.#renderer.addClass(helperElement, HELP_MODE_CLASS);
         if (this.#isDocumine) {
@@ -150,7 +149,7 @@ export class HelpModeService {
         return Math.random().toString(36).substring(2, 9);
     }
 
-    generateDocsLink(key: string) {
+    #generateDocsLink(key: string) {
         const currentLang = this._translateService.currentLang;
         return `${this._manualBaseURL}/${currentLang}/index-${currentLang}.html?contextId=${key}`;
     }

src/lib/help-mode/help-mode/help-mode.component.html

@@ -11,7 +11,6 @@
                 (click)="helpModeService.deactivateHelpMode()"
                 [iconSize]="10"
                 [size]="20"
-                [type]="circleButtonTypes.help"
                 class="ml-8"
                 icon="iqser:close"
             ></iqser-circle-button>

src/lib/help-mode/help-mode/help-mode.component.ts

@@ -30,11 +30,6 @@ export class HelpModeComponent {
     onHKeydownHandler(event: KeyboardEvent): void {
         const node = (event.target as IqserEventTarget).localName;
         if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
-            if (this.helpModeService.helpButtonKey) {
-                const url = this.helpModeService.generateDocsLink(this.helpModeService.helpButtonKey);
-                window.open(url, '_blank');
-                return;
-            }
             const dialogMode = !!this._dialog.openDialogs.length;
             this.helpModeService.activateHelpMode(dialogMode);
         }