From 6e1828ff639f3b485a9d770116eadf2efe3dcf8b Mon Sep 17 00:00:00 2001 From: Jesse Lucas Date: Wed, 8 Apr 2020 16:27:54 -0400 Subject: [PATCH] support dark mode and add custom card component --- src/app/app.module.ts | 6 ++ src/app/card/card.component.scss | 36 ++++++++++ src/app/card/card.component.spec.ts | 25 +++++++ src/app/card/card.component.ts | 35 ++++++++++ .../chart-item/chart-item.component.scss | 36 +++++++--- src/app/charts/chart/chart.component.html | 10 +-- src/app/charts/chart/chart.component.ts | 2 - src/app/dialog/dialog.component.html | 8 +-- src/app/dialog/dialog.component.ts | 11 ++- .../status-list/status-list.component.html | 10 +-- src/styles.scss | 69 ++++++++++--------- 11 files changed, 185 insertions(+), 63 deletions(-) create mode 100644 src/app/card/card.component.scss create mode 100644 src/app/card/card.component.spec.ts create mode 100644 src/app/card/card.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dae6e769b..ad31f8505 100644 --- a/src/app/app.module.ts +++ b/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({ diff --git a/src/app/card/card.component.scss b/src/app/card/card.component.scss new file mode 100644 index 000000000..b682b30a0 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/src/app/card/card.component.spec.ts b/src/app/card/card.component.spec.ts new file mode 100644 index 000000000..e141708ac --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/card/card.component.ts b/src/app/card/card.component.ts new file mode 100644 index 000000000..10a01b109 --- /dev/null +++ b/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: '
', + styleUrls: ['./card.component.scss'] +}) +export class CardComponent implements OnInit { + elevation: string = cardElevation; + + constructor() { } + + ngOnInit(): void { + } + +} + +@Component({ + selector: 'app-card-title', + template: '
', + styleUrls: ['./card.component.scss'] +}) +export class CardTitleComponent { + constructor() { } +} + +@Component({ + selector: 'app-card-content', + template: '
', + styleUrls: ['./card.component.scss'] +}) +export class CardContentComponent { + constructor() { } +} diff --git a/src/app/charts/chart-item/chart-item.component.scss b/src/app/charts/chart-item/chart-item.component.scss index 2aef89c04..4444b2f38 100644 --- a/src/app/charts/chart-item/chart-item.component.scss +++ b/src/app/charts/chart-item/chart-item.component.scss @@ -1,13 +1,27 @@ -.item { - cursor: pointer; - padding: 3px 7px 3px 7px; - border-radius: 4px; -} +@mixin chart-item-theme($theme) { + .item { + cursor: pointer; + padding: 3px 7px 3px 7px; + border-radius: 4px; + } -.selected { - background-color: #DDDDDD; -} -.selected a { - color: #000000; - text-decoration: none; + .selected { + background-color: #DDDDDD; + color: #303030; + } + .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; + } + } } \ No newline at end of file diff --git a/src/app/charts/chart/chart.component.html b/src/app/charts/chart/chart.component.html index 021a2fec9..eefd0d62b 100644 --- a/src/app/charts/chart/chart.component.html +++ b/src/app/charts/chart/chart.component.html @@ -1,6 +1,6 @@ -
-
{{title | uppercase}}
-
+ + {{title | uppercase}} +
@@ -10,5 +10,5 @@
-
- \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/charts/chart/chart.component.ts b/src/app/charts/chart/chart.component.ts index 403a7b8d6..3e0c72e5d 100644 --- a/src/app/charts/chart/chart.component.ts +++ b/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; diff --git a/src/app/dialog/dialog.component.html b/src/app/dialog/dialog.component.html index a7ba9830d..8f0406052 100644 --- a/src/app/dialog/dialog.component.html +++ b/src/app/dialog/dialog.component.html @@ -1,6 +1,6 @@ -

Error

-
    -
  • {{message}}
    • -
+ + {{message}} + +
\ No newline at end of file diff --git a/src/app/dialog/dialog.component.ts b/src/app/dialog/dialog.component.ts index de6be2fcd..40a554339 100644 --- a/src/app/dialog/dialog.component.ts +++ b/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, + public messageService: MessageService + ) { } ngOnInit(): void { } + + onNoClick(): void { + this.dialogRef.close(); + } } diff --git a/src/app/lists/status-list/status-list.component.html b/src/app/lists/status-list/status-list.component.html index 986deb682..e98effdd1 100644 --- a/src/app/lists/status-list/status-list.component.html +++ b/src/app/lists/status-list/status-list.component.html @@ -1,10 +1,10 @@ -
+
-
{{title | uppercase}}
+ {{title | uppercase}}
-
+ -
-
\ No newline at end of file + + \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index c7ce7e954..9e5344ac9 100644 --- a/src/styles.scss +++ b/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,45 +73,43 @@ $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 { - 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); -} + + 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 { - text-decoration: underline; - color: #000000; -} + a { + text-decoration: underline; + 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); + + html, body { + background-color: #303030; + color: white; + } -.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($tech-ui-primary); -} - -.tui-card-content { - padding: 16px; -} - -.tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { - line-height: 34px; -} + a { + color: white; + } +} // Chart.js styles #chartjs-tooltip {