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

RED-9362 - Help Mode tooltip missing

Browse Source
This commit is contained in:
Valentin Mihai 2024-06-27 15:32:15 +03:00
parent 1c48cea02e
commit ce334dbdeb
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
class="help-mode-slide-toggle" class="help-mode-slide-toggle"
[class.dialog-toggle]="dialogButton" [class.dialog-toggle]="dialogButton"
[class.active]="helpModeService.isHelpModeActive" [class.active]="helpModeService.isHelpModeActive"
[matTooltip]="buttonTooltip"
> >
<input type="checkbox" class="toggle-input" [checked]="helpModeService.isHelpModeActive" (change)="toggleHelpMode()" /> <input type="checkbox" class="toggle-input" [checked]="helpModeService.isHelpModeActive" (change)="toggleHelpMode()" />
<div class="toggle-track"></div> <div class="toggle-track"></div>

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

@ -2,13 +2,16 @@
import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core'; import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
import { MatIcon } from '@angular/material/icon'; import { MatIcon } from '@angular/material/icon';
import { HelpModeService } from '../help-mode.service'; import { HelpModeService } from '../help-mode.service';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@Component({ @Component({
selector: 'iqser-help-button', selector: 'iqser-help-button',
templateUrl: './help-button.component.html', templateUrl: './help-button.component.html',
styleUrls: ['./help-button.component.scss'], styleUrls: ['./help-button.component.scss'],
standalone: true, standalone: true,
imports: [MatIcon], imports: [MatIcon, MatTooltip],
}) })
export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() dialogButton = true; @Input() dialogButton = true;
@ -16,6 +19,7 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
constructor( constructor(
private readonly _elementRef: ElementRef, private readonly _elementRef: ElementRef,
private readonly _translateService: TranslateService,
readonly helpModeService: HelpModeService, readonly helpModeService: HelpModeService,
) {} ) {}
@ -68,4 +72,9 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
this.helpModeButton?.style.setProperty('top', `${currentComponentRect.top}px`); this.helpModeButton?.style.setProperty('top', `${currentComponentRect.top}px`);
this.helpModeButton?.style.setProperty('left', `${currentComponentRect.left}px`); this.helpModeButton?.style.setProperty('left', `${currentComponentRect.left}px`);
} }
get buttonTooltip() {
const translation = this.helpModeService.isHelpModeActive ? _('help-button.disable') : _('help-button.enable');
return this._translateService.instant(translation);
}
} }