UI: Unify icon styling (#2731)

OpenEMS · Oct 28, 2024 · d58852d · d58852d
1 parent 7ef6c74
commit d58852d
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}