From d58852da4bc8e340b21cb1163e57519050bf00f8 Mon Sep 17 00:00:00 2001
From: "Kai J." <da.kai.creator@gmail.com>
Date: Mon, 28 Oct 2024 21:33:50 +0100
Subject: [PATCH] UI: Unify icon styling (#2731)

---
 .../Channelthreshold/Channelthreshold.html         |  2 +-
 ui/src/app/edge/live/Controller/ChpSoc/ChpSoc.html |  2 +-
 .../Io_ChannelSingleThreshold.html                 |  2 +-
 .../Io_ChannelSingleThreshold.ts                   |  2 +-
 .../components/flat/flat-widget.component.html     |  4 ++--
 ui/src/app/shared/components/flat/flat.html        |  4 ++--
 ui/src/app/shared/components/flat/flat.ts          |  4 ++--
 ui/src/app/shared/type/widget.ts                   |  5 +++++
 ui/src/global.scss                                 | 14 ++++++++++++++
 9 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/edge/live/Controller/Channelthreshold/Channelthreshold.html b/ui/src/app/edge/live/Controller/Channelthreshold/Channelthreshold.html
index 8cb74e66409..21cf476ec98 100644
--- a/ui/src/app/edge/live/Controller/Channelthreshold/Channelthreshold.html
+++ b/ui/src/app/edge/live/Controller/Channelthreshold/Channelthreshold.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="isInitialized">
   <ng-container *ngVar="(component.id === component.alias ? outputChannel.channelId : component.alias) as name">
-    <oe-flat-widget [icon]="{name: icon.name, color:icon.color}" [title]="name | translate">
+    <oe-flat-widget [icon]="icon" [title]="name | translate">
       <oe-flat-widget-line [name]="name | translate" [value]="state">
       </oe-flat-widget-line>
     </oe-flat-widget>
diff --git a/ui/src/app/edge/live/Controller/ChpSoc/ChpSoc.html b/ui/src/app/edge/live/Controller/ChpSoc/ChpSoc.html
index 8dc374e330e..4e557816fc5 100644
--- a/ui/src/app/edge/live/Controller/ChpSoc/ChpSoc.html
+++ b/ui/src/app/edge/live/Controller/ChpSoc/ChpSoc.html
@@ -5,7 +5,7 @@
     </oe-flat-widget-line>
 
     <ng-template #noValue>
-        <oe-flat-widget-line [icon]="{name: icon.name}" [name]="'General.state' | translate"></oe-flat-widget-line>
+        <oe-flat-widget-line [icon]="icon" [name]="'General.state' | translate"></oe-flat-widget-line>
     </ng-template>
 
     <oe-flat-widget-percentagebar *ngIf="this.modeChannelValue === 'AUTOMATIC'">
diff --git a/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.html b/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.html
index 4d5daaa2a78..1154cfc7ba1 100644
--- a/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.html
+++ b/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.html
@@ -1,5 +1,5 @@
 <oe-flat-widget *ngIf="isInitialized" button (click)="presentModal()" [title]="component.alias"
-  [icon]="{name: icon.name}">
+  [icon]="icon">
   <oe-flat-widget-line [name]="'General.state' | translate" [value]="state"></oe-flat-widget-line>
   <oe-flat-widget-line [name]="'General.mode' | translate" [value]="mode"></oe-flat-widget-line>
 
diff --git a/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.ts b/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.ts
index bbed2715a18..b2ac0822479 100644
--- a/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.ts
+++ b/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/Io_ChannelSingleThreshold.ts
@@ -19,7 +19,7 @@ export class Controller_Io_ChannelSingleThresholdComponent extends AbstractFlatW
   public icon: Icon = {
     name: "",
     color: "",
-    size: "",
+    size: "large",
   };
   public dependendOn: string;
   public dependendOnValue: any;
diff --git a/ui/src/app/shared/components/flat/flat-widget.component.html b/ui/src/app/shared/components/flat/flat-widget.component.html
index a969eb76a61..6736d32e9d8 100644
--- a/ui/src/app/shared/components/flat/flat-widget.component.html
+++ b/ui/src/app/shared/components/flat/flat-widget.component.html
@@ -2,8 +2,8 @@
     <ion-item color="light" lines="full">
 
         <!-- Check if img or icon is handed over. -->
-        <ion-avatar *ngIf="img" slot="start">
-            <img [src]="img">
+        <ion-avatar *ngIf="img" slot="start" [class]="'iconify' + (img.large? ' icon-large' : '')">
+            <img [src]="img.src">
         </ion-avatar>
         <ion-icon *ngIf="icon" slot="start" [size]="icon.size || 'large'" [color]="icon.color || 'primary'"
             [name]="icon.name">
diff --git a/ui/src/app/shared/components/flat/flat.html b/ui/src/app/shared/components/flat/flat.html
index 0e2ae2de349..11e8fcd6f82 100644
--- a/ui/src/app/shared/components/flat/flat.html
+++ b/ui/src/app/shared/components/flat/flat.html
@@ -2,8 +2,8 @@
     <ion-item color="light" lines="full">
 
         <!-- Check if img or icon is handed over. -->
-        <ion-avatar *ngIf="img" slot="start">
-            <img [src]="img">
+        <ion-avatar *ngIf="img" slot="start" [class]="'iconify' + (img.large? ' icon-large' : '')">
+            <img [src]="img.src">
         </ion-avatar>
         <ion-icon *ngIf="icon" slot="start" [size]="icon.size || 'large'" [color]="icon.color || 'primary'"
             [name]="icon.name">
diff --git a/ui/src/app/shared/components/flat/flat.ts b/ui/src/app/shared/components/flat/flat.ts
index a2642ad0b75..69bf1077329 100644
--- a/ui/src/app/shared/components/flat/flat.ts
+++ b/ui/src/app/shared/components/flat/flat.ts
@@ -1,6 +1,6 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";
-import { Icon } from "src/app/shared/type/widget";
+import { Icon, ImageIcon } from "src/app/shared/type/widget";
 
 @Component({
   selector: "oe-flat-widget",
@@ -9,7 +9,7 @@ import { Icon } from "src/app/shared/type/widget";
 export class FlatWidgetComponent {
 
   /** Image in Header */
-  @Input() public img?: string;
+  @Input() public img?: ImageIcon;
 
   /** Icon in Header */
   @Input() public icon: Icon | null = null;
diff --git a/ui/src/app/shared/type/widget.ts b/ui/src/app/shared/type/widget.ts
index 5f72e25e0ce..a6f73311e93 100644
--- a/ui/src/app/shared/type/widget.ts
+++ b/ui/src/app/shared/type/widget.ts
@@ -47,6 +47,11 @@ export type Icon = {
     name: string;
 };
 
+export type ImageIcon = {
+    src: string;
+    large: boolean;
+};
+
 export class Widget {
     public name: WidgetNature | WidgetFactory | string;
     public componentId: string;
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 50d881926b2..64cf303577b 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -416,3 +416,17 @@ ion-modal.full-width {
 .card-with-primary-border {
     border: 2px solid $primary-color;
 }
+
+ion-avatar.iconify {
+    margin-inline-end: 32px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    --border-radius: 0;
+    max-height: 24px;
+    max-width: 24px;
+}
+
+ion-avatar.iconify.icon-large {
+    max-height: 32px;
+    max-width: 32px;
+}