octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-20 03:51:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

update status list template and add flex box

Browse Source
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 { DeviceListDataSource } from './device-list-datasource';
import { Device } from '../../device'; import { Device } from '../../device';
import { SystemConfigService } from '../../system-config.service'; import { SystemConfigService } from '../../system-config.service';
import { cardElevation } from '../../style'; import { dataTableElevation } from '../../style';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@ -20,7 +20,7 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Device>; @ViewChild(MatTable) table: MatTable<Device>;
dataSource: DeviceListDataSource; dataSource: DeviceListDataSource;
elevation: string = cardElevation; elevation: string = dataTableElevation;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'name']; 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 { FolderListDataSource } from './folder-list-datasource';
import { Folder } from '../../folder'; import { Folder } from '../../folder';
import { SystemConfigService } from '../../system-config.service'; import { SystemConfigService } from '../../system-config.service';
import { cardElevation } from '../../style'; import { dataTableElevation } from '../../style';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@Component({ @Component({
@ -19,7 +19,7 @@ export class FolderListComponent implements AfterViewInit, OnInit {
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Folder>; @ViewChild(MatTable) table: MatTable<Folder>;
dataSource: FolderListDataSource; dataSource: FolderListDataSource;
elevation: string = cardElevation; elevation: string = dataTableElevation;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'label']; 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> <mat-card class="{{elevation}}">
<app-folder-list *ngIf="currentStatus===status.Folders"></app-folder-list> <div fxLayout="row" fxLayoutAlign="space-between start">
<app-device-list *ngIf="currentStatus===status.Devices"></app-device-list> <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 { Component, OnInit } from '@angular/core';
import { Status } from '../../status'; import { Status } from '../../status';
import { cardElevation } from '../../style';
@Component({ @Component({
@ -8,8 +9,9 @@ import { Status } from '../../status';
styleUrls: ['./status-list.component.scss'] styleUrls: ['./status-list.component.scss']
}) })
export class StatusListComponent implements OnInit { export class StatusListComponent implements OnInit {
public currentStatus: Status = Status.Folders; currentStatus: Status = Status.Folders;
public status = Status; status = Status; // used in html
elevation: string = cardElevation;
constructor() { } constructor() { }

1
src/app/style.ts
View File

@ -1,2 +1,3 @@
// material design elevation for all dashboard components // 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";