status-list: update styling, adding selected and hover states

Author: jesselucas

src/app/charts/chart-item/chart-item.component.scss

@@ -10,7 +10,7 @@
         color: #303030;
     }
     .selected a {
-        color: #000000;
+        color: #303030;
         text-decoration: none;
     }
 

src/app/lists/device-list/device-list.component.html

@@ -9,17 +9,17 @@
   </ng-container>
   <ng-container matColumnDef="expandedDetail">
     <td mat-cell *matCellDef="let device" [attr.colspan]="displayedColumns.length">
-      <div class="device-detail" [@detailExpand]="device == expandedDevice ? 'expanded' : 'collapsed'">
-        <div class="device-folders">
+      <div class="table-detail" [@detailExpand]="device == expandedDevice ? 'expanded' : 'collapsed'">
+        <div class="detail-items">
           <span>Folders: </span>
-          <span class="folder-name" *ngFor="let folder of device.folders">{{folder.label | trim}}</span>
+          <span class="item-name" *ngFor="let folder of device.folders">{{folder.label | trim}}</span>
         </div>
       </div>
     </td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let device; columns: displayedColumns;" class="device-row"
+  <tr mat-row *matRowDef="let device; columns: displayedColumns;" class="table-row"
     [class.expanded-row]="expandedDevice === device"
     (click)="expandedDevice = expandedDevice === device ? null : device">
   </tr>

src/app/lists/device-list/device-list.component.scss

@@ -14,7 +14,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 @Component({
   selector: 'app-device-list',
   templateUrl: './device-list.component.html',
-  styleUrls: ['./device-list.component.scss'],
+  styleUrls: ['../status-list/status-list.component.scss'],
   animations: [
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),

src/app/lists/device-list/device-list.component.ts

@@ -10,18 +10,18 @@
     <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
     <ng-container matColumnDef="expandedDetail">
         <td mat-cell *matCellDef="let folder" [attr.colspan]="displayedColumns.length">
-            <div class="folder-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
-                <div class="folder-devices">
+            <div class="table-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
+                <div class="detail-items">
                     <span>Shared with: </span>
-                    <span class="device-name" *ngFor="let device of folder.devices">{{device.name}}</span>
+                    <span class="item-name" *ngFor="let device of folder.devices">{{device.name}}</span>
                 </div>
             </div>
         </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let folder; columns: displayedColumns;" class="folder-row"
-        [class.example-expanded-row]="expandedFolder === folder"
+    <tr mat-row *matRowDef="let folder; columns: displayedColumns;" class="table-row"
+        [class.expanded-row]="expandedFolder === folder"
         (click)="expandedFolder = expandedFolder === folder ? null : folder">
     </tr>
     <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>

src/app/lists/folder-list/folder-list.component.html

@@ -14,7 +14,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 @Component({
   selector: 'app-folder-list',
   templateUrl: './folder-list.component.html',
-  styleUrls: ['./folder-list.component.scss'],
+  styleUrls: ['../status-list/status-list.component.scss'],
   animations: [
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),

src/app/lists/folder-list/folder-list.component.scss

@@ -1,3 +1,70 @@
 .status-list .tui-card-toggle {
     padding: 16px 16px 0 16px;
+}
+
+.full-width-table {
+    width: 100%;
+}
+
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
+}
+
+tr.detail-row {
+    height: 0;
+}
+
+tr.table-row:not(.expanded-row):hover {
+    background: whitesmoke;
+    color: #303030;
+}
+
+tr.table-row:not(.expanded-row):active {
+    background: #DDDDDD;
+    color: #303030;
+}
+
+.expanded-row {
+    background: #DDDDDD;
+    color: #303030;
+}
+
+.table-row td {
+    border-bottom-width: 0;
+}
+
+.table-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+.detail-items {
+    padding: 16px;
+}
+
+// Hide empty name
+.item-name:empty {
+    display: none;
+}
+
+.item-name:not(:last-child):after {
+    content: ", ";
+}
+
+@media (prefers-color-scheme: dark) {
+    tr.table-row:not(.expanded-row):hover {
+        background: #212121;
+        color: white;
+    }
+
+    tr.table-row:not(.expanded-row):active {
+        background: #212121;
+        color: white;
+    }
+
+    .expanded-row {
+        background: #212121;
+        color: white;
+    }
 }

src/app/lists/folder-list/folder-list.component.ts

@@ -3,6 +3,7 @@
 @import '~@angular/material/theming';
 @import './app/card/card.component.scss';
 @import './app/charts/chart-item/chart-item.component.scss';
+@import './app/lists/status-list/status-list.component.scss';
 
 
 // Custom typography
@@ -81,7 +82,6 @@ $tech-ui-dark-theme: mat-dark-theme($tech-ui-primary, $tech-ui-accent, $tech-ui-
 @include angular-material-theme($tech-ui-theme);
 @include tui-card-theme($tech-ui-theme);
 @include chart-item-theme($tech-ui-theme);
-
 
 html, body { 
     height: 100%;