From 61d1290c59a190c6425b9fe63b8a9513d4da85c6 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Tue, 7 Apr 2020 14:28:16 +0200
Subject: [PATCH] i18n, sort, present question margin, button label
uppercase-lowercase
---
.../material-btn/material-btn.component.scss | 1 -
.../question-wall.component.html | 42 ++++++++++++++-----
.../question-wall.component.scss | 12 ++++++
.../question-wall/question-wall.component.ts | 23 ++++++++++
src/assets/i18n/participant/de.json | 4 +-
src/assets/i18n/participant/en.json | 12 +++---
6 files changed, 76 insertions(+), 18 deletions(-)
diff --git a/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss
index b004ebb98..779e84f28 100644
--- a/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss
+++ b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss
@@ -26,7 +26,6 @@
}
ars-col > button > p{
- text-transform:uppercase;
font-weight:500;
font-size:14px;
line-height:18px;
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 232a2b1c7..4a61e63fb 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
@@ -9,8 +9,14 @@
<ars-col>
<!-- centered col -->
</ars-col>
- <ars-fill>
- <!-- right -->
+ <ars-fill ars-flex-box>
+ <ars-fill></ars-fill>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="sortTime()"><p>{{'question-wall.sort-time' | translate}}</p><i>expand_less</i></button>
+ <button ars-btn (click)="sortTime(true)"><i>expand_more</i></button>
+ <button ars-btn (click)="sortScore()"><p>{{'question-wall.sort-score' | translate}}</p><i>expand_less</i></button>
+ <button ars-btn (click)="sortScore(true)"><i>expand_more</i></button>
+ </ars-col>
</ars-fill>
</ars-style-btn-material>
</ars-row>
@@ -18,15 +24,17 @@
<ars-fill style="overflow:hidden;" ars-flex-box>
<ars-fill>
</ars-fill>
- <ars-row>
- <ng-container *ngIf="commentFocus">
- <h2 class="questionwall-present-timestamp">{{commentFocus.timeAgo}}</h2>
- <p class="questionwall-present">{{commentFocus.comment.body}}</p>
- </ng-container>
- <ng-container *ngIf="!commentFocus">
- <p class="questionwall-present-introduction-title">{{'question-wall.introduction-title' | translate}}</p>
- <p class="questionwall-present-introduction-desc">{{'question-wall.introduction-desc' | translate}}</p>
- </ng-container>
+ <ars-row class="questionwall-present-box-outer">
+ <div class="questionwall-present-box-inner">
+ <ng-container *ngIf="commentFocus">
+ <h2 class="questionwall-present-timestamp">{{commentFocus.timeAgo}}</h2>
+ <p class="questionwall-present">{{commentFocus.comment.body}}</p>
+ </ng-container>
+ <ng-container *ngIf="!commentFocus">
+ <p class="questionwall-present-introduction-title">{{'question-wall.intro-title' | translate}}</p>
+ <p class="questionwall-present-introduction-desc">{{'question-wall.intro-desc' | translate}}</p>
+ </ng-container>
+ </div>
</ars-row>
<ars-fill>
</ars-fill>
@@ -47,6 +55,18 @@
<ars-col>
<p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
</ars-col>
+ <ars-col>
+ <!-- Fav,Mark as wrong/correct -->
+ <!--
+ <ars-style-btn-material>
+ <ars-col ars-btn-wrp [xp]="16" [extraStart]="true" class="questionwall-comment-btn">
+ <button ars-btn><i>check_circle</i></button>
+ <button ars-btn><i>not_interested</i></button>
+ <button ars-btn><i>{{comment.comment.favorite?'star':'star_border'}}</i></button>
+ </ars-col>
+ </ars-style-btn-material>
+ -->
+ </ars-col>
</ars-row>
<ars-row
(click)="focusComment(comment)"
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 3275f99d7..4cc0163dd 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
@@ -52,6 +52,7 @@
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
+ line-height:18px;
font-weight:600;
color: #cc4244;
}
@@ -66,6 +67,17 @@
padding:16px 32px 16px 32px;
color:var(--ars-header-color);
word-break:break-word;
+ &-box{
+ &-outer{
+ display:flex;
+ flex-direction:row;
+ justify-content:center;
+ }
+ &-inner{
+ width:1000px;
+ flex-shrink:1;
+ }
+ }
&-timestamp{
font-size:18px;
padding:32px 32px 0 32px;
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 385c77a63..4aef124e1 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
@@ -176,4 +176,27 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.wsCommentService.voteDown(comment.comment, this.authenticationService.getUser().id);
}
+ sortScore(reverse?: boolean) {
+ this.sort((a, b) => a.comment.score - b.comment.score, reverse);
+ }
+
+ sortTime(reverse?: boolean) {
+ this.sort((a, b) => new Date(a.comment.timestamp).getTime() - new Date(b.comment.timestamp).getTime(), reverse);
+ }
+
+ sort(fun: (a, b) => number, reverse: boolean) {
+ if (reverse) {
+ this.comments.sort(this.reverse(fun));
+ } else {
+ this.comments.sort(fun);
+ }
+ setTimeout(() => {
+ this.focusComment(this.comments[this.comments.length - 1]);
+ }, 0);
+ }
+
+ reverse(fun: (a, b) => number): (a, b) => number {
+ return (a, b) => fun(b, a);
+ }
+
}
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index c0bcb0837..b56cfa8a2 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -127,6 +127,8 @@
"auto-renew-off": "Autofokus beenden",
"auto-renew-off-icon": "cancel",
"intro-title": "Fragen-Fokus",
- "intro-desc": "Klicke auf eine Frage oder navigiere mit der Leertaste vorwärts oder mit den Pfeiltasten vor und zurück."
+ "intro-desc": "Klicke auf eine Frage oder navigiere mit der Leertaste vorwärts oder mit den Pfeiltasten vor und zurück.",
+ "sort-time": "Zeit",
+ "sort-score": "Bewertung"
}
}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 123097955..1706b4afe 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -117,15 +117,17 @@
"bonus-token-header": "Tokens for bonus points"
},
"question-wall": {
- "next-comment": "next comment",
+ "next-comment": "Next Comment",
"next-comment-icon": "keyboard_arrow_right",
- "prev-comment": "previous comment",
+ "prev-comment": "Previous Comment",
"prev-comment-icon": "keyboard_arrow_left",
- "auto-renew-on": "start automatically focus new comments",
+ "auto-renew-on": "Start automatically focus new comments",
"auto-renew-on-icon": "refresh",
- "auto-renew-off": "stop automatically focus new comments",
+ "auto-renew-off": "Stop automatically focus new comments",
"auto-renew-off-icon": "cancel",
"intro-title": "Questionwall",
- "intro-desc": "Questionwall-desc"
+ "intro-desc": "Click on a question or navigate forwards with the space bar or back and forth with the arrow keys.",
+ "sort-time": "Time",
+ "sort-score": "Score"
}
}
--
GitLab