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

RED-8882 - Help Mode design improvements

Browse Source
This commit is contained in:
Valentin Mihai 2024-05-16 18:46:25 +03:00
parent e737d134ad
commit 786d235de0
13 changed files with 170 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/icons/help-outline-active.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/lib/buttons/circle-button/circle-button.component.html
View File

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

1
src/lib/buttons/circle-button/circle-button.component.ts
View File

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

1
src/lib/buttons/types/circle-button.type.ts
View File

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

18
src/lib/help-mode/help-button/help-button.component.html
View File

@ -1,6 +1,12 @@
<iqser-circle-button
(action)="activateHelpMode()"
[tooltip]="'help-mode.button-text' | translate"
icon="iqser:help-outline"
type="help"
></iqser-circle-button>
<label
[id]="buttonId"
class="help-mode-slide-toggle"
[class.dialog-toggle]="dialogButton"
[class.active]="helpModeService.isHelpModeActive"
>
<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>

64
src/lib/help-mode/help-button/help-button.component.scss Normal file
View File

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

57
src/lib/help-mode/help-button/help-button.component.ts
View File

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

3
src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.html
View File

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

25
src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts
View File

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

5
src/lib/help-mode/help-mode.module.ts
View File

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

19
src/lib/help-mode/help-mode.service.ts
View File

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

1
src/lib/help-mode/help-mode/help-mode.component.html
View File

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

5
src/lib/help-mode/help-mode/help-mode.component.ts
View File

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