support dark mode and add custom card component

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list'
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { httpInterceptorProviders } from './http-interceptors';
@@ -32,6 +33,7 @@ import { ChartItemComponent } from './charts/chart-item/chart-item.component';
 import { ChartComponent } from './charts/chart/chart.component';
 import { FolderListComponent } from './lists/folder-list/folder-list.component';
 import { DialogComponent } from './dialog/dialog.component';
+import { CardComponent, CardTitleComponent, CardContentComponent } from './card/card.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +47,9 @@ import { DialogComponent } from './dialog/dialog.component';
     ChartItemComponent,
     FolderListComponent,
     DialogComponent,
+    CardComponent,
+    CardTitleComponent,
+    CardContentComponent,
   ],
   imports: [
     BrowserModule,
@@ -58,6 +63,7 @@ import { DialogComponent } from './dialog/dialog.component';
     MatCardModule,
     MatProgressBarModule,
     MatDialogModule,
+    MatListModule,
     FlexLayoutModule,
     HttpClientModule,
     HttpClientXsrfModule.withOptions({

src/app/card/card.component.scss

@@ -0,0 +1,36 @@
+// Import theming functions
+@import '~@angular/material/theming';
+
+@mixin tui-card-theme($theme) {
+    // Extract the palettes you need from the theme definition.
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .tui-card {
+        background-color: white;
+        border-radius: 4px;
+        height: 100%;
+    }
+
+    .tui-card-title {
+        padding: 16px 16px 0 16px;
+        font-size: mat-font-size($tech-ui-typography, subheading-2);
+        color: mat-color($primary);
+    }
+
+    .tui-card-content {
+        padding: 16px;
+    }
+
+    .tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content  {
+        line-height: 34px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .tui-card {
+            background-color: map_get($mat-grey, 800);
+        }
+    }
+}

src/app/card/card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/card/card.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { cardElevation } from '../style';
+
+@Component({
+  selector: 'app-card',
+  template: '<div class="{{elevation}} tui-card"><ng-content></ng-content></div>',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent implements OnInit {
+  elevation: string = cardElevation;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
+
+@Component({
+  selector: 'app-card-title',
+  template: '<div class="tui-card-title"><ng-content></ng-content></div>',
+  styleUrls: ['./card.component.scss']
+})
+export class CardTitleComponent {
+  constructor() { }
+}
+
+@Component({
+  selector: 'app-card-content',
+  template: '<div class="tui-card-content"><ng-content></ng-content></div>',
+  styleUrls: ['./card.component.scss']
+})
+export class CardContentComponent {
+  constructor() { }
+}

src/app/charts/chart-item/chart-item.component.scss

@@ -1,13 +1,27 @@
-.item {
+@mixin chart-item-theme($theme) {
+    .item {
         cursor: pointer;
         padding: 3px 7px 3px 7px;
         border-radius: 4px;
-}
+    }
 
-.selected {
+    .selected {
         background-color: #DDDDDD;
-}
+        color: #303030;
-.selected a {
+    }
+    .selected a {
         color: #000000;
         text-decoration: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .selected {
+            background-color: map_get($mat-grey, 900);
+            color: white;
+        }
+
+        .selected a {
+            color: white;
+        }
+    }
 }

src/app/charts/chart/chart.component.html

@@ -1,6 +1,6 @@
-<div class="{{elevation}} tui-card">
+<app-card>
-    <div class="tui-card-title">{{title | uppercase}}</div>
+    <app-card-title>{{title | uppercase}}</app-card-title>
-    <div class="tui-card-content">
+    <app-card-content>
         <div fxLayout="row" fxLayoutAlign="space-between stretch">
             <app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title" (stateEvent)="onItemSelect($event)">
             </app-donut-chart>
@@ -10,5 +10,5 @@
                 </app-chart-item>
             </div>
         </div>
-    </div>
+    </app-card-content>
-</div>
+</app-card>

src/app/charts/chart/chart.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import Folder from '../../folder'
-import { cardElevation } from '../../style'
 import { FolderService } from 'src/app/services/folder.service';
 import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 import { DeviceService } from 'src/app/services/device.service';
@@ -27,7 +26,6 @@ export class ChartComponent implements OnInit {
   title: string;
   chartID: string;
   states: ChartItemState[] = [];
-  elevation: string = cardElevation;
 
   private service: any;
   private activeChartState: ChartItemState;

src/app/dialog/dialog.component.html

@@ -1,6 +1,6 @@
-<h1 mat-dialog-title>Error</h1>
 <div mat-dialog-content>
-    <ul>
+    <mat-list dense>
-        <li *ngFor='let message of messageService.messages'> {{message}} </li>
+        <mat-list-item *ngFor='let message of messageService.messages'>{{message}}</mat-list-item>
-    </ul>
+    </mat-list>
+    <button mat-button [mat-dialog-close] cdkFocusInitial>Close</button>
 </div>

src/app/dialog/dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MessageService } from '../services/message.service';
 
 export interface DialogData {
@@ -13,7 +13,14 @@ export interface DialogData {
 })
 export class DialogComponent implements OnInit {
 
-  constructor(public messageService: MessageService) { }
+  constructor(
+    public dialogRef: MatDialogRef<DialogComponent>,
+    public messageService: MessageService
+  ) { }
 
   ngOnInit(): void { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
 }

src/app/lists/status-list/status-list.component.html

@@ -1,10 +1,10 @@
-<div class="{{elevation}} tui-card">
+<app-card>
     <div fxLayout="row" fxLayoutAlign="space-between start">
-        <div class="tui-card-title">{{title | uppercase}}</div>
+        <app-card-title>{{title | uppercase}}</app-card-title>
         <app-list-toggle (listTypeEvent)="onToggle($event)" class="tui-card-toggle"></app-list-toggle>
     </div>
-    <div class="tui-card-content">
+    <app-card-content>
         <app-folder-list *ngIf="currentListType===listType.Folder"></app-folder-list>
         <app-device-list *ngIf="currentListType===listType.Device"> </app-device-list>
-    </div>
+    </app-card-content>
-</div>
+</app-card>

src/styles.scss

@@ -1,10 +1,13 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import '~@angular/material/theming';
+@import './app/card/card.component.scss';
+@import './app/charts/chart-item/chart-item.component.scss';
+
 
 // Custom typography
 $tech-ui-typography: mat-typography-config(
-    $font-family: '"Courier New", Courier, monospace',
+    $font-family: '"Lucida Console", Monaco, monospace',
     $display-4:     mat-typography-level(112px, 112px, 300),
     $display-3:     mat-typography-level(56px, 56px, 400),
     $display-2:     mat-typography-level(45px, 48px, 400),
@@ -70,44 +73,42 @@ $tech-ui-warn: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $tech-ui-theme: mat-light-theme($tech-ui-primary, $tech-ui-accent, $tech-ui-warn);
+$tech-ui-dark-theme: mat-dark-theme($tech-ui-primary, $tech-ui-accent, $tech-ui-warn);
     
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($tech-ui-theme);
+    @include angular-material-theme($tech-ui-theme);
+    @include tui-card-theme($tech-ui-theme);
+    @include chart-item-theme($tech-ui-theme);
 
-/* You can add global styles to this file, and also import other style files */
+   
-html, body { 
+ html, body { 
         height: 100%; 
         background-color: #eeeeee;
         font-size: mat-font-size($tech-ui-typography, body-1);
         font-family: mat-font-family($tech-ui-typography);
         line-height: mat-line-height($tech-ui-typography, body-1);
-}
+        color: #303030;
+    }
 
-a {
+    a {
         text-decoration: underline;
-    color: #000000;
+        color: #303030;
-}
+    }
+@media (prefers-color-scheme: dark) {
+    @include angular-material-theme($tech-ui-dark-theme);
+    @include tui-card-theme($tech-ui-dark-theme);
+    @include chart-item-theme($tech-ui-dark-theme);
     
-.tui-card {
+    html, body {
-    background-color: white;
+        background-color: #303030;
-    border-radius: 4px;
+        color: white; 
-    height: 100%;
+    }
-}
 
-.tui-card-title {
+    a {
-    padding: 16px 16px 0 16px;
+        color: white; 
-    font-size: mat-font-size($tech-ui-typography, subheading-2);
+    }
-    color: mat-color($tech-ui-primary);
-}
-
-.tui-card-content {
-    padding: 16px;
-}
-
-.tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content  {
-    line-height: 34px;
 } 
 
 // Chart.js styles