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/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..c8bbedf --- /dev/null +++ b/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); + } +} 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..7eef302 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..39cde83 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,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 + 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('.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..4fdd066 100644 --- a/src/lib/help-mode/help-mode.module.ts +++ b/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 { diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 04f12a5..9c784a9 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/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 { + openHelpModeDialog() { this.#helpModeDialogIsOpened$.next(true); - const ref = this._dialog.open(HelpModeDialogComponent, { + this._iqserDialog.open(HelpModeDialogComponent, { width: '600px', }); - firstValueFrom(ref.afterClosed()).then(() => { - this.#helpModeDialogIsOpened$.next(false); - }); - return ref; + // firstValueFrom(ref.afterClosed()).then(() => { + // this.#helpModeDialogIsOpened$.next(false); + // }); } 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}`; } 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); }