fix(material/forms): add header in readonly table and fix cell height

gnucoop · Oct 25, 2022 · 6ad5ce2 · 6ad5ce2
1 parent 383d692
commit 6ad5ce2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/projects/core/forms/src/read-only-table-field.html b/projects/core/forms/src/read-only-table-field.html
@@ -9,13 +9,19 @@
         </td>
         <ng-container *ngIf="columns && columns.length > 1 && columns[1]">
           <td *ngFor="let c of columns[1]; let column = index">
-            <ng-container *ngIf="c|ajfGetTableCellControl as contr">
-              <ng-container *ngIf="contr">
-                <span *ngIf="row > 0; else labelCell"
-                  class="ajf-table-cell">{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}</span>
-                <ng-template #labelCell>{{ contr | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}</ng-template>
-              </ng-container>
+            <ng-container *ngIf="row === 0; else controlCell">
+              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}
             </ng-container>
+            <ng-template #controlCell>
+              <ng-container *ngIf="c|ajfGetTableCellControl as contr">
+                <ng-container *ngIf="contr">
+                  <span class="ajf-table-cell"
+                    >{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2'
+                    }}</span
+                  >
+                </ng-container>
+              </ng-container>
+            </ng-template>
           </td>
         </ng-container>
       </tr>

diff --git a/projects/material/forms/src/table-field.html b/projects/material/forms/src/table-field.html
@@ -18,9 +18,7 @@
                   <ng-container
                     *ngIf="contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell"
                   >
-                    <ng-container
-                      *ngIf="contr.type === 'number';else genericInput"
-                    >
+                    <ng-container *ngIf="contr.type === 'number';else genericInput">
                       <input
                         (focusout)="contr!.show = false"
                         type="number"
@@ -42,8 +40,8 @@
 
                   <ng-template #plainTextCell>
                     <span class="ajf-table-cell" (click)="goToCell(row, column)"
-                      >{{ contr.control!.value | ajfTranslateIfString |
-                      ajfFormatIfNumber: '.0-2' }}</span
+                      >{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2'
+                      }}</span
                     >
                   </ng-template>
                 </ng-container>

diff --git a/projects/material/forms/src/table-field.scss b/projects/material/forms/src/table-field.scss
@@ -6,27 +6,23 @@ table.ajf-table-field {
   tr {
     td {
       position: relative;
-      min-width: 1em;
+      min-width: 2em;
+      border-top: solid 1px #cccccc;
+      border-left: solid 1px #cccccc;
 
       span, input {
         cursor: text;
-        position: absolute;
         width: 100%;
         box-sizing: border-box;
         outline: none;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
         display: inline-block;
-        border-top: solid 1px #cccccc;
-        border-right: solid 1px transparent;
-        border-bottom: solid 1px transparent;
-        border-left: solid 1px #cccccc;
         font-family: inherit;
         font-size: inherit;
         line-height: inherit;
         text-align: center;
+        position: relative;
+        min-height: 22px;
+        border: none;
       }
 
       &:last-child {