diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts index da8a583183..da7a21632b 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts +++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts @@ -14,8 +14,9 @@ /// limitations under the License. /// -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import { MenuSection } from '@core/services/menu.models'; +import { tbImageIcon } from '@shared/models/custom-menu.models'; @Component({ selector: 'tb-menu-link', @@ -23,14 +24,27 @@ import { MenuSection } from '@core/services/menu.models'; styleUrls: ['./menu-link.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class MenuLinkComponent implements OnInit { +export class MenuLinkComponent implements OnInit, OnChanges { @Input() section: MenuSection; + isCustomIcon: boolean; + constructor() { } ngOnInit() { } + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (change.currentValue !== change.previousValue) { + if (propName === 'section' && change.currentValue) { + this.isCustomIcon = tbImageIcon(change.currentValue.icon); + } + } + } + } + } diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.html b/ui-ngx/src/app/shared/components/material-icon-select.component.html index 25aa51d30d..13bf46d1e0 100644 --- a/ui-ngx/src/app/shared/components/material-icon-select.component.html +++ b/ui-ngx/src/app/shared/components/material-icon-select.component.html @@ -37,6 +37,10 @@ [disabled]="disabled" #matButton (click)="openIconPopup($event, matButton)"> - {{materialIconFormGroup.get('icon').value}} + @if (!isCustomIcon) { + {{materialIconFormGroup.get('icon').value}} + } @else { + icon + } diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.ts b/ui-ngx/src/app/shared/components/material-icon-select.component.ts index 9432b3c96e..97c5519ed3 100644 --- a/ui-ngx/src/app/shared/components/material-icon-select.component.ts +++ b/ui-ngx/src/app/shared/components/material-icon-select.component.ts @@ -36,6 +36,7 @@ import { TbPopoverService } from '@shared/components/popover.service'; import { MaterialIconsComponent } from '@shared/components/material-icons.component'; import { MatButton } from '@angular/material/button'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { tbImageIcon } from '@shared/models/custom-menu.models'; @Component({ selector: 'tb-material-icon-select', @@ -71,6 +72,12 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit @coerceBoolean() iconClearButton = false; + @Input() + @coerceBoolean() + allowedCustomIcon = false; + + isCustomIcon = false; + private requiredValue: boolean; get required(): boolean { return this.requiredValue; @@ -131,11 +138,13 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit this.materialIconFormGroup.patchValue( { icon: this.modelValue }, {emitEvent: false} ); + this.defineIconType(value); } private updateModel() { const icon: string = this.materialIconFormGroup.get('icon').value; if (this.modelValue !== icon) { + this.defineIconType(icon); this.modelValue = icon; this.propagateChange(this.modelValue); } @@ -169,7 +178,8 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit this.viewContainerRef, MaterialIconsComponent, 'left', true, null, { selectedIcon: this.materialIconFormGroup.get('icon').value, - iconClearButton: this.iconClearButton + iconClearButton: this.iconClearButton, + allowedCustomIcon: this.allowedCustomIcon, }, {}, {}, {}, true); @@ -188,4 +198,10 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit this.materialIconFormGroup.get('icon').patchValue(null, {emitEvent: true}); this.cd.markForCheck(); } + + private defineIconType(icon: string) { + if (this.allowedCustomIcon) { + this.isCustomIcon = tbImageIcon(icon); + } + } } diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html index d4d9fe93a6..dcd285a99d 100644 --- a/ui-ngx/src/app/shared/components/material-icons.component.html +++ b/ui-ngx/src/app/shared/components/material-icons.component.html @@ -17,62 +17,84 @@ -->
icon.icons
- - search - - - - -
- - - - + @if (allowedCustomIcon) { +
+ + {{ 'resource.system' | translate }} + {{ 'icon.custom' | translate }} +
- - -
-
-
{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}
+ } + @if (!isCustomIcon) { + + search + + + + +
+ + + + +
+ + +
+
+
{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}
+
+ +
+ + +
- -
- - - -
+ } @else { + + +
+ + +
+ }
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.ts b/ui-ngx/src/app/shared/components/material-icons.component.ts index ece1a99108..6fe4c995e5 100644 --- a/ui-ngx/src/app/shared/components/material-icons.component.ts +++ b/ui-ngx/src/app/shared/components/material-icons.component.ts @@ -37,6 +37,7 @@ import { TbPopoverComponent } from '@shared/components/popover.component'; import { BreakpointObserver } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; import { coerceBoolean } from '@shared/decorators/coercion'; +import { tbImageIcon } from '@shared/models/custom-menu.models'; @Component({ selector: 'tb-material-icons', @@ -61,6 +62,10 @@ export class MaterialIconsComponent extends PageComponent implements OnInit { @coerceBoolean() showTitle = true; + @Input() + @coerceBoolean() + allowedCustomIcon = false; + @Input() popover: TbPopoverComponent; @@ -71,6 +76,8 @@ export class MaterialIconsComponent extends PageComponent implements OnInit { showAllSubject = new BehaviorSubject(false); searchIconControl: UntypedFormControl; + isCustomIcon = false; + iconsRowHeight = 48; iconsPanelHeight: string; @@ -122,14 +129,15 @@ export class MaterialIconsComponent extends PageComponent implements OnInit { map((data) => data.iconRows), share() ); + this.isCustomIcon = tbImageIcon(this.selectedIcon) } clearSearch() { this.searchIconControl.patchValue('', {emitEvent: true}); } - selectIcon(icon: MaterialIcon) { - this.iconSelected.emit(icon.name); + selectIcon(icon: string) { + this.iconSelected.emit(icon); } clearIcon() { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index fd368e2853..bb17471cbc 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -9507,6 +9507,7 @@ "icon": { "icon": "Icon", "icons": "Icons", + "custom": "Custom", "select-icon": "Select icon", "material-icons": "Material icons", "show-all": "Show all icons",