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 c5ecf0fa9bf228443e8fd4160f84978bcd80cd35..f1af715776cb6b98b263dbcf4d62f43707f56c44 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
@@ -242,182 +242,202 @@
</ars-col>
</div>
</div>
- <ars-col ars-flex-box
- [width]="450"
- class="questionwall-list"
- #colComponent>
-
+ <ars-col [width]="50" ars-flex-box>
<ars-row>
- <ars-row *ngIf="hasFilter"
- class="questionwall-list-border-bottom"
- [height]="50">
- <ars-style-btn-material style="width:100%;height:100%;"
- ars-flex-box>
- <ars-col ars-btn-wrp
- [xp]="48">
- <button ars-btn
- matRipple>
- <mat-icon *ngIf="isSvgIcon"
- class="icon-svg"
- [svgIcon]="filterIcon"></mat-icon>
- <i *ngIf="!isSvgIcon">{{filterIcon}}</i>
- <p>{{filterTitle | translate}} {{filterDesc}}</p>
- </button>
- </ars-col>
- <ars-fill></ars-fill>
- <ars-col ars-btn-wrp
- [xp]="48">
- <button ars-btn
- (click)="deactivateFilter()"
- matRipple>
- <i>remove_circle</i>
- <p>{{'question-wall.filter-remove' | translate}}</p>
- </button>
- </ars-col>
- </ars-style-btn-material>
- </ars-row>
+ <button mat-icon-button style="margin-top:18px; transform: scale(1.8)" (click)="toggleSideList()">
+ <mat-icon style="color: yellow" class="icon-color" *ngIf="sidelistExpanded" aria-describedby="side-list-off"
+ matTooltip="{{'question-wall.side-list-off' | translate}}">
+ keyboard_double_arrow_right
+ </mat-icon>
+ <mat-icon style="color: yellow" class="icon-color" *ngIf="!sidelistExpanded" aria-describedby="side-list-on"
+ matTooltip="{{'question-wall.side-list-on' | translate}}">
+ keyboard_double_arrow_left
+ </mat-icon>
+ </button>
</ars-row>
+ <ars-fill></ars-fill>
+ </ars-col>
+ <ars-col [width]="450" [overflow]="'hidden'" #sidelist class="side-list">
+ <ars-col [width]="450">
- <ars-fill class="questionwall-list-comments">
-
- <ars-row *ngIf="!userSelection">
-
- <ars-fill *ngIf="(hasFilter?commentsFilter:commentsFilteredByTime).length==0"
- style="float:left;">
- <p class="questionwall-present-introduction-desc">
- {{'question-wall.no-result' | translate}}
- </p>
- </ars-fill>
+ <ars-col ars-flex-box
+ [width]="450"
+ class="questionwall-list"
+ #colComponent>
- <ars-row *ngFor="let comment of hasFilter?commentsFilter:commentsFilteredByTime"
- class="questionwall-comment-anchor"
- style="float:left;">
- <ars-row ars-flex-box
- height="170">
- <ars-fill></ars-fill>
- <ars-col ars-flex-box>
- <ars-fill></ars-fill>
- <ars-row>
- <p class="questionwall-comment-number">{{comment.comment.number}}</p>
- </ars-row>
+ <ars-row>
+ <ars-row *ngIf="hasFilter"
+ class="questionwall-list-border-bottom"
+ [height]="50">
+ <ars-style-btn-material style="width:100%;height:100%;"
+ ars-flex-box>
+ <ars-col ars-btn-wrp
+ [xp]="48">
+ <button ars-btn
+ matRipple>
+ <mat-icon *ngIf="isSvgIcon"
+ class="icon-svg"
+ [svgIcon]="filterIcon"></mat-icon>
+ <i *ngIf="!isSvgIcon">{{filterIcon}}</i>
+ <p>{{filterTitle | translate}} {{filterDesc}}</p>
+ </button>
+ </ars-col>
<ars-fill></ars-fill>
- </ars-col>
+ <ars-col ars-btn-wrp
+ [xp]="48">
+ <button ars-btn
+ (click)="deactivateFilter()"
+ matRipple>
+ <i>remove_circle</i>
+ <p>{{'question-wall.filter-remove' | translate}}</p>
+ </button>
+ </ars-col>
+ </ars-style-btn-material>
</ars-row>
- <ars-row style="box-sizing:border-box;padding:8px;margin-top:-170px;">
- <ars-row
- [ngClass]="comment===commentFocus?'questionwall-comment-border-on':'questionwall-comment-border-off'"
- style="border-radius:5px">
+ </ars-row>
+
+ <ars-fill class="questionwall-list-comments">
+
+ <ars-row *ngIf="!userSelection">
+
+ <ars-fill *ngIf="(hasFilter?commentsFilter:commentsFilteredByTime).length==0"
+ style="float:left;">
+ <p class="questionwall-present-introduction-desc">
+ {{'question-wall.no-result' | translate}}
+ </p>
+ </ars-fill>
+
+ <ars-row *ngFor="let comment of hasFilter?commentsFilter:commentsFilteredByTime"
+ class="questionwall-comment-anchor"
+ style="float:left;">
<ars-row ars-flex-box
- (click)="focusComment(comment)"
- style="box-sizing:border-box;padding:16px;cursor:pointer">
- <ars-col class="questionwall-comment-meta">
- <i class="questionwall-icon">person_pin_circle</i>
- <p (click)="filterUser(comment);"
- class="questionwall-comment-user"
- matRipple>{{comment.comment.userNumber}}</p>
- <p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
+ height="170">
+ <ars-fill></ars-fill>
+ <ars-col ars-flex-box>
+ <ars-fill></ars-fill>
+ <ars-row>
+ <p class="questionwall-comment-number">{{comment.comment.number}}</p>
+ </ars-row>
+ <ars-fill></ars-fill>
</ars-col>
- <ars-col>
- <p class="questionwall-comment-notification">{{comment.old ? '' : 'NEW'}}</p>
- </ars-col>
- </ars-row>
- <ars-row
- (click)="focusComment(comment)"
- style="box-sizing:border-box;padding:0 16px;cursor:pointer">
- <p class="questionwall-comment-body">
- <app-view-comment-data class="images"
- [currentData]="comment.comment.body"></app-view-comment-data>
- </p>
</ars-row>
- <ars-row [height]="50">
- <ars-style-btn-material style="width:100%;height:100%;"
- ars-flex-box>
- <ars-col ars-btn-wrp
- [xp]="16"
- [extra]="true"
- *ngIf="user && comment.comment.creatorId !== user.id"
- class="questionwall-comment-btn">
- <button ars-btn
- (click)="likeComment(comment)"
- matRipple>
- <i>thumb_up</i>
- <p style="padding-left:4px;">{{comment.comment.upvotes}}</p>
- </button>
- <button ars-btn
- (click)="dislikeComment(comment)"
- matRipple>
- <i>thumb_down</i>
- <p style="padding-left:4px;">{{comment.comment.downvotes}}</p>
- </button>
- </ars-col>
- <ars-fill (click)="focusComment(comment)"
- style="cursor:pointer"></ars-fill>
- <ars-col ars-btn-wrp
- [xp]="16"
- [extra]="true"
- *ngIf="comment.comment.tag">
- <button ars-btn
- (click)="filterTag(comment.comment.tag);"
- matRipple>
- <mat-icon class="icon-svg"
- svgIcon="comment_tag"></mat-icon>
- <p>{{comment.comment.tag}}</p>
- </button>
- </ars-col>
- </ars-style-btn-material>
+ <ars-row style="box-sizing:border-box;padding:8px;margin-top:-170px;">
+ <ars-row
+ [ngClass]="comment===commentFocus?'questionwall-comment-border-on':'questionwall-comment-border-off'"
+ style="border-radius:5px">
+ <ars-row ars-flex-box
+ (click)="focusComment(comment)"
+ style="box-sizing:border-box;padding:16px;cursor:pointer">
+ <ars-col class="questionwall-comment-meta">
+ <i class="questionwall-icon">person_pin_circle</i>
+ <p (click)="filterUser(comment);"
+ class="questionwall-comment-user"
+ matRipple>{{comment.comment.userNumber}}</p>
+ <p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
+ </ars-col>
+ <ars-col>
+ <p class="questionwall-comment-notification">{{comment.old ? '' : 'NEW'}}</p>
+ </ars-col>
+ </ars-row>
+ <ars-row
+ (click)="focusComment(comment)"
+ style="box-sizing:border-box;padding:0 16px;cursor:pointer">
+ <p class="questionwall-comment-body">
+ <app-view-comment-data class="images"
+ [currentData]="comment.comment.body"></app-view-comment-data>
+ </p>
+ </ars-row>
+ <ars-row [height]="50">
+ <ars-style-btn-material style="width:100%;height:100%;"
+ ars-flex-box>
+ <ars-col ars-btn-wrp
+ [xp]="16"
+ [extra]="true"
+ *ngIf="user && comment.comment.creatorId !== user.id"
+ class="questionwall-comment-btn">
+ <button ars-btn
+ (click)="likeComment(comment)"
+ matRipple>
+ <i>thumb_up</i>
+ <p style="padding-left:4px;">{{comment.comment.upvotes}}</p>
+ </button>
+ <button ars-btn
+ (click)="dislikeComment(comment)"
+ matRipple>
+ <i>thumb_down</i>
+ <p style="padding-left:4px;">{{comment.comment.downvotes}}</p>
+ </button>
+ </ars-col>
+ <ars-fill (click)="focusComment(comment)"
+ style="cursor:pointer"></ars-fill>
+ <ars-col ars-btn-wrp
+ [xp]="16"
+ [extra]="true"
+ *ngIf="comment.comment.tag">
+ <button ars-btn
+ (click)="filterTag(comment.comment.tag);"
+ matRipple>
+ <mat-icon class="icon-svg"
+ svgIcon="comment_tag"></mat-icon>
+ <p>{{comment.comment.tag}}</p>
+ </button>
+ </ars-col>
+ </ars-style-btn-material>
+ </ars-row>
+ </ars-row>
</ars-row>
</ars-row>
- </ars-row>
- </ars-row>
-
- </ars-row>
- <ars-row *ngIf="userSelection">
- <ars-style-btn-material style="width:100%">
- <ars-row [height]="50"
- ars-flex-box
- class="questionwall-list-border-bottom">
- <ars-col ars-btn-wrp
- [xp]="24"
- [extra]="true">
- <button ars-btn
- (click)="cancelUserMap()"
- matRipple>
- <i>arrow_back</i>
- </button>
- </ars-col>
- <ars-col ars-btn-wrp
- [xp]="24"
- [extra]="true">
- <button ars-btn
- class="pseudo-button">
- <i>person_pin_circle</i>
- <p>{{'question-wall.filter-user' | translate}}</p>
- </button>
- </ars-col>
</ars-row>
- <ars-row ars-btn-wrp
- [xp]="48"
- [yp]="32">
- <button ars-btn
- disabled
- class="questionwall-list-border-bottom pseudo-button">
- <p>{{'question-wall.filter-user' | translate}}-ID</p>
- <p>{{'question-wall.filter-user-count' | translate}}</p>
- </button>
- <button ars-btn
- mat-ripple
- *ngFor="let user of userList"
- (click)="applyUserMap(user[1])">
- <p>{{user[1]}}</p>
- <p>{{user[0]}}</p>
- </button>
+
+ <ars-row *ngIf="userSelection">
+ <ars-style-btn-material style="width:100%">
+ <ars-row [height]="50"
+ ars-flex-box
+ class="questionwall-list-border-bottom">
+ <ars-col ars-btn-wrp
+ [xp]="24"
+ [extra]="true">
+ <button ars-btn
+ (click)="cancelUserMap()"
+ matRipple>
+ <i>arrow_back</i>
+ </button>
+ </ars-col>
+ <ars-col ars-btn-wrp
+ [xp]="24"
+ [extra]="true">
+ <button ars-btn
+ class="pseudo-button">
+ <i>person_pin_circle</i>
+ <p>{{'question-wall.filter-user' | translate}}</p>
+ </button>
+ </ars-col>
+ </ars-row>
+ <ars-row ars-btn-wrp
+ [xp]="48"
+ [yp]="32">
+ <button ars-btn
+ disabled
+ class="questionwall-list-border-bottom pseudo-button">
+ <p>{{'question-wall.filter-user' | translate}}-ID</p>
+ <p>{{'question-wall.filter-user-count' | translate}}</p>
+ </button>
+ <button ars-btn
+ mat-ripple
+ *ngFor="let user of userList"
+ (click)="applyUserMap(user[1])">
+ <p>{{user[1]}}</p>
+ <p>{{user[0]}}</p>
+ </button>
+ </ars-row>
+ </ars-style-btn-material>
</ars-row>
- </ars-style-btn-material>
- </ars-row>
- </ars-fill>
+ </ars-fill>
+ </ars-col>
+ </ars-col>
</ars-col>
</ars-fill>
<ars-row [height]="50"
@@ -476,6 +496,8 @@
<div class="visually-hidden">
+ <div id="side-list-off">{{'question-wall.side-list-off' | translate}}</div>
+ <div id="side-list-on">{{'question-wall.side-list-on' | translate}}</div>
<div id="back-lbl">{{'question-wall.back-lbl' | translate}}</div>
<div id="sort-lbl">{{'question-wall.sort-lbl' | translate}}</div>
<div id="sort-lbl-new">{{'question-wall.sort-lbl-new' | translate}}</div>
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 9be9d93aa35bdb7dcb5014fe38fdf45a85cccd1c..37ef88e712a1e2b11c8e2b3875b242a6a65a3e02 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
@@ -146,6 +146,10 @@
&-comments {
}
+ &-hide {
+ background-color:orange;
+ }
+
&-scroll {
width: 100%;
height: 100%;
@@ -308,6 +312,11 @@
background-color: var(--ars-button-color);
}
}
+
+ .side-list{
+ transition:width ease-in-out 0.1s;
+ }
+
}
.selected {
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 477e708bf579b5d4e9a5fd3e58342f8d76ea27bd..a8fff53c705e39e3cbf37407450f7b021a78cdf8 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
@@ -25,7 +25,9 @@ import { User } from '../../../../models/user';
export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(ColComponent) colComponent: ColComponent;
+ @ViewChild('sidelist') sidelist: ColComponent;
+ sidelistExpanded: boolean = true;
roomId: string;
room: Room;
comments: QuestionWallComment[] = [];
@@ -87,6 +89,16 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
+ toggleSideList(){
+ this.sidelistExpanded=!this.sidelistExpanded;
+ if(this.sidelistExpanded){
+ this.sidelist.setPx(450);
+ }
+ else{
+ this.sidelist.setPx(0);
+ }
+ }
+
ngOnInit(): void {
QuestionWallComment.updateTimeFormat(localStorage.getItem('currentLang'));
this.translateService.use(localStorage.getItem('currentLang'));
@@ -159,6 +171,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
setTimeout(() => {
Rescale.requestFullscreen();
}, 10);
+ console.log(this.sidelist);
}
ngOnDestroy(): void {
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index e3cf4b7f250a4c09bcde7cce2060ac94f327347c..3ff066292a1a1c2308ad48fe501d0e0409b63e1c 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -300,7 +300,9 @@
"next-comment-lbl": "Nächste Frage",
"overview-question-tooltip": "Anzahl Fragen",
"overview-questioners-tooltip": "Anzahl Fragensteller",
- "questions-blocked": "Weitere Fragen deaktiviert "
+ "questions-blocked": "Weitere Fragen deaktiviert ",
+ "side-list-on": "Kommentarliste öffnen",
+ "side-list-off": "Kommentarliste schließen"
},
"quill": {
"cancel": "Abbrechen",
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 3e83563382323caffa231db5f302e080a998bea1..4c3080785e629b11f0e1f7908af4c52458bec80a 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -306,7 +306,9 @@
"next-comment-lbl": "Next question",
"overview-question-tooltip": "Number of questions",
"overview-questioners-tooltip": "Number of questioners",
- "questions-blocked": "New questions blocked"
+ "questions-blocked": "New questions blocked",
+ "side-list-on": "Show Comments",
+ "side-list-off": "Hide Comments"
},
"quill": {
"cancel": "Cancel",