added icon to item views

heinerwalter · Oct 27, 2024 · 250d2c6 · 250d2c6
1 parent f8b806b
commit 250d2c6
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...roperty-editor/src/lib/components/bootstrap/item-views/accordion/accordion.component.html b/...roperty-editor/src/lib/components/bootstrap/item-views/accordion/accordion.component.html
@@ -13,15 +13,25 @@
         <h2 ngbAccordionHeader>
           <ng-container *ngIf="!item.routerLink">
             <button ngbAccordionButton (click)="onItemChanged(item, i)">
-              <span class="ngb-accordion-button-label">{{item.label}}</span>
+              <span class="ngb-accordion-button-label">
+                <fa-icon *ngIf="item.icon" [icon]="item.icon"
+                         class="ngb-accordion-button-label-icon">
+                </fa-icon>
+                {{item.label}}
+              </span>
               <pe-validity-icon class="ngb-accordion-button-validity-icon"
                                 [validity]="item.validity">
               </pe-validity-icon>
             </button>
           </ng-container>
           <ng-container *ngIf="item.routerLink">
             <button ngbAccordionButton [routerLink]="item.routerLink">
-              <span class="ngb-accordion-button-label">{{item.label}}&hellip;</span>
+              <span class="ngb-accordion-button-label">
+                <fa-icon *ngIf="item.icon" [icon]="item.icon"
+                         class="ngb-accordion-button-label-icon">
+                </fa-icon>
+                {{item.label}}&hellip;
+              </span>
               <pe-validity-icon class="ngb-accordion-button-validity-icon"
                                 [validity]="item.validity">
               </pe-validity-icon>
@@ -33,7 +43,7 @@ <h2 ngbAccordionHeader>
           <div ngbAccordionBody *ngIf="!item.routerLink && item.contentTemplate">
             <ng-template>
               <ng-template [ngTemplateOutlet]="item.contentTemplate"
-                           [ngTemplateOutletContext]="{ label: item.label, index: i }">
+                           [ngTemplateOutletContext]="{ label: item.label, icon: item.icon, index: i }">
               </ng-template>
             </ng-template>
           </div>

diff --git a/...roperty-editor/src/lib/components/bootstrap/item-views/accordion/accordion.component.scss b/...roperty-editor/src/lib/components/bootstrap/item-views/accordion/accordion.component.scss
@@ -1,6 +1,11 @@
 [ngbAccordion] [ngbAccordionButton] {
   .ngb-accordion-button-label {
     flex-grow: 1;
+
+    .ngb-accordion-button-label-icon {
+      display: inline-block;
+      padding-right: 0.5em;
+    }
   }
 
   .ngb-accordion-button-validity-icon {

diff --git a/...-property-editor/src/lib/components/bootstrap/item-views/item-view-item-base.component.ts b/...-property-editor/src/lib/components/bootstrap/item-views/item-view-item-base.component.ts
@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import { ItemViewBaseComponent } from './item-view-base.component';
 import { ValidityIconType } from '../../icon/validity-icon/validity-icon.component';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
 
 /**
@@ -24,6 +25,8 @@ export type ItemDefinition = {
   order?: number | undefined,
   /** Label of the button selecting this item. */
   label: string,
+  /** Optional FontAwesome icon displayed on the button selecting this item. */
+  icon?: IconDefinition | undefined,
   /** Reference to the item content template. */
   contentTemplate?: TemplateRef<any>,
   /** If no `contentTemplate` is defined, the item button can be displayed as link to this destination. */
@@ -54,6 +57,9 @@ export abstract class ItemViewItemBaseComponent implements OnInit, OnChanges, Af
   @Input() public order: number | undefined = undefined;
   /** Label of the button selecting this item. */
   @Input() public label: string = '';
+  /** Optional FontAwesome icon displayed on the button selecting this item. */
+  @Input() public icon?: IconDefinition | undefined = undefined;
+
   /** Reference to the item content template. */
   @ViewChild('itemContentTemplate') public contentTemplate?: TemplateRef<any>;
   /** If no `contentTemplate` is defined, the item button can be displayed as link to this destination. */

diff --git a/...ects/ngx-property-editor/src/lib/components/bootstrap/item-views/tabs/tabs.component.html b/...ects/ngx-property-editor/src/lib/components/bootstrap/item-views/tabs/tabs.component.html
@@ -16,17 +16,24 @@
                       [ngbNavItem]="id + '-tab' + i">
 
           <ng-container *ngIf="!item.routerLink">
-            <button ngbNavLink (click)="onItemChanged(item, i)">{{item.label}}</button>
+            <button ngbNavLink (click)="onItemChanged(item, i)">
+              <fa-icon *ngIf="item.icon" [icon]="item.icon"
+                       class="tab-label-icon">
+              </fa-icon>
+              {{item.label}}
+            </button>
             <ng-template ngbNavContent>
               <ng-template *ngIf="item.contentTemplate"
                            [ngTemplateOutlet]="item.contentTemplate"
-                           [ngTemplateOutletContext]="{ label: item.label, index: i }">
+                           [ngTemplateOutletContext]="{ label: item.label, icon: item.icon, index: i }">
               </ng-template>
             </ng-template>
           </ng-container>
 
           <ng-container *ngIf="item.routerLink">
-            <a ngbNavLink [routerLink]="item.routerLink">{{item.label}}&hellip;</a>
+            <a ngbNavLink [routerLink]="item.routerLink"><fa-icon
+                *ngIf="item.icon" [icon]="item.icon"
+                class="tab-label-icon"></fa-icon>{{item.label}}&hellip;</a>
           </ng-container>
 
         </ng-container>

diff --git a/...ects/ngx-property-editor/src/lib/components/bootstrap/item-views/tabs/tabs.component.scss b/...ects/ngx-property-editor/src/lib/components/bootstrap/item-views/tabs/tabs.component.scss
@@ -6,6 +6,11 @@
 
 pe-tabs {
 
+  .tab-label-icon {
+    display: inline-block;
+    padding-right: 0.5em;
+  }
+
   // Horizontal tabs:
   .tabs-horizontal {
     .nav-tabs {