feat(material/forms): redesign table field

Author: sara-re

projects/core/forms/src/read-only-table-field.html

@@ -15,10 +15,9 @@
             <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
-                  >
+                  <span>{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber:
+                    '.0-2'
+                    }}</span>
                 </ng-container>
               </ng-container>
             </ng-template>
@@ -27,4 +26,4 @@
       </tr>
     </ng-container>
   </ng-container>
-</table>
+</table>

projects/core/forms/src/table-row-class.ts

@@ -31,6 +31,9 @@ import {Pipe, PipeTransform} from '@angular/core';
 @Pipe({name: 'ajfTableRowClass'})
 export class AjfTableRowClass implements PipeTransform {
   transform(value: number): string {
+    if (value === 0) {
+      return 'ajf-header-row';
+    }
     return value % 2 == 0 ? 'ajf-row-even' : 'ajf-row-odd';
   }
 }

projects/material/forms/src/field.scss

@@ -23,10 +23,6 @@ ajf-field {
     font-style: italic;
     padding: 5px;
   }
-
-  tr.ajf-row-odd {
-    background-color: grey;
-  }
 }
 
 table {
@@ -66,15 +62,6 @@ table {
         }
       }
     }
-
-    &:last-of-type {
-      td {
-        span,
-        input {
-          border-bottom-color: #cccccc;
-        }
-      }
-    }
   }
 }
 

projects/material/forms/src/table-field.html

@@ -15,34 +15,21 @@
             <ng-template #controlCell>
               <ng-container *ngIf="c|ajfGetTableCellControl as contr">
                 <ng-container *ngIf="contr">
-                  <ng-container
-                    *ngIf="contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell"
-                  >
+                  <ng-container *ngIf="contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell">
                     <ng-container *ngIf="contr.type === 'number';else genericInput">
-                      <input
-                        (focusout)="contr!.show = false"
-                        type="number"
-                        [formControl]="contr.control"
-                        (keydown.tab)="goToNextCell($event, row, column)"
-                        autofocus
-                      />
+                      <input (focusout)="contr!.show = false" type="number" [formControl]="contr.control"
+                        (keydown.tab)="goToNextCell($event, row, column)" autofocus />
                     </ng-container>
                     <ng-template #genericInput>
-                      <input
-                        (focusout)="contr!.show = false"
-                        [type]="contr.type"
-                        [formControl]="contr.control"
-                        (keydown.tab)="goToNextCell($event, row, column)"
-                        autofocus
-                      />
+                      <input (focusout)="contr!.show = false" [type]="contr.type" [formControl]="contr.control"
+                        (keydown.tab)="goToNextCell($event, row, column)" autofocus />
                     </ng-template>
                   </ng-container>
 
                   <ng-template #plainTextCell>
-                    <span class="ajf-table-cell" (click)="goToCell(row, column)"
-                      >{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2'
-                      }}</span
-                    >
+                    <span (click)="goToCell(row, column)">{{ contr.control!.value |
+                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'
+                      }}</span>
                   </ng-template>
                 </ng-container>
               </ng-container>
@@ -52,4 +39,4 @@
       </tr>
     </ng-container>
   </ng-container>
-</table>
+</table>

projects/material/forms/src/table-field.scss

@@ -1,43 +1,46 @@
 table.ajf-table-field {
-  border-collapse: collapse;
-  border-spacing: 0;
   width: 100%;
+  border-collapse: collapse;
+  .ajf-header-row {
+    font-weight: bold;
+    background-color: #f9f9f9;
+  }
 
-  tr {
-    td {
-      position: relative;
-      min-width: 2em;
-      border-top: solid 1px #cccccc;
-      border-left: solid 1px #cccccc;
-
-      span, input {
-        cursor: text;
-        width: 100%;
-        box-sizing: border-box;
-        outline: none;
-        display: inline-block;
-        font-family: inherit;
-        font-size: inherit;
-        line-height: inherit;
-        text-align: center;
-        position: relative;
-        min-height: 22px;
-        border: none;
-      }
+  th,
+  td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
 
-      &:last-child {
-        span, input {
-          border-right-color: #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 transparent;
+      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;
+      padding: 12px 15px;
     }
+  }
 
-    &:last-of-type {
-      td {
-        span, input {
-          border-bottom-color: #cccccc;
-        }
-      }
-    }
+  tr:hover {
+    background-color: #f1f1f1;
   }
+
+  /*tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }*/
 }