From cce8b6051513a117591d4aab7cedfacdc3723323 Mon Sep 17 00:00:00 2001 From: Jesse Lucas Date: Tue, 31 Mar 2020 20:36:56 -0400 Subject: [PATCH] adjust filter style and add filter to device list --- .../device-list/device-list.component.html | 6 +- .../device-list/device-list.component.scss | 5 ++ .../device-list/device-list.component.ts | 5 ++ .../folder-list/folder-list.component.html | 4 +- .../folder-list/folder-list.component.scss | 5 ++ .../folder-list/folder-list.component.ts | 10 +-- .../status-list/status-list.component.ts | 1 - src/app/style.ts | 2 +- src/styles.scss | 89 +++++++++++++------ 9 files changed, 88 insertions(+), 39 deletions(-) diff --git a/src/app/lists/device-list/device-list.component.html b/src/app/lists/device-list/device-list.component.html index 2b2fdd055..f831c6d45 100644 --- a/src/app/lists/device-list/device-list.component.html +++ b/src/app/lists/device-list/device-list.component.html @@ -1,3 +1,7 @@ + + Filter + + @@ -21,6 +25,6 @@
- \ No newline at end of file diff --git a/src/app/lists/device-list/device-list.component.scss b/src/app/lists/device-list/device-list.component.scss index 5050fb6e0..db68f4f6b 100644 --- a/src/app/lists/device-list/device-list.component.scss +++ b/src/app/lists/device-list/device-list.component.scss @@ -1,3 +1,8 @@ .full-width-table { width: 100%; } + +.mat-form-field { + font-size: 14px; + width: 100%; +} \ No newline at end of file diff --git a/src/app/lists/device-list/device-list.component.ts b/src/app/lists/device-list/device-list.component.ts index 6f601f305..e23f74a9f 100644 --- a/src/app/lists/device-list/device-list.component.ts +++ b/src/app/lists/device-list/device-list.component.ts @@ -22,6 +22,11 @@ export class DeviceListComponent implements AfterViewInit, OnInit { constructor(private systemConfigService: SystemConfigService) { }; + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + ngOnInit() { this.dataSource = new MatTableDataSource(); this.dataSource.data = []; diff --git a/src/app/lists/folder-list/folder-list.component.html b/src/app/lists/folder-list/folder-list.component.html index 292726959..aeee70087 100644 --- a/src/app/lists/folder-list/folder-list.component.html +++ b/src/app/lists/folder-list/folder-list.component.html @@ -1,6 +1,6 @@ Filter - + @@ -31,6 +31,6 @@
- \ No newline at end of file diff --git a/src/app/lists/folder-list/folder-list.component.scss b/src/app/lists/folder-list/folder-list.component.scss index fe285c560..1b527298e 100644 --- a/src/app/lists/folder-list/folder-list.component.scss +++ b/src/app/lists/folder-list/folder-list.component.scss @@ -1,3 +1,8 @@ .full-width-table { width: 100%; +} + +.mat-form-field { + font-size: 14px; + width: 100%; } \ No newline at end of file diff --git a/src/app/lists/folder-list/folder-list.component.ts b/src/app/lists/folder-list/folder-list.component.ts index 07936f81d..faca8face 100644 --- a/src/app/lists/folder-list/folder-list.component.ts +++ b/src/app/lists/folder-list/folder-list.component.ts @@ -17,16 +17,16 @@ export class FolderListComponent implements AfterViewInit, OnInit { @ViewChild(MatTable) table: MatTable; dataSource: MatTableDataSource; - applyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.dataSource.filter = filterValue.trim().toLowerCase(); - } - /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['id', 'label', 'path', 'state']; constructor(private systemConfigService: SystemConfigService) { }; + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + ngOnInit() { this.dataSource = new MatTableDataSource(); this.dataSource.data = []; diff --git a/src/app/lists/status-list/status-list.component.ts b/src/app/lists/status-list/status-list.component.ts index 910ca4798..eb849e88e 100644 --- a/src/app/lists/status-list/status-list.component.ts +++ b/src/app/lists/status-list/status-list.component.ts @@ -13,7 +13,6 @@ export class StatusListComponent implements OnInit { listType = Type; // used in html elevation: string = cardElevation; title: string = 'Status'; - folderList: Type = Type.Folder; constructor() { } diff --git a/src/app/style.ts b/src/app/style.ts index 37f3aa670..7caaba665 100644 --- a/src/app/style.ts +++ b/src/app/style.ts @@ -8,4 +8,4 @@ export const colors: Map = new Map([ ["green", "#56C568"], ["grey", "#DDDDDD"], ["red", "#EB5757"] -]); \ No newline at end of file +]); \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 53fde9226..7cddd28e1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,32 +1,6 @@ -// Chart.js styles -#chartjs-tooltip { - /* max z-index value */ - z-index: 2147483647; - opacity: 0; - position: absolute; - background: rgba(0, 0, 0, .7); - color: white; - border-radius: 3px; - -webkit-transition: opacity .3s ease; - transition: opacity .3s ease; - pointer-events: none; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); -} - -.chartjs-tooltip-key { - display: inline-block; - width: 10px; - height: 10px; - margin-right: 10px; -} - - // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @import '~@angular/material/theming'; -// Plus imports for other components in your app. - // Custom typography $tech-ui-typography: mat-typography-config( @@ -55,8 +29,42 @@ $tech-ui-typography: mat-typography-config( // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$tech-ui-primary: mat-palette($mat-blue); -$tech-ui-accent: mat-palette($mat-blue, A200, A100, A400); +$tech-ui-red: #EB5757; +$tech-ui-blue: ( + 50: #0891D1, + 100: #0891D1, + 200: #0891D1, + 300: #0891D1, + 400: #0891D1, + 500: #0891D1, + 600: #0891D1, + 700: #0891D1, + 800: #0891D1, + 900: #0891D1, + A100: #0891D1, + A200: #0891D1, + A400: #0891D1, + A700: #0891D1, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $light-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ) +); + +$tech-ui-primary: mat-palette($tech-ui-blue); +$tech-ui-accent: mat-palette($tech-ui-blue, A200, A100, A400); // The warn palette is optional (defaults to red). $tech-ui-warn: mat-palette($mat-red); @@ -87,7 +95,7 @@ html, body { .tui-card-title { padding: 16px 16px 0 16px; font-size: mat-font-size($tech-ui-typography, subheading-2); - color: #0891D1; + color: mat-color($tech-ui-primary); } .tui-card-content { @@ -97,3 +105,26 @@ html, body { .tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { line-height: 34px; } + +// Chart.js styles +#chartjs-tooltip { + /* max z-index value */ + z-index: 2147483647; + opacity: 0; + position: absolute; + background: rgba(0, 0, 0, .7); + color: white; + border-radius: 3px; + -webkit-transition: opacity .3s ease; + transition: opacity .3s ease; + pointer-events: none; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} + +.chartjs-tooltip-key { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; +} \ No newline at end of file