From 2930df1a26d5be720fa45c97b81cd7c89eaf6ea1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@gmx.de>
Date: Sat, 27 Mar 2021 14:44:43 +0100
Subject: [PATCH] Improve ux for active comment filters
Indicate with the color red if a filter is active. Also show a message if there are no comments with the active filters.
---
.../moderator-comment-list.component.html | 11 ++++++++++-
.../moderator-comment-list.component.scss | 3 +++
.../moderator-comment-list.component.ts | 1 +
.../shared/comment-list/comment-list.component.html | 13 +++++++++++--
.../shared/comment-list/comment-list.component.scss | 4 ++++
.../shared/comment-list/comment-list.component.ts | 1 +
src/assets/i18n/creator/de.json | 2 ++
src/assets/i18n/creator/en.json | 2 ++
src/assets/i18n/participant/de.json | 2 ++
src/assets/i18n/participant/en.json | 2 ++
10 files changed, 38 insertions(+), 3 deletions(-)
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
index 23235a429..1fdfd0788 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
@@ -56,6 +56,7 @@
aria-labelledby="time_settings"
*ngIf="!searchBox.value && comments && comments.length > 0 && !search"
[matMenuTriggerFor]="timeMenu"
+ [ngClass]="{'active-filter': period !== 'time-all'}"
matTooltip="{{ 'comment-list.select-time' | translate }}">
<mat-icon class="searchBarIcon">history</mat-icon>
</button>
@@ -126,7 +127,7 @@
</app-comment>
</div>
-<div *ngIf="comments && commentsFilteredByTime.length < 1 && !isLoading"
+<div *ngIf="comments && commentsFilteredByTime.length < 1 && period === 'time-all' && !isLoading"
fxLayout="row"
fxLayoutAlign="center center"
class="no-comments">
@@ -134,6 +135,14 @@
<p class="oldtypo-p">{{ 'comment-page.no-comments' | translate }}</p>
</div>
+<div *ngIf="(filteredComments && filteredComments.length === 0 && hideCommentsList)
+ || (comments && commentsFilteredByTime.length === 0 && period !== 'time-all') && !isLoading"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ class="no-comments">
+ <p class="oldtypo-p">{{ (search ? 'comment-page.no-comments-with-search' : 'comment-page.no-comments-with-filter') | translate }}</p>
+</div>
+
<div class="visually-hidden">
<div id="search-box-input-description">
{{ 'comment-page.search-box-input-description' | translate }}
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
index ed8ea0f7b..4bcbccdf6 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
@@ -129,3 +129,6 @@ h3 {
font-weight: bold;
}
+.active-filter .mat-icon {
+ color: var(--red);
+}
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
index a8a8e4b7b..704bbf6a2 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
@@ -109,6 +109,7 @@ export class ModeratorCommentListComponent implements OnInit {
}
searchComments(): void {
+ this.search = true;
if (this.searchInput && this.searchInput.length > 2) {
this.hideCommentsList = true;
this.filteredComments = this.commentsFilteredByTime.filter(c => c.body.toLowerCase().includes(this.searchInput.toLowerCase()));
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 acaaa1df2..3d5772104 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -65,7 +65,7 @@
class="searchBarButton"
aria-labelledby="filter_list"
*ngIf="!searchBox.value && comments && comments.length > 0 && !search"
- [matMenuTriggerFor]="filterMenu"
+ [matMenuTriggerFor]="filterMenu" [ngClass]="{'active-filter': hideCommentsList}"
matTooltip="{{ 'comment-list.filter-comments' | translate }}">
<mat-icon class="searchBarIcon">filter_list</mat-icon>
</button>
@@ -76,6 +76,7 @@
aria-labelledby="time_settings"
*ngIf="!searchBox.value && comments && comments.length > 0 && !search"
[matMenuTriggerFor]="timeMenu"
+ [ngClass]="{'active-filter': period !== 'time-all'}"
matTooltip="{{ 'comment-list.select-time' | translate }}">
<mat-icon class="searchBarIcon">history</mat-icon>
</button>
@@ -226,13 +227,21 @@
</div>
<!-- No Questions Present -->
-<div *ngIf="comments && commentsFilteredByTime.length < 1 && !isLoading"
+<div *ngIf="comments && commentsFilteredByTime.length < 1 && period === 'time-all' && !isLoading"
fxLayout="row"
fxLayoutAlign="center center"
class="no-comments">
<p class="oldtypo-p">{{ 'comment-page.no-comments' | translate }}</p>
</div>
+<div *ngIf="(filteredComments && filteredComments.length === 0 && hideCommentsList)
+ || (comments && commentsFilteredByTime.length === 0 && period !== 'time-all') && !isLoading"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ class="no-comments">
+ <p class="oldtypo-p">{{ (search ? 'comment-page.no-comments-with-search' : 'comment-page.no-comments-with-filter') | translate }}</p>
+</div>
+
<!--Hidden Div's for a11y-Descriptions-->
<div class="visually-hidden">
<div id="search-box-input-description">
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 744339a81..387df1437 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -210,3 +210,7 @@ h3 {
.selected {
font-weight: bold;
}
+
+.active-filter .mat-icon {
+ color: var(--red);
+}
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 830f149cc..e2a62142a 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -173,6 +173,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
}
searchComments(): void {
+ this.search = true;
if (this.searchInput) {
if (this.searchInput.length > 1) {
this.hideCommentsList = true;
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 0e25e30e2..6c2c9a052 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -126,6 +126,8 @@
"mark-wrong": "Frage verneinen",
"new-comment": "Eine neue Frage mit dem Inhalt, {{ comment }}, wurde soeben gestellt.",
"no-comments": "Keine Fragen zurzeit",
+ "no-comments-with-filter": "Keine Fragen mit den ausgewählten Filtereinstellungen",
+ "no-comments-with-search": "Keine Fragen mit deiner Suche",
"reject": "Frage auf den Index setzen",
"search-box-input-description": "Hier kannst du nach Fragen suchen.",
"semicolon": "CSV-Format (.csv)",
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 20ddb71db..5a70e57d8 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -127,6 +127,8 @@
"mark-wrong": "Mark as wrong",
"new-comment": "A new question with the content, {{ comment }}, has been asked.",
"no-comments": "No questions at present",
+ "no-comments-with-filter": "No questions with selected filter settings",
+ "no-comments-with-search": "No questions with your search",
"reject": "Put the question on the index",
"search-box-input-description": "Search for questions",
"semicolon": "CSV format (.csv)",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 6e42c1227..385e2bf47 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -104,6 +104,8 @@
"mark-read": "Die Frage wurde öffentlich besprochen.",
"new-comment": "Eine neue Frage mit dem Inhalt, {{ comment }}, wurde soeben gestellt.",
"no-comments": "Keine Fragen zurzeit",
+ "no-comments-with-filter": "Keine Fragen mit den ausgewählten Filtereinstellungen",
+ "no-comments-with-search": "Keine Fragen mit deiner Suche",
"search-box-input-description": "Hier kannst du nach Fragen suchen.",
"send": "Senden",
"send-description": "Frage abschicken",
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 1ca9ef9a0..0c55e64bb 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -114,6 +114,8 @@
"mark-read": "Already discussed by the presenter",
"new-comment": "A new question with the content, {{ comment }}, has been asked.",
"no-comments": "No questions at present",
+ "no-comments-with-filter": "No questions with selected filter settings",
+ "no-comments-with-search": "No questions with your search",
"search-box-input-description": "Here you can search for questions.",
"send": "Send",
"send-description": "Send question",
--
GitLab