From 9eaa4ae83658c157fb11481845b87108fe5cd52d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Thu, 29 Nov 2018 20:12:56 +0100
Subject: [PATCH] Now change color of table items to percent
---
.../list-statistic.component.html | 8 +++-
.../list-statistic.component.scss | 37 ++++++++++++++++++-
2 files changed, 42 insertions(+), 3 deletions(-)
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.html b/src/app/components/shared/list-statistic/list-statistic.component.html
index 7837e72ad..534fac943 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.html
+++ b/src/app/components/shared/list-statistic/list-statistic.component.html
@@ -10,12 +10,16 @@
<ng-container matColumnDef="content">
<mat-header-cell *matHeaderCellDef> Content </mat-header-cell>
- <mat-cell *matCellDef="let cp"> {{cp.content.subject}}</mat-cell>
+ <mat-cell *matCellDef="let cp" [ngClass]="{'positiveC' : cp.percent > 85,
+ 'okayC' : cp.percent > 49 && cp.percent < 85, 'negativeC' : cp.percent < 50,
+ 'emptyCC' : cp.percent < 0 }">{{cp.content.subject}}</mat-cell>
</ng-container>
<ng-container matColumnDef="percentage">
<mat-header-cell *matHeaderCellDef> Percentage </mat-header-cell>
- <mat-cell *matCellDef="let cp">{{cp.percent.toFixed() * ' %'}}</mat-cell>
+ <mat-cell *matCellDef="let cp" [ngClass]="{'positiveC' : cp.percent > 85,
+ 'okayC' : cp.percent > 49 && cp.percent < 85, 'negativeC' : cp.percent < 50,
+ 'emptyC' : cp.percent < 0 }">{{cp.percent.toFixed() + ' %'}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index d26d6d893..47b600719 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -13,9 +13,44 @@ mat-header-cell {
}
mat-cell {
- background-color: #ffe082;
+ background-color: #E0E0E0;
}
mat-toolbar {
height: 15px;
+ color: white;
}
+
+.positiveC {
+ background-color: #AED581;
+}
+
+.negativeC {
+ background-color: #FF8A65;
+}
+
+.okayC {
+ background-color: #FFD54F;
+}
+
+.positiveP {
+ background-color: #AED581 !important;
+}
+
+.negativeP {
+ background-color: #FF8A65 !important;
+}
+
+.okayP {
+ background-color: #FFB74D !important;
+}
+
+.emptyC {
+ color: #E0E0E0;
+ background: #E0E0E0;
+}
+
+.emptyCC {
+ background: #E0E0E0;
+}
+
--
GitLab