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

update status list template and add flex box

This commit is contained in:
Jesse Lucas 2020-03-19 15:17:38 -04:00
parent 063951cffa
commit e0d9542bfe
5 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/list/device-list/device-list.component.ts
View File

@ -6,7 +6,7 @@ import { MatTable } from '@angular/material/table';
import { DeviceListDataSource } from './device-list-datasource';
import { Device } from '../../device';
import { SystemConfigService } from '../../system-config.service';
import { cardElevation } from '../../style';
import { dataTableElevation } from '../../style';
import { Subject } from 'rxjs';
@ -20,7 +20,7 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Device>;
dataSource: DeviceListDataSource;
elevation: string = cardElevation;
elevation: string = dataTableElevation;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'name'];

4
src/app/list/folder-list/folder-list.component.ts
View File

@ -6,7 +6,7 @@ import { MatTable } from '@angular/material/table';
import { FolderListDataSource } from './folder-list-datasource';
import { Folder } from '../../folder';
import { SystemConfigService } from '../../system-config.service';
import { cardElevation } from '../../style';
import { dataTableElevation } from '../../style';
import { Subject } from 'rxjs';
@Component({
@ -19,7 +19,7 @@ export class FolderListComponent implements AfterViewInit, OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Folder>;
dataSource: FolderListDataSource;
elevation: string = cardElevation;
elevation: string = dataTableElevation;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'label'];

13
src/app/list/status-list/status-list.component.html
View File

@ -1,3 +1,10 @@
<app-status-toggle (statusEvent)="onToggle($event)"></app-status-toggle>
<app-folder-list *ngIf="currentStatus===status.Folders"></app-folder-list>
<app-device-list *ngIf="currentStatus===status.Devices"></app-device-list>
<mat-card class="{{elevation}}">
<div fxLayout="row" fxLayoutAlign="space-between start">
<mat-card-title>Status</mat-card-title>
<app-status-toggle (statusEvent)="onToggle($event)"></app-status-toggle>
</div>
<mat-card-content>
<app-folder-list *ngIf="currentStatus===status.Folders"></app-folder-list>
<app-device-list *ngIf="currentStatus===status.Devices"></app-device-list>
</mat-card-content>
</mat-card>

6
src/app/list/status-list/status-list.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Status } from '../../status';
import { cardElevation } from '../../style';
@Component({
@ -8,8 +9,9 @@ import { Status } from '../../status';
styleUrls: ['./status-list.component.scss']
})
export class StatusListComponent implements OnInit {
public currentStatus: Status = Status.Folders;
public status = Status;
currentStatus: Status = Status.Folders;
status = Status; // used in html
elevation: string = cardElevation;
constructor() { }

3
src/app/style.ts
View File

@ -1,2 +1,3 @@
// material design elevation for all dashboard components
export const cardElevation: string = "mat-elevation-z2";
export const cardElevation: string = "mat-elevation-z2";
export const dataTableElevation: string = "mat-elevation-z0";