Skip to content
This repository has been archived by the owner on Feb 10, 2021. It is now read-only.

Commit

Permalink
status-list: update styling, adding selected and hover states
Browse files Browse the repository at this point in the history
  • Loading branch information
jesselucas committed Apr 15, 2020
1 parent 8b4a1f5 commit 9dd319f
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 101 deletions.
2 changes: 1 addition & 1 deletion src/app/charts/chart-item/chart-item.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
color: #303030;
}
.selected a {
color: #000000;
color: #303030;
text-decoration: none;
}

Expand Down
8 changes: 4 additions & 4 deletions src/app/lists/device-list/device-list.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
44 changes: 0 additions & 44 deletions src/app/lists/device-list/device-list.component.scss

This file was deleted.

2 changes: 1 addition & 1 deletion src/app/lists/device-list/device-list.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' })),
Expand Down
10 changes: 5 additions & 5 deletions src/app/lists/folder-list/folder-list.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
44 changes: 0 additions & 44 deletions src/app/lists/folder-list/folder-list.component.scss

This file was deleted.

2 changes: 1 addition & 1 deletion src/app/lists/folder-list/folder-list.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' })),
Expand Down
67 changes: 67 additions & 0 deletions src/app/lists/status-list/status-list.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 1 addition & 1 deletion src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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%;
Expand Down

0 comments on commit 9dd319f

Please sign in to comment.