From 311c2005dfa96638cf3f09ec137e8a7c137c06f3 Mon Sep 17 00:00:00 2001
From: Chris Hines <chris.hines@monash.edu>
Date: Wed, 17 Jun 2020 12:21:09 +1000
Subject: [PATCH] warning and error colour changes
---
src/app/accountinfo/accountinfo.component.html | 6 +++---
src/app/accountinfo/accountinfo.component.ts | 16 ++++++++--------
src/health-warn.scss | 9 +++++++++
src/styles.scss | 5 +++--
4 files changed, 23 insertions(+), 13 deletions(-)
diff --git a/src/app/accountinfo/accountinfo.component.html b/src/app/accountinfo/accountinfo.component.html
index 1b02183..e59a260 100644
--- a/src/app/accountinfo/accountinfo.component.html
+++ b/src/app/accountinfo/accountinfo.component.html
@@ -3,7 +3,7 @@
<!--<div *ngIf="identity$.value.systemalerts.value !== null">-->
<div *ngFor="let h of (identity$.value.systemalerts | async)">
<div *ngIf="h.stat === 'error'">
- <div class='health-warn' style="padding: 20px">
+ <div class='health-error' style="padding: 20px">
{{ h.msg }}
</div>
</div>
@@ -15,7 +15,7 @@
<div *ngFor="let h of identity$.value.accountalerts.value">
<div *ngIf="h.type === undefined || h.type != 'quota'">
<mat-list-item *ngIf="h.msg !== undefined">
- <div [ngClass]="h.stat == 'error' || h.stat == 'warn' ? 'health-warn': 'health-ok'">
+ <div [ngClass]="cssClass(h)">
{{ h.msg }}
</div>
</mat-list-item>
@@ -34,7 +34,7 @@
</div>
</ng-container>
<tr mat-header-row *matHeaderRowDef="calculateCols(h.data.cols); sticky: true" ></tr>
- <tr mat-row *matRowDef="let row; columns: calculateCols(h.data.cols)" [ngClass]="rowClass(row)" ></tr>
+ <tr mat-row *matRowDef="let row; columns: calculateCols(h.data.cols)" [ngClass]="cssClass(row)" ></tr>
</table>
</div>
</div>
diff --git a/src/app/accountinfo/accountinfo.component.ts b/src/app/accountinfo/accountinfo.component.ts
index c261025..f0c9316 100644
--- a/src/app/accountinfo/accountinfo.component.ts
+++ b/src/app/accountinfo/accountinfo.component.ts
@@ -33,6 +33,14 @@ export class AccountinfoComponent implements OnInit {
this.identity$.subscribe((i) => this.updateSubs(i));
}
+ cssClass(h) {
+ if (h.stat == 'error')
+ return 'health-error';
+ if (h.stat == 'warn')
+ return 'health-warn';
+ return 'health-ok';
+ }
+
updateSubs(i: Identity) {
var s: Subscription;
for (s of this.subscriptions) {
@@ -65,14 +73,6 @@ export class AccountinfoComponent implements OnInit {
return '0 MB';
}
- rowClass(row) {
- if (row.stat == 'error' || row.stat == 'warn') {
- return 'health-warn';
- } else {
- return 'health-ok';
- }
- }
-
navLogin(o) {
if (o == null) {
return
diff --git a/src/health-warn.scss b/src/health-warn.scss
index e8711f4..d60d8da 100644
--- a/src/health-warn.scss
+++ b/src/health-warn.scss
@@ -3,15 +3,24 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
+ $error: mat-color(mat-palette($mat-red));
.health-warn {
color: mat-color($warn);
text-color: mat-color($warn);
}
+ .health-error {
+ color: $error;
+ text-color: $error;
+ }
.health-warn .mat-cell {
color: mat-color($warn);
text-align: right;
}
+ .health-error .mat-cell {
+ color: $error;
+ text-align: right;
+ }
.health-ok .mat-cell {
color: mat-color($foreground);
text-align: right;
diff --git a/src/styles.scss b/src/styles.scss
index e1163df..0471da0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -74,7 +74,8 @@ $custom-typography: mat-typography-config(
.strudel-light-theme {
$strudel-app-primary: mat-palette($md-monashpalette);
$strudel-app-accent: mat-palette($mat-pink, A200, A100, A400);
- $strudel-app-theme: mat-light-theme($strudel-app-primary, $strudel-app-accent);
+ $strudel-app-warn: mat-palette($mat-amber);
+ $strudel-app-theme: mat-light-theme($strudel-app-primary, $strudel-app-accent, $strudel-app-warn);
// @include mat-base-typography($custom-typography);
@include angular-material-typography($custom-typography);
// @include mat-core($custom-typography);
@@ -166,7 +167,7 @@ $custom-typography: mat-typography-config(
//$dark-primary: mat-palette($mat-blue-grey);
$dark-primary: mat-palette($md-monashpalette,800);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
- $dark-warn: mat-palette($mat-deep-orange);
+ $dark-warn: mat-palette($mat-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
// @include mat-base-typography($custom-typography);
@include angular-material-typography($custom-typography);
--
GitLab