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

Feature custom image icon fixes after review.

Browse Source
This commit is contained in:
deaflynx 2025-08-08 17:06:02 +03:00
parent 20e44ab004
commit f2e66ca012
3 changed files with 2 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/shared/components/icon.component.ts
View File

@ -303,6 +303,7 @@ export class TbIconComponent extends _TbIconBase
this.imagePipe.transform(rawName, { asString: true, ignoreLoadingImage: true }).subscribe( this.imagePipe.transform(rawName, { asString: true, ignoreLoadingImage: true }).subscribe(
imageUrl => { imageUrl => {
const imgElement = this.renderer.createElement('img'); const imgElement = this.renderer.createElement('img');
this.renderer.addClass(imgElement, 'mat-icon');
this.renderer.setAttribute(imgElement, 'src', imageUrl as string); this.renderer.setAttribute(imgElement, 'src', imageUrl as string);
const elem: HTMLElement = this._elementRef.nativeElement; const elem: HTMLElement = this._elementRef.nativeElement;
this.renderer.insertBefore(elem, imgElement, this._iconNameContent.nativeElement); this.renderer.insertBefore(elem, imgElement, this._iconNameContent.nativeElement);

4
ui-ngx/src/app/shared/components/material-icon-select.component.html
View File

@ -37,10 +37,6 @@
[disabled]="disabled" [disabled]="disabled"
#matButton #matButton
(click)="openIconPopup($event, matButton)"> (click)="openIconPopup($event, matButton)">
@if (!isCustomIcon) {
<tb-icon matButtonIcon>{{materialIconFormGroup.get('icon').value}}</tb-icon> <tb-icon matButtonIcon>{{materialIconFormGroup.get('icon').value}}</tb-icon>
} @else {
<img class="mat-icon" alt="icon" [src]="materialIconFormGroup.get('icon').value | image | async">
}
</button> </button>
</ng-template> </ng-template>

11
ui-ngx/src/app/shared/components/material-icon-select.component.ts
View File

@ -36,7 +36,6 @@ import { TbPopoverService } from '@shared/components/popover.service';
import { MaterialIconsComponent } from '@shared/components/material-icons.component'; import { MaterialIconsComponent } from '@shared/components/material-icons.component';
import { MatButton } from '@angular/material/button'; import { MatButton } from '@angular/material/button';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { isTbImage } from '@shared/models/resource.models';
@Component({ @Component({
selector: 'tb-material-icon-select', selector: 'tb-material-icon-select',
@ -76,8 +75,6 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
@coerceBoolean() @coerceBoolean()
allowedCustomIcon = false; allowedCustomIcon = false;
isCustomIcon = false;
private requiredValue: boolean; private requiredValue: boolean;
get required(): boolean { get required(): boolean {
return this.requiredValue; return this.requiredValue;
@ -138,13 +135,11 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
this.materialIconFormGroup.patchValue( this.materialIconFormGroup.patchValue(
{ icon: this.modelValue }, {emitEvent: false} { icon: this.modelValue }, {emitEvent: false}
); );
this.defineIconType(value);
} }
private updateModel() { private updateModel() {
const icon: string = this.materialIconFormGroup.get('icon').value; const icon: string = this.materialIconFormGroup.get('icon').value;
if (this.modelValue !== icon) { if (this.modelValue !== icon) {
this.defineIconType(icon);
this.modelValue = icon; this.modelValue = icon;
this.propagateChange(this.modelValue); this.propagateChange(this.modelValue);
} }
@ -198,10 +193,4 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
this.materialIconFormGroup.get('icon').patchValue(null, {emitEvent: true}); this.materialIconFormGroup.get('icon').patchValue(null, {emitEvent: true});
this.cd.markForCheck(); this.cd.markForCheck();
} }
private defineIconType(icon: string) {
if (this.allowedCustomIcon) {
this.isCustomIcon = isTbImage(icon);
}
}
} }