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

This commit is contained in:
Jesse Lucas
2020-04-14 21:00:48 -04:00
parent 8b4a1f52d0
commit 9dd319f4da
9 changed files with 80 additions and 101 deletions
@@ -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>