From c2bf11785e3b882945d0a98029921956fd039d3b Mon Sep 17 00:00:00 2001
From: Clemente Raposo <clemente.raposo@salesagility.com>
Date: Thu, 5 Dec 2024 00:47:48 +0000
Subject: [PATCH] Update field-layout display for new UI

---
 .../field-layout/field-layout.component.html  | 75 ++++++++--------
 .../suite8/css/components/_field-layout.scss  | 86 ++++++++++++++++++-
 2 files changed, 121 insertions(+), 40 deletions(-)

diff --git a/core/app/core/src/lib/components/field-layout/field-layout.component.html b/core/app/core/src/lib/components/field-layout/field-layout.component.html
index a6b3d0ba9..a799513ff 100644
--- a/core/app/core/src/lib/components/field-layout/field-layout.component.html
+++ b/core/app/core/src/lib/components/field-layout/field-layout.component.html
@@ -26,50 +26,53 @@
 */
 -->
 <form class="field-layout {{config.mode}}">
-    <div [ngClass]="rowClass" *ngFor="let row of fieldGrid; index as i">
+    <div [ngClass]="rowClass" class="field-layout-row" *ngFor="let row of fieldGrid; index as i">
 
         <div *ngFor="let col of row.cols; index as colNumber"
              [class.field-column-bordered]="row.cols.length > 1 && colNumber < row.cols.length - 1"
-             [ngClass]="colClass">
+             [ngClass]="colClass"
+             class="field-layout-col">
 
             <ng-container *ngIf="col.field && col.field.display !== 'none'">
-                <div class="label-container">
-                    <strong>
-                        <label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>:
-                        <ng-container
-                            *ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
-                            <span class="required">*</span>
-                        </ng-container>
-                    </strong>
-                </div>
-                <div class="d-flex flex-grow-1"
-                    [ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
-                    <div class="flex-grow-1 text-break">
-                        <scrm-field [type]="col.field.type"
-                                    [mode]="config.mode"
-                                    [klass]="inputClass"
-                                    [field]="col.field"
-                                    [record]="record">
-                        </scrm-field>
+                <div class="field-layout-field-group-wrapper form-group row">
+                    <div class="col-sm-3 field-layout-field-label-wrapper col-form-label label-container">
+                        <strong>
+                            <ng-container
+                                *ngIf="col.field.definition.required && (['edit', 'create'].includes(config.mode))">
+                                <span class="required">*</span>
+                            </ng-container>
+                            <label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>
+                        </strong>
                     </div>
-
-                    <ng-container *ngIf="col?.fieldActions && ((col?.fieldActions?.position ?? 'inline') === 'inline')">
-                        <div>
-                            <scrm-action-group-menu
-                                [config]="col.adaptor"
-                                [buttonGroupClass] = "col.fieldActions?.containerKlass ?? ''"
-                                [klass] = "col.fieldActions?.klass ?? ''"
-                            >
-                            </scrm-action-group-menu>
+                    <div class="col-sm-9 d-flex flex-grow-1 field-layout-field-wrapper"
+                        [ngClass]="{ 'align-items-center': (col?.fieldActions && col?.fieldActions?.position === 'inline') }">
+                        <div class="flex-grow-1 text-break field-layout-field-value-wrapper">
+                            <scrm-field [type]="col.field.type"
+                                        [mode]="config.mode"
+                                        [klass]="inputClass"
+                                        [field]="col.field"
+                                        [record]="record">
+                            </scrm-field>
                         </div>
-                    </ng-container>
 
-                    <div>
-                        <button type="button" class="record-action-button"
-                                (click)="this.dataSource.getEditAction()"
-                                *ngIf="col.field.definition.inline_edit !== false && !col.field.readonly && !col.field.definition.readonly && this.dataSource.inlineEdit && config.mode === 'detail'">
-                            <scrm-image class="sicon" image="pencil"></scrm-image>
-                        </button>
+                        <ng-container *ngIf="col?.fieldActions && ((col?.fieldActions?.position ?? 'inline') === 'inline')">
+                            <div>
+                                <scrm-action-group-menu
+                                    [config]="col.adaptor"
+                                    [buttonGroupClass] = "col.fieldActions?.containerKlass ?? ''"
+                                    [klass] = "col.fieldActions?.klass ?? ''"
+                                >
+                                </scrm-action-group-menu>
+                            </div>
+                        </ng-container>
+
+                        <div>
+                            <button type="button" class="record-action-button"
+                                    (click)="this.dataSource.getEditAction()"
+                                    *ngIf="col.field.definition.inline_edit !== false && !col.field.readonly && !col.field.definition.readonly && this.dataSource.inlineEdit && config.mode === 'detail'">
+                                <scrm-image class="sicon" image="pencil"></scrm-image>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </ng-container>
diff --git a/core/app/shell/src/themes/suite8/css/components/_field-layout.scss b/core/app/shell/src/themes/suite8/css/components/_field-layout.scss
index c5adb392b..960f8535b 100644
--- a/core/app/shell/src/themes/suite8/css/components/_field-layout.scss
+++ b/core/app/shell/src/themes/suite8/css/components/_field-layout.scss
@@ -24,22 +24,100 @@
  * the words "Supercharged by SuiteCRM".
  */
 
-.field-layout .label-container,
-.field-layout .label-container label {
-  color: $midnight-blue;
+
+.field-layout.edit {
+  .field-separation {
+    display: none;
+  }
+
+  .field-layout-field-group-wrapper {
+    margin-bottom: 5px;
+  }
+}
+
+.field-layout-field-group-wrapper {
+  min-height: 2em;
+}
+
+.field-layout .field-separation {
+  border-top: 1px solid #ddd;
+  margin-top: 0px !important;
+  padding-top: 5px !important;
+}
+
+span.required {
+  color: $amaranth;
+  position: absolute;
+  left: 7px;
+}
+
+.tabs-layout .nav-tabs .tab-link {
+  background-color: #d7dde1;
+  color: #333;
+  font-size: .8rem;
+  border: none;
+  padding: .35rem 1rem;
+}
+
+.tab-content {
+  box-shadow: 0 .125rem .25rem #00000013 !important;
+  border: 1px solid #dee2e6 !important;
+}
+
+.tabs-layout .nav-tabs .tab {
+  display: flex;
+  align-items: end;
+}
+
+.form-row > .col, .form-row > [class*=col-] {
+  /* padding-right: 5px !important; */
+  padding-left: 5px;
+  padding-bottom: 2px !important;
+}
+
+.field-layout {
+  > .form-row > .form-group > .form-group.row {
+    margin-bottom: 0;
+  }
+
+  .col-form-label {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .col-form-label-sm {
+      padding-top: 0;
+      padding-bottom: 0;
+      font-size: .76rem;
+    }
+  }
 }
 
 .field-layout .field-column-bordered {
-  border-right: $nepal-grey solid 0.0625rem;
+  //border-right: $nepal-grey solid 0.0625rem;
+  /*
+  .form-group::after {
+    content: " ";
+    position: absolute;
+    right: 0;
+    top: 25%;
+    transform: translate(50%, 50%);
+    width: 3px;
+    height: 3px;
+    background-color: grey;
+    border-radius: 50%;
+    margin-bottom: auto;
+  }*/
 }
 
 .field-separation {
+  /*
   height: 0.1em;
   color: darkgrey;
   background-image: linear-gradient(to right, grey 10%, rgba(255, 255, 255, 0) 0%);
   background-position: top;
   background-size: 0.5em 0.1em;
   background-repeat: repeat-x;
+  */
 }
 
 .field-layout.detail textarea.form-control:disabled,