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 c64f444f8b85e71210b889de6d244d3629e33fad..bd16c197e44e35881fc2e984ec2e3d70a3fe73a0 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
@@ -1,19 +1,30 @@
<ars-screen ars-flex-box class="questionwall-screen">
<ars-row [height]="50" class="questionwall-header">
<ars-style-btn-material *ngIf="room" style="width:100%;height:100%;" ars-flex-box>
- <ars-col ars-btn-wrp [xp]="16" [yp]="0" [extra]="true">
- <button ars-btn (click)="leave()"><i>arrow_back</i></button>
+ <ars-fill ars-flex-box>
+ <ars-col ars-btn-wrp [xp]="16" [yp]="0" [extra]="true">
+ <button ars-btn (click)="leave()"><i>arrow_back</i></button>
+ </ars-col>
+ </ars-fill>
+ <ars-col>
+ <!-- centered col -->
</ars-col>
- <ars-fill></ars-fill>
+ <ars-fill>
+ <!-- right -->
+ </ars-fill>
</ars-style-btn-material>
</ars-row>
<ars-fill ars-flex-box>
<ars-fill style="overflow:hidden;">
<ars-row [overflow]="'auto'">
<ng-container *ngIf="commentFocus">
- <p class="questionwall-present-timestamp">{{commentFocus.timeAgo}}</p>
+ <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>
</ars-fill>
<ars-col [width]="450" [overflow]="'auto'" class="questionwall-list" #colComponent>
@@ -57,10 +68,12 @@
<ars-col ars-btn-wrp [xp]="16" [extra]="true">
<button ars-btn (click)="toggleFocusIncommingComments()">
<ng-container *ngIf="focusIncommingComments">
- <i>pause</i><p>Pause</p>
+ <i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
+ <p>{{'question-wall.auto-renew-off' | translate}}</p>
</ng-container>
<ng-container *ngIf="!focusIncommingComments">
- <i>play_arrow</i><p>Autofocus</p>
+ <i>{{'question-wall.auto-renew-on-icon' | translate}}</i>
+ <p>{{'question-wall.auto-renew-on' | translate}}</p>
</ng-container>
</button>
</ars-col>
@@ -69,8 +82,14 @@
<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()"><i>skip_previous</i><p>PREVIOUS</p></button>
- <button ars-btn (click)="nextComment()"><i>skip_next</i><p>NEXT</p></button>
+ <button ars-btn (click)="prevComment()">
+ <i>{{'question-wall.prev-comment-icon' | translate}}</i>
+ <p>{{'question-wall.prev-comment' | translate}}</p>
+ </button>
+ <button ars-btn (click)="nextComment()">
+ <i>{{'question-wall.next-comment-icon' | translate}}</i>
+ <p>{{'question-wall.next-comment' | translate}}</p>
+ </button>
</ars-col>
</ars-style-btn-material>
</ars-row>
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 a216116968638df456431215136ec1aad95a43b0..055a7d2cc7e2196c83b3c1d205c61c22c0ef5f26 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
@@ -71,6 +71,18 @@
padding:32px 32px 0 32px;
color:var(--ars-paragraph-color);
}
+ &-introduction{
+ &-title{
+ font-size:35px;
+ padding:32px 32px 0 32px;
+ color:var(--ars-header-color);
+ }
+ &-desc{
+ font-size:18px;
+ padding:16px 32px 0 32px;
+ color:var(--ars-paragraph-color);
+ }
+ }
}
&-screen{
background-color:var(--ars-background-color);
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 9e194826c756046fd00ca8bb38d084525ad386a0..378ee10f5f473515c65881801040c7f977d72ace 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
@@ -9,6 +9,9 @@ import { QuestionWallComment } from '../QuestionWallComment';
import { ColComponent } from '../../../../../../projects/ars/src/lib/components/layout/frame/col/col.component';
import { Router } from '@angular/router';
import { AuthenticationService } from '../../../../services/http/authentication.service';
+import { LanguageService } from '../../../../services/util/language.service';
+import { TranslateService } from '@ngx-translate/core';
+import { Rescale } from '../../../../models/rescale';
@Component({
selector: 'app-question-wall',
@@ -40,16 +43,20 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
private router: Router,
private commentService: CommentService,
private roomService: RoomService,
- private wsCommentService: WsCommentServiceService
+ private wsCommentService: WsCommentServiceService,
+ private langService: LanguageService,
+ private translateService: TranslateService
) {
this.roomId = localStorage.getItem('roomId');
this.timeUpdateInterval = setInterval(() => {
this.comments.forEach(e => e.updateTimeAgo());
}, 15000);
+ this.langService.langEmitter.subscribe(lang => this.translateService.use(lang));
}
ngOnInit(): void {
// StyleDebug.border('c');
+ this.translateService.use(localStorage.getItem('currentLang'));
this.commentService.getAckComments(this.roomId).subscribe(e => {
e.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
e.forEach(c => this.comments.push(new QuestionWallComment(c, true)));
@@ -73,6 +80,9 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
ngAfterViewInit(): void {
+ setTimeout(() => {
+ Rescale.requestFullscreen();
+ }, 10);
document.getElementById('header_rescale').style.display = 'none';
document.getElementById('footer_rescale').style.display = 'none';
}
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index f60850115c4bbbbf6ff31e8de586a984eb8ce712..1ee7412053036694dfa67a3bfdefa6bf6b2baba6 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -116,5 +116,17 @@
"session-id": "Code",
"bonus-token": "Tokens für Bonuspunkte",
"bonus-token-header": "Tokens für Bonuspunkte"
+ },
+ "question-wall": {
+ "next-comment": "Nächster Kommentar",
+ "next-comment-icon": "keyboard_arrow_right",
+ "prev-comment": "Vorheriger Kommentar",
+ "prev-comment-icon": "keyboard_arrow_left",
+ "auto-renew-on": "aktiviere automatisches fokussieren neuer Kommentare",
+ "auto-renew-on-icon": "refresh",
+ "auto-renew-off": "stoppe automatisches fokussieren neuer Kommentare",
+ "auto-renew-off-icon": "cancel",
+ "intro-title": "Questionwall",
+ "intro-desc": "Questionwall-desc"
}
}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index d7b2e23623bef8acd41e5aa827260a38171880c6..1230979550c3e1f6088719cf447035ac03315a6c 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -115,5 +115,17 @@
"session-id": "Key",
"bonus-token": "Tokens for bonus points",
"bonus-token-header": "Tokens for bonus points"
+ },
+ "question-wall": {
+ "next-comment": "next comment",
+ "next-comment-icon": "keyboard_arrow_right",
+ "prev-comment": "previous comment",
+ "prev-comment-icon": "keyboard_arrow_left",
+ "auto-renew-on": "start automatically focus new comments",
+ "auto-renew-on-icon": "refresh",
+ "auto-renew-off": "stop automatically focus new comments",
+ "auto-renew-off-icon": "cancel",
+ "intro-title": "Questionwall",
+ "intro-desc": "Questionwall-desc"
}
}