dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Help popup button style improvements.

Browse Source
This commit is contained in:
Igor Kulikov 2025-07-15 16:25:17 +03:00
parent 50bd2cb0ff
commit 0baa70dc97
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui-ngx/src/app/shared/components/help-popup.component.html
View File

@ -17,9 +17,9 @@
--> -->
<fieldset class="tb-help-popup-button-container" *ngIf="!textMode"> <fieldset class="tb-help-popup-button-container" *ngIf="!textMode">
<div #toggleHelpButton <div #toggleHelpButton
class="tb-toggle-help-popup-button"
matTooltip="{{ helpIconTooltip }}" matTooltip="{{ helpIconTooltip }}"
matTooltipPosition="above" matTooltipPosition="above"
style="border-radius: 50%"
(click)="toggleHelp()"> (click)="toggleHelp()">
<button mat-icon-button <button mat-icon-button
[disabled]="disabled()" [disabled]="disabled()"
@ -36,6 +36,7 @@
</fieldset> </fieldset>
<fieldset class="tb-help-popup-button-container" [class.hint-button]="hintMode" *ngIf="textMode"> <fieldset class="tb-help-popup-button-container" [class.hint-button]="hintMode" *ngIf="textMode">
<div #toggleHelpTextButton <div #toggleHelpTextButton
class="tb-toggle-help-popup-text-button"
(click)="toggleHelp()"> (click)="toggleHelp()">
<button mat-button <button mat-button
[disabled]="disabled()" [disabled]="disabled()"

5
ui-ngx/src/app/shared/components/help-popup.component.scss
View File

@ -28,6 +28,11 @@
z-index: 1; z-index: 1;
} }
.tb-toggle-help-popup-button {
border-radius: 50%;
line-height: normal;
}
.tb-help-popup-button { .tb-help-popup-button {
position: relative; position: relative;
.mat-mdc-progress-spinner { .mat-mdc-progress-spinner {

15
ui-ngx/src/app/shared/components/help-popup.component.ts
View File

@ -17,9 +17,10 @@
import { import {
Component, Component,
ElementRef, ElementRef,
Input, OnChanges, Input,
OnDestroy, OnChanges,
Renderer2, SimpleChanges, Renderer2,
SimpleChanges,
ViewChild, ViewChild,
ViewContainerRef, ViewContainerRef,
ViewEncapsulation ViewEncapsulation
@ -38,7 +39,7 @@ import { TranslateService } from '@ngx-translate/core';
styleUrls: ['./help-popup.component.scss'], styleUrls: ['./help-popup.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class HelpPopupComponent implements OnChanges, OnDestroy { export class HelpPopupComponent implements OnChanges {
@ViewChild('toggleHelpButton', {read: ElementRef, static: false}) toggleHelpButton: ElementRef; @ViewChild('toggleHelpButton', {read: ElementRef, static: false}) toggleHelpButton: ElementRef;
@ViewChild('toggleHelpTextButton', {read: ElementRef, static: false}) toggleHelpTextButton: ElementRef; @ViewChild('toggleHelpTextButton', {read: ElementRef, static: false}) toggleHelpTextButton: ElementRef;
@ -93,7 +94,7 @@ export class HelpPopupComponent implements OnChanges, OnDestroy {
private translate: TranslateService) { private translate: TranslateService) {
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(_changes: SimpleChanges): void {
if (isDefinedAndNotNull(this.triggerText)) { if (isDefinedAndNotNull(this.triggerText)) {
this.triggerSafeHtml = this.sanitizer.bypassSecurityTrustHtml(this.triggerText); this.triggerSafeHtml = this.sanitizer.bypassSecurityTrustHtml(this.triggerText);
} else { } else {
@ -124,8 +125,4 @@ export class HelpPopupComponent implements OnChanges, OnDestroy {
this.helpPopupStyle); this.helpPopupStyle);
} }
} }
ngOnDestroy(): void {
}
} }