diff --git a/src/assets/icons/help-outline-active.svg b/src/assets/icons/help-outline-active.svg
new file mode 100644
index 0000000..c0271f7
--- /dev/null
+++ b/src/assets/icons/help-outline-active.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/src/lib/buttons/circle-button/circle-button.component.html b/src/lib/buttons/circle-button/circle-button.component.html
index fd481e3..ba7e816 100644
--- a/src/lib/buttons/circle-button/circle-button.component.html
+++ b/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"
diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts
index 03dfe97..3e8e6ca 100644
--- a/src/lib/buttons/circle-button/circle-button.component.ts
+++ b/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;
diff --git a/src/lib/buttons/types/circle-button.type.ts b/src/lib/buttons/types/circle-button.type.ts
index dd4494c..349c720 100644
--- a/src/lib/buttons/types/circle-button.type.ts
+++ b/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;
diff --git a/src/lib/empty-state/empty-state.component.ts b/src/lib/empty-state/empty-state.component.ts
index 622c31b..f6c7c59 100644
--- a/src/lib/empty-state/empty-state.component.ts
+++ b/src/lib/empty-state/empty-state.component.ts
@@ -3,7 +3,6 @@ import { IconButtonComponent, IconButtonTypes } from '../buttons';
import { randomString } from '../utils';
import { NgIf, NgStyle } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
-import { IqserHelpModeModule } from '../help-mode';
@Component({
selector: 'iqser-empty-state [text]',
@@ -11,7 +10,7 @@ import { IqserHelpModeModule } from '../help-mode';
styleUrls: ['./empty-state.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
- imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent, IqserHelpModeModule],
+ imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent],
})
export class EmptyStateComponent implements OnInit {
readonly iconButtonTypes = IconButtonTypes;
diff --git a/src/lib/help-mode/help-button/help-button.component.html b/src/lib/help-mode/help-button/help-button.component.html
index 45fbb64..9f53692 100644
--- a/src/lib/help-mode/help-button/help-button.component.html
+++ b/src/lib/help-mode/help-button/help-button.component.html
@@ -1,6 +1,12 @@
-
+
diff --git a/src/lib/help-mode/help-button/help-button.component.scss b/src/lib/help-mode/help-button/help-button.component.scss
new file mode 100644
index 0000000..fad7ffe
--- /dev/null
+++ b/src/lib/help-mode/help-button/help-button.component.scss
@@ -0,0 +1,65 @@
+: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);
+ }
+}
diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts
index e924372..984c562 100644
--- a/src/lib/help-mode/help-button/help-button.component.ts
+++ b/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 {
- @Input() dialogButton = false;
- @Input() helpButtonKey?: string;
+export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
+ @Input() dialogButton = true;
+ helpModeButton: HTMLElement;
- constructor(private readonly _helpModeService: HelpModeService) {}
+ constructor(
+ private readonly _elementRef: ElementRef,
+ readonly helpModeService: HelpModeService,
+ ) {}
- ngOnInit(): void {
- this._helpModeService.helpButtonKey = this.helpButtonKey;
+ get buttonId() {
+ return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
}
- ngOnDestroy(): void {
- this._helpModeService.helpButtonKey = undefined;
+ ngOnInit() {
+ if (this.dialogButton) {
+ const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
+ defaultButton.style.setProperty('z-index', '100');
+ }
}
- activateHelpMode(): void {
- if (this.helpButtonKey) {
- const url = this._helpModeService.generateDocsLink(this.helpButtonKey);
- window.open(url, '_blank');
+ ngAfterViewInit() {
+ const currentComponent = this._elementRef.nativeElement;
+ this.helpModeButton = currentComponent.querySelector('.help-mode-slide-toggle');
+
+ 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);
}
}
diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html
index 42884bb..4fbffad 100644
--- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html
+++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html
@@ -3,6 +3,9 @@
+
+ {{ 'help-mode.options.do-not-show-again' | translate }}
+
-
+
diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts
index 8d25698..d3c0ef4 100644
--- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts
+++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts
@@ -1,4 +1,6 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { BaseDialogComponent } from '../../dialog';
+import { MatDialogRef } from '@angular/material/dialog';
const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200';
const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
@@ -8,16 +10,34 @@ const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
styleUrls: ['./help-mode-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class HelpModeDialogComponent implements OnInit, OnDestroy {
+export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy {
+ protected doNotShowAgainOption = false;
+
+ constructor(protected readonly _dialogRef: MatDialogRef) {
+ super(_dialogRef);
+ }
+
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;
+ }
+
+ save() {
+ this.close();
+ }
+
+ close() {
+ return this._dialogRef.close(this.doNotShowAgainOption);
+ }
+
+ private _setCdkOverlayContainerZIndex(zIndex: string): void {
const cdkOverlayContainer = document.querySelector('.cdk-overlay-container');
if (cdkOverlayContainer) {
cdkOverlayContainer.style.zIndex = zIndex;
diff --git a/src/lib/help-mode/help-mode.module.ts b/src/lib/help-mode/help-mode.module.ts
index f0250c7..f395c73 100644
--- a/src/lib/help-mode/help-mode.module.ts
+++ b/src/lib/help-mode/help-mode.module.ts
@@ -1,19 +1,20 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
-import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
import { HelpModeComponent } from './help-mode/help-mode.component';
import { HelpButtonComponent } from './help-button/help-button.component';
import { HelpModeKey, HelpModeService } from './help-mode.service';
-import { MatDialogModule } from '@angular/material/dialog';
import { CircleButtonComponent } from '../buttons';
import { HELP_MODE_KEYS } from './tokens';
+import { MatIcon } from '@angular/material/icon';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
-const components = [HelpModeComponent, HelpModeDialogComponent, HelpButtonComponent];
+const components = [HelpModeComponent, HelpButtonComponent, HelpModeDialogComponent];
@NgModule({
declarations: [...components],
- imports: [CommonModule, MatDialogModule, TranslateModule, CircleButtonComponent],
+ imports: [CommonModule, TranslateModule, CircleButtonComponent, MatCheckbox, MatIcon],
exports: [...components],
})
export class IqserHelpModeModule {
diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index 04f12a5..0986478 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -1,5 +1,4 @@
import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, firstValueFrom } from 'rxjs';
import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
@@ -18,6 +17,8 @@ import {
WEB_VIEWER_ELEMENTS,
} from './utils/constants';
import { getConfig } from '../services';
+import { UserPreferenceService } from '../../../../../apps/red-ui/src/app/users/user-preference.service';
+import { MatDialog } from '@angular/material/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);
@@ -54,6 +54,7 @@ export class HelpModeService {
private readonly _dialog: MatDialog,
private readonly _rendererFactory: RendererFactory2,
private readonly _translateService: TranslateService,
+ private readonly _userPreferencesService: UserPreferenceService,
) {
this.#renderer = this._rendererFactory.createRenderer(null, null);
}
@@ -66,17 +67,21 @@ export class HelpModeService {
return this.#helpModeDialogIsOpened$.getValue();
}
- openHelpModeDialog(): MatDialogRef {
- this.#helpModeDialogIsOpened$.next(true);
+ async openHelpModeDialog() {
+ if (!this._userPreferencesService.getHelpModeDialog()) {
+ this.#helpModeDialogIsOpened$.next(true);
- const ref = this._dialog.open(HelpModeDialogComponent, {
- width: '600px',
- });
+ const ref = this._dialog.open(HelpModeDialogComponent, {
+ width: '600px',
+ });
- firstValueFrom(ref.afterClosed()).then(() => {
- this.#helpModeDialogIsOpened$.next(false);
- });
- return ref;
+ firstValueFrom(ref.afterClosed()).then(result => {
+ this.#helpModeDialogIsOpened$.next(false);
+ if (result) {
+ this._userPreferencesService.toggleHelpModeDialog();
+ }
+ });
+ }
}
activateHelpMode(dialogMode: boolean = false): void {
@@ -137,7 +142,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 +155,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}`;
}
diff --git a/src/lib/help-mode/help-mode/help-mode.component.html b/src/lib/help-mode/help-mode/help-mode.component.html
index 0f59d6e..f14bc48 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.html
+++ b/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"
>
diff --git a/src/lib/help-mode/help-mode/help-mode.component.ts b/src/lib/help-mode/help-mode/help-mode.component.ts
index 6ff53e3..ce4ae7e 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.ts
+++ b/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);
}