From cc67a8d555012b739202f71cd5cdef4543b73c68 Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Wed, 28 Apr 2021 15:15:52 +0200
Subject: [PATCH] Finished merging
---
.../question-wall.component.html | 106 ++++++++++++------
.../question-wall.component.scss | 4 +
.../question-wall/question-wall.component.ts | 45 +++++---
src/assets/i18n/participant/de.json | 4 +-
src/assets/i18n/participant/en.json | 4 +-
5 files changed, 112 insertions(+), 51 deletions(-)
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index 45aba22b7..09fd459a8 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -22,7 +22,7 @@
<mat-icon class="star">grade</mat-icon>
<span>{{'question-wall.filter-favorite' | translate}}</span>
</button>
-
+
<button mat-menu-item (click)="filterBookmark()" aria-labelledby="filter-lbl-bookmark">
<mat-icon>bookmark</mat-icon>
<span>{{'question-wall.filter-bookmark' | translate}}</span>
@@ -42,23 +42,57 @@
</button>
</div>
</mat-menu>
+ <button ars-btn
+ class="pseudo-button"
+ [ngClass]="{'selected': hasFilter || period !== 'time-all'}"
+ matRipple
+ matTooltip="{{'question-wall.overview-question-tooltip' | translate}}">
+ <i>comment</i>
+ <p style="margin-left: 0.25em;">{{commentsCountQuestions}}</p>
+ </button>
+ <button ars-btn
+ class="pseudo-button"
+ [ngClass]="{'selected': hasFilter || period !== 'time-all'}"
+ matRipple
+ matTooltip="{{'question-wall.overview-questioners-tooltip' | translate}}">
+ <i>person</i>
+ <p style="margin-left: 0.25em;">{{commentsCountUsers}}</p>
+ </button>
<button ars-btn [mat-menu-trigger-for]="sortMenu" matRipple aria-labelledby="sort-lbl">
<i>sort</i>
<p>{{'question-wall.sort' | translate}}</p>
</button>
- <button ars-btn [mat-menu-trigger-for]="timeMenu" matRipple aria-labelledby="filter-time">
+ <button ars-btn
+ [mat-menu-trigger-for]="timeMenu"
+ [ngClass]="{'selected': period !== 'time-all'}"
+ matRipple
+ aria-labelledby="filter-time">
<i>access_time</i>
<p>{{'question-wall.time-period' | translate}}</p>
</button>
- <button ars-btn [mat-menu-trigger-for]="filterMenu" matRipple aria-labelledby="filter-lbl">
+ <button ars-btn
+ [mat-menu-trigger-for]="filterMenu"
+ [ngClass]="{'selected': hasFilter &&
+ (filterTitle === 'question-wall.filter-favorite' ||
+ filterTitle === 'question-wall.filter-bookmark')}"
+ matRipple
+ aria-labelledby="filter-lbl">
<i>filter_list</i>
<p>Filter</p>
</button>
- <button ars-btn [mat-menu-trigger-for]="filterTagMenu" matRipple aria-labelledby="filter-tags-lbl">
+ <button ars-btn
+ [mat-menu-trigger-for]="filterTagMenu"
+ [ngClass]="{'selected': hasFilter && filterTitle === '' && filterDesc !== ''}"
+ matRipple
+ aria-labelledby="filter-tags-lbl">
<mat-icon class="icon-svg" svgIcon="comment_tag"></mat-icon>
<p>{{'question-wall.filter-tag' | translate}}</p>
</button>
- <button ars-btn (click)="openUserMap()" matRipple aria-labelledby="user-lbl">
+ <button ars-btn
+ (click)="openUserMap()"
+ [ngClass]="{'selected': hasFilter && filterTitle === 'question-wall.filter-user'}"
+ matRipple
+ aria-labelledby="user-lbl">
<i>person_pin_circle</i>
<p>{{'question-wall.filter-user'| translate}}</p>
</button>
@@ -156,7 +190,7 @@
<ars-row *ngIf="!userSelection">
<ars-fill *ngIf="(hasFilter?commentsFilter:commentsFilteredByTime).length==0"
- style="float:left;">
+ style="float:left;">
<p class="questionwall-present-introduction-desc">
{{'question-wall.no-result' | translate}}
</p>
@@ -243,36 +277,36 @@
</ars-col>
</ars-fill>
- <ars-row [height]="50" class="questionwall-footer">
- <ars-style-btn-material style="width:100%;" ars-flex-box>
- <ars-col ars-btn-wrp [xp]="16" [extra]="true">
- <button ars-btn (click)="toggleFocusIncommingComments()" matRipple aria-labelledby="autofocus-on-lbl">
- <ng-container *ngIf="focusIncommingComments">
- <i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
- <p>{{'question-wall.auto-renew-off' | translate}}</p>
- </ng-container>
- <ng-container *ngIf="!focusIncommingComments">
- <i>{{'question-wall.auto-renew-on-icon' | translate}}</i>
- <p>{{'question-wall.auto-renew-on' | translate}}</p>
- </ng-container>
- </button>
- </ars-col>
- <ars-fill></ars-fill>
- <ars-col style="display:flex;flex-direction:column;justify-content:center">
- <p *ngIf="unreadComments" style="line-height:18px;" class="questionwall-text-color">{{unreadComments}}</p>
- </ars-col>
- <ars-col ars-btn-wrp [xp]="16" [extra]="true">
- <button ars-btn (click)="prevComment()" matRipple aria-labelledby="prev-comment-lbl">
- <i>{{'question-wall.prev-comment-icon' | translate}}</i>
- <p>{{'question-wall.prev-comment' | translate}}</p>
- </button>
- <button ars-btn (click)="nextComment()" matRipple aria-labelledby="next-comment-lbl">
- <i>{{'question-wall.next-comment-icon' | translate}}</i>
- <p>{{'question-wall.next-comment' | translate}}</p>
- </button>
- </ars-col>
- </ars-style-btn-material>
- </ars-row>
+ <ars-row [height]="50" class="questionwall-footer">
+ <ars-style-btn-material style="width:100%;" ars-flex-box>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="toggleFocusIncommingComments()" matRipple aria-labelledby="autofocus-on-lbl">
+ <ng-container *ngIf="focusIncommingComments">
+ <i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
+ <p>{{'question-wall.auto-renew-off' | translate}}</p>
+ </ng-container>
+ <ng-container *ngIf="!focusIncommingComments">
+ <i>{{'question-wall.auto-renew-on-icon' | translate}}</i>
+ <p>{{'question-wall.auto-renew-on' | translate}}</p>
+ </ng-container>
+ </button>
+ </ars-col>
+ <ars-fill></ars-fill>
+ <ars-col style="display:flex;flex-direction:column;justify-content:center">
+ <p *ngIf="unreadComments" style="line-height:18px;" class="questionwall-text-color">{{unreadComments}}</p>
+ </ars-col>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="prevComment()" matRipple aria-labelledby="prev-comment-lbl">
+ <i>{{'question-wall.prev-comment-icon' | translate}}</i>
+ <p>{{'question-wall.prev-comment' | translate}}</p>
+ </button>
+ <button ars-btn (click)="nextComment()" matRipple aria-labelledby="next-comment-lbl">
+ <i>{{'question-wall.next-comment-icon' | translate}}</i>
+ <p>{{'question-wall.next-comment' | translate}}</p>
+ </button>
+ </ars-col>
+ </ars-style-btn-material>
+ </ars-row>
</ars-screen>
<div class="visually-hidden">
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index d94120f74..56653aab8 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -5,6 +5,10 @@
margin: 0;
}
+ button.selected > * {
+ color: var(--red);
+ }
+
.test {
width: 100%;
height: 250px;
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
index 6282c3a51..689228e35 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
@@ -23,7 +23,7 @@ import { Period } from '../../comment-list/comment-list.component';
})
export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
- @ViewChild(ColComponent)colComponent: ColComponent;
+ @ViewChild(ColComponent) colComponent: ColComponent;
roomId: string;
room: Room;
@@ -31,8 +31,10 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
commentsFilteredByTime: QuestionWallComment[] = [];
commentsFilter: QuestionWallComment[] = [];
commentFocus: QuestionWallComment;
+ commentsCountQuestions = 0;
+ commentsCountUsers = 0;
unreadComments = 0;
- focusIncommingComments = true;
+ focusIncommingComments = false;
timeUpdateInterval;
keySupport: QuestionWallKeyEventSupport;
hasFilter = false;
@@ -54,7 +56,11 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
public notUndefined<E>(e: E, action: (e: E) => void, elsePart?: () => void) {
- if (e) {action(e); } else if (elsePart) {elsePart(); }
+ if (e) {
+ action(e);
+ } else if (elsePart) {
+ elsePart();
+ }
}
constructor(
@@ -87,6 +93,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.comments.push(comment);
this.setTimePeriod(this.period);
});
+ this.updateCommentsCountOverview();
});
this.roomService.getRoom(this.roomId).subscribe(e => {
this.room = e;
@@ -108,6 +115,14 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.initKeySupport();
}
+ updateCommentsCountOverview(): void {
+ const tempUserSet = new Set();
+ const comments = this.getCurrentCommentList();
+ comments.forEach((wallComment) => tempUserSet.add(wallComment.comment.userNumber));
+ this.commentsCountQuestions = comments.length;
+ this.commentsCountUsers = tempUserSet.size;
+ }
+
initKeySupport() {
this.wrap(this.keySupport, key => {
key.addKeyEvent('ArrowRight', () => this.nextComment());
@@ -172,6 +187,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.comments = [qwComment, ...this.comments];
this.setTimePeriod(this.period);
this.unreadComments++;
+ this.updateCommentsCountOverview();
return qwComment;
}
@@ -211,14 +227,18 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
openUserMap() {
- if (this.userSelection) {return; }
+ if (this.userSelection) {
+ return;
+ }
this.hasFilter = false;
this.createUserMap();
this.userSelection = true;
+ this.updateCommentsCountOverview();
}
cancelUserMap() {
this.userSelection = false;
+ this.updateCommentsCountOverview();
}
leave() {
@@ -269,7 +289,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
filterFavorites() {
this.filter('grade', false, 'question-wall.filter-favorite', '',
- x => x.comment.favorite);
+ x => x.comment.favorite);
}
filterUser(comment: QuestionWallComment) {
@@ -283,7 +303,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
filterBookmark() {
this.filter('bookmark', false, 'question-wall.filter-bookmark', '',
- x => x.comment.bookmark);
+ x => x.comment.bookmark);
}
filterTag(tag: string) {
@@ -299,13 +319,8 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.filterFunction = filter;
this.commentsFilter = this.commentsFilteredByTime.filter(this.filterFunction);
this.hasFilter = true;
- setTimeout(() => {
- if (this.commentsFilter.length <= 0) {
- this.commentFocus = null;
- } else {
- this.focusFirstComment();
- }
- }, 0);
+ setTimeout(() => this.focusFirstComment(), 0);
+ this.updateCommentsCountOverview();
}
focusFirstComment() {
@@ -317,10 +332,12 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
deactivateFilter() {
this.hasFilter = false;
this.filterFunction = null;
+ this.updateCommentsCountOverview();
}
toggleFilter() {
this.hasFilter = !this.hasFilter;
+ this.updateCommentsCountOverview();
}
sliderChange(evt: MatSliderChange) {
@@ -357,6 +374,8 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
if (this.filterFunction) {
this.filter(this.filterIcon, this.isSvgIcon, this.filterTitle, this.filterDesc, this.filterFunction);
+ } else {
+ this.updateCommentsCountOverview();
}
}
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 75e629773..fdf17ae82 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -208,6 +208,8 @@
"autofocus-off-lbl": "Automatische Fokussierung neuer Fragen beenden",
"autofocus-on-lbl": "Neue Fragen automatisch fokussieren",
"prev-comment-lbl": "Vorherige Frage",
- "next-comment-lbl": "Nächste Frage"
+ "next-comment-lbl": "Nächste Frage",
+ "overview-question-tooltip": "Anzahl gestellter Fragen",
+ "overview-questioners-tooltip": "Anzahl Fragensteller*innen"
}
}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 3f1da5b63..0ebe2a41f 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -214,6 +214,8 @@
"autofocus-off-lbl": "Stop automatic focusing of new questions",
"autofocus-on-lbl": "Turn on automatic focusing of new questions",
"prev-comment-lbl": "Previous question",
- "next-comment-lbl": "Next question"
+ "next-comment-lbl": "Next question",
+ "overview-question-tooltip": "Number of questions",
+ "overview-questioners-tooltip": "Number of questioners"
}
}
--
GitLab