From 5e4d6ce1750dd272cb9aeb5c290386074bf9f0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Fri, 7 Jun 2019 16:26:09 +0200
Subject: [PATCH] Give current filter a color for icon
---
.../comment-list/comment-list.component.html | 8 ++++----
.../comment-list/comment-list.component.scss | 16 ++++++++++++++++
2 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index f26675e9c..603f262c5 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -45,19 +45,19 @@
<mat-menu #filterMenu="matMenu" xPosition="before">
<div>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(correct)">
- <mat-icon>check_circle</mat-icon>
+ <mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(favorite)">
- <mat-icon>favorite</mat-icon>
+ <mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">favorite</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(read)">
- <mat-icon>visibility</mat-icon>
+ <mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">visibility</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=true" (click)="filter(unread)">
- <mat-icon>visibility_off</mat-icon>
+ <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
</button>
<button mat-icon-button (focus)="hideCommentsList=false" (click)="sort(currentSort)">
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 9198f0f3f..9e71f823a 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -63,3 +63,19 @@ h4 {
.button-bar {
margin-right: 2%;
}
+
+.correct-icon {
+ color: var(--green);
+}
+
+.read-icon {
+ color: var(--blue);
+}
+
+.favorite-icon {
+ color: var(--red);
+}
+
+.unread-icon {
+ color: var(--yellow);
+}
--
GitLab