UI: fix formly form styles (#2962)

fixing styles permanently for component-update and component-install and all other components, which are using the default formlyfield type input
OpenEMS · Jan 13, 2025 · 49bccb8 · 49bccb8
1 parent 86c43a2
commit 49bccb8
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/ui/src/app/shared/components/formly/form-field.wrapper.html b/ui/src/app/shared/components/formly/form-field.wrapper.html
@@ -1,9 +1,4 @@
 <ion-item [lines]="to.itemLines" [disabled]="props.readonly">
-    <ion-label [position]="to.labelPosition" style="max-width:none">
-        <span>{{ to.label }}</span>
-        <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
-        <span *ngIf="to.description"><br /><small> {{ to.description }} </small></span>
-    </ion-label>
     <ng-template #fieldComponent></ng-template>
 </ion-item>
 <ion-item lines="none" *ngIf="showError">

diff --git a/ui/src/app/shared/components/formly/form-field.wrapper.ts b/ui/src/app/shared/components/formly/form-field.wrapper.ts
@@ -6,5 +6,12 @@ import { FieldWrapper } from "@ngx-formly/core";
     templateUrl: "./form-field.wrapper.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: false,
+    styles: [`
+    :host {
+        formly-field-ion-toggle, formly-field-ion-checkbox{
+            width: 100%;
+        }
+    }
+    `],
 })
 export class FormlyWrapperFormFieldComponent extends FieldWrapper { }
diff --git a/ui/src/app/shared/components/formly/input.html b/ui/src/app/shared/components/formly/input.html
@@ -1,9 +1,16 @@
 <ion-input *ngIf="props.type === 'number'; else noNumberInput" placeholder="{{props.placeholder}}"
     style="width:100%; float:right; text-align: right" [type]="props.type || 'text'" [formControl]="formControl"
-    [min]="props.min">
+    [min]="props.min" [label]="props.label">
 </ion-input>
 <ng-template #noNumberInput>
-    <ion-input placeholder="{{props.placeholder}}" style="width:100%; float:right; text-align: right"
-        [type]="props.type || 'text'" [formControl]="formControl">
+    <ion-input placeholder="{{props.placeholder}}" [type]="props.type || 'text'" [formControl]="formControl"
+        style="text-align: right" labelPlacement="start" justify="space-between">
+        <div style="text-align: left;">
+            <ion-label [position]="to.labelPosition">
+                <span>{{ to.label }}</span>
+                <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
+                <span *ngIf="to.description"><br /><small>{{ to.description }}</small></span>
+            </ion-label>
+        </div>
     </ion-input>
 </ng-template>
diff --git a/ui/src/app/shared/components/formly/input.ts b/ui/src/app/shared/components/formly/input.ts
@@ -5,5 +5,35 @@ import { FieldType } from "@ngx-formly/core";
     selector: "formly-input-section",
     templateUrl: "./input.html",
     standalone: false,
+    styles: [`
+    :host {
+        min-width: fit-content;
+
+        .label-text-wrapper{
+            .label-text{
+                overflow: visible;
+            }
+        }
+
+        .native-wrapper{
+            max-width: max-content !important;
+            width: max-content;
+            min-width: 20%;
+
+            @media (width <= 576px) {
+                text-align: right;
+            }
+        }
+
+        ion-label{
+            text-align: left;
+        }
+
+        ion-label>span,
+        ion-label>span>small {
+            white-space: initial;
+        }
+}
+`],
 })
 export class InputTypeComponent extends FieldType { }
diff --git a/ui/src/app/user/user.component.html b/ui/src/app/user/user.component.html
@@ -166,8 +166,7 @@
                 </ion-item>
               </div>
               <ion-item lines="none">
-                <ion-checkbox (ionChange)="toggleDebugMode($event)" [(ngModel)]="environment.debugMode"
-                  label="Debug-Mode" justify="space-between">Debug-Mode
+                <ion-checkbox (ionChange)="toggleDebugMode($event)" [(ngModel)]="environment.debugMode">Debug-Mode
                 </ion-checkbox>
               </ion-item>
               <ion-note class="ion-padding" *ngIf="environment.backend === 'OpenEMS Edge'">