Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
Jesse Lucas 2020-04-14 20:44:24 -04:00
parent 8b4a1f52d0
commit 9dd319f4da
9 changed files with 80 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/charts/chart-item/chart-item.component.scss
View File

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

8
src/app/lists/device-list/device-list.component.html
View File

@ -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>

44
src/app/lists/device-list/device-list.component.scss
View File

@ -1,44 +0,0 @@
.full-width-table {
width: 100%;
}
.mat-form-field {
font-size: 14px;
width: 100%;
}
tr.detail-row {
height: 0;
}
tr.device-row:not(.expanded-row):hover {
background: whitesmoke;
}
/*
tr.device-row:not(.device-row):active {
background: #efefef;
}
*/
.device-row td {
border-bottom-width: 0;
}
.device-detail {
overflow: hidden;
display: flex;
}
.device-folders {
padding-bottom: 16px;
}
// Hide empty name
.folder-name:empty {
display: none;
}
.folder-name:not(:last-child):after {
content: ", ";
}

2
src/app/lists/device-list/device-list.component.ts
View File

@ -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' })),

10
src/app/lists/folder-list/folder-list.component.html
View File

@ -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>

44
src/app/lists/folder-list/folder-list.component.scss
View File

@ -1,44 +0,0 @@
.full-width-table {
width: 100%;
}
.mat-form-field {
font-size: 14px;
width: 100%;
}
tr.detail-row {
height: 0;
}
tr.folder-row:not(.expanded-row):hover {
background: whitesmoke;
}
/*
tr.folder-row:not(.folder-row):active {
background: #efefef;
}
*/
.folder-row td {
border-bottom-width: 0;
}
.folder-detail {
overflow: hidden;
display: flex;
}
.folder-devices {
padding-bottom: 16px;
}
// Hide empty name
.device-name:empty {
display: none;
}
.device-name:not(:last-child):after {
content: ", ";
}

2
src/app/lists/folder-list/folder-list.component.ts
View File

@ -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' })),

67
src/app/lists/status-list/status-list.component.scss
View File

@ -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
src/styles.scss
View File

@ -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%;