UI: Refactoring for new style

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html

@@ -28,7 +28,7 @@
         <div *ngFor="let key of visibleKeys(source)"
              [ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}">
           <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'">
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label>{{key.label}}</mat-label>
               <input matInput
                      formControlName="{{key.formId}}"
@@ -50,7 +50,7 @@
           </div>
           <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' ||
                                           key.settings.dataKeyValueType === 'integer'">
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label>{{key.label}}</mat-label>
               <input matInput
                      formControlName="{{key.formId}}"
@@ -86,7 +86,7 @@
             </mat-checkbox>
           </div>
           <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'JSON'">
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label>{{key.label}}</mat-label>
               <input
                 matInput
@@ -134,7 +134,7 @@
           <div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') ||
                                                     (key.settings.dataKeyValueType === 'date') ||
                                                     (key.settings.dataKeyValueType === 'time')" fxLayout="column">
-            <mat-form-field>
+            <mat-form-field appearance="outline">
               <mat-label>{{key.label}}</mat-label>
               <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
@@ -155,7 +155,7 @@
             </mat-form-field>
           </div>
           <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'select'">
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label>{{key.label}}</mat-label>
               <mat-select formControlName="{{key.formId}}"
                           [required]="key.settings.required"
@@ -172,16 +172,28 @@
               </mat-error>
             </mat-form-field>
           </div>
-          <tb-color-input fxFlex class="input-field"
-                          *ngIf="key.settings.dataKeyValueType === 'color'"
-                          label="{{key.label}}"
-                          icon="{{key.settings.icon}}"
-                          [required]="key.settings.required"
-                          [colorClearButton]="true"
-                          [requiredText]="getErrorMessageText(key.settings, 'required')"
-                          openOnInput
-                          formControlName="{{key.formId}}">
-          </tb-color-input>
+
+          <div class="color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+              <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
+                <mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
+                <ng-template #customToggleIcon>
+                  <img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
+                </ng-template>
+              </ng-container>
+              {{key.label}}
+            </div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+              <mat-divider vertical></mat-divider>
+              <tb-color-input asBoxInput
+                              [required]="key.settings.required"
+                              [requiredText]="getErrorMessageText(key.settings, 'required')"
+                              (colorChanged)="inputChanged(source, key)"
+                              openOnInput
+                              formControlName="{{key.formId}}">
+              </tb-color-input>
+            </div>
+          </div>
         </div>
       </div>
     </fieldset>

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss

@@ -21,7 +21,7 @@
     flex-direction: column;
 
     .tb-multiple-input-container {
-      padding: 0 8px;
+      padding: 8px 8px 0;
       flex: 1 1 100%;
       overflow-x: hidden;
       overflow-y: auto;
@@ -37,6 +37,30 @@
       }
     }
 
+    .color-picker-input {
+      height: 56px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 7px 16px 7px 12px;
+      margin: 0 10px 22px 0;
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      border-radius: 6px;
+
+      .mat-icon, img {
+        margin-right: 5px;
+      }
+
+      .mat-divider-vertical {
+        height: 56px;
+        margin-top: -7px;
+        margin-bottom: -7px;
+        border-right-color: rgba(0, 0, 0, 0.4);
+      }
+    }
+
     .input-field {
       padding-right: 10px;
 

ui-ngx/src/app/shared/components/color-input.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -91,6 +91,8 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
   @Input()
   disabled: boolean;
 
+  @Output() colorChanged: EventEmitter<any> = new EventEmitter();
+
   private modelValue: string;
 
   private propagateChange = null;
@@ -150,6 +152,7 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
     if (this.modelValue !== color) {
       this.modelValue = color;
       this.propagateChange(this.modelValue);
+      this.colorChanged.emit(color);
     }
   }