diff --git a/src/app/components/shared/comment-answer/comment-answer.component.html b/src/app/components/shared/comment-answer/comment-answer.component.html
index 22e57fd2c8679eb74229d3be7c54f9a1eeecaadb..c9d88e2484d16c748e8274ca2e104f6bcc8306cb 100644
--- a/src/app/components/shared/comment-answer/comment-answer.component.html
+++ b/src/app/components/shared/comment-answer/comment-answer.component.html
@@ -4,6 +4,7 @@
<div fxLayout="row"
fxLayoutAlign="center">
<app-comment [comment]="comment"
+ [user]="user"
[userRole]="userRole"></app-comment>
</div>
<div fxLayout="row"
diff --git a/src/app/components/shared/comment-answer/comment-answer.component.ts b/src/app/components/shared/comment-answer/comment-answer.component.ts
index a88b717dc589e72788930986a7bbb04881b0b3df..86f1b64749f1fa9146aa5c9fba6c725b079173f9 100644
--- a/src/app/components/shared/comment-answer/comment-answer.component.ts
+++ b/src/app/components/shared/comment-answer/comment-answer.component.ts
@@ -13,6 +13,8 @@ import { EventService } from '../../../services/util/event.service';
import { WriteCommentComponent } from '../write-comment/write-comment.component';
import { CorrectWrong } from '../../../models/correct-wrong.enum';
import { Message } from '@stomp/stompjs';
+import { AuthenticationService } from '../../../services/http/authentication.service';
+import { User } from '../../../models/user';
@Component({
selector: 'app-comment-answer',
@@ -27,6 +29,7 @@ export class CommentAnswerComponent implements OnInit, OnDestroy {
answer: string;
isLoading = true;
userRole: UserRole;
+ user: User;
isStudent = true;
edit = false;
private _commentSubscription;
@@ -35,6 +38,7 @@ export class CommentAnswerComponent implements OnInit, OnDestroy {
private notificationService: NotificationService,
private translateService: TranslateService,
protected langService: LanguageService,
+ private authenticationService: AuthenticationService,
protected wsCommentService: WsCommentService,
protected commentService: CommentService,
public dialog: MatDialog,
@@ -43,6 +47,11 @@ export class CommentAnswerComponent implements OnInit, OnDestroy {
ngOnInit() {
this.userRole = this.route.snapshot.data.roles[0];
+ this.authenticationService.watchUser.subscribe(newUser => {
+ if (newUser) {
+ this.user = newUser;
+ }
+ });
if (this.userRole !== UserRole.PARTICIPANT) {
this.isStudent = false;
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index dbb3d0ca8580b75234fbdb3b37077d0add9fc1f6..43d6fc2415d78897253becf5e567271bf23280b8 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -417,9 +417,10 @@
<ng-template #voting>
<button mat-icon-button
(click)="voteUp(comment)"
- *ngIf="!disabled"
+ *ngIf="!disabled && user && comment.creatorId !== user.id"
matTooltip="{{ 'comment-page.vote-up' | translate }}"
tabindex="0"
+ [disabled]="!user || comment.creatorId === user.id"
attr.aria-labelledby="comment_vote_up{{ comment.id }}">
<mat-icon class="voting-icon"
[ngClass]="{'upVoted' : hasVoted === 1}">thumb_up
@@ -431,7 +432,7 @@
}}">{{comment.score}}</span>
<button mat-icon-button
(click)="voteDown(comment)"
- *ngIf="!disabled"
+ *ngIf="!disabled && user && comment.creatorId !== user.id"
matTooltip="{{ 'comment-page.vote-down' | translate }}"
tabindex="0"
attr.aria-labelledby="comment_vote_down{{ comment.id }}">
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index a187f763b17b8495c41ade46d74014868eb05fd9..a532c27ed14628209ced8c28dbdee9fce4092b25 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -68,6 +68,7 @@ mat-card-content > :first-child {
}
.score {
+ min-width: 40px;
text-align: center;
margin: 0;
color: var(--on-surface);
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 4eef73d14fc3cd3fa36e74acc006a7154eb632f8..3a08e9fb7956072a14702317464c74d4118a99f1 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
@@ -182,6 +182,7 @@
ars-flex-box>
<ars-col ars-btn-wrp
[xp]="32"
+ *ngIf="user && commentFocus.comment.creatorId !== user.id"
[extra]="true"
class="questionwall-comment-btn">
<button ars-btn
@@ -334,6 +335,7 @@
<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)"
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 49c01882da61e16ec4a7582565595935ea84b0b8..477e708bf579b5d4e9a5fd3e58342f8d76ea27bd 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
@@ -15,6 +15,7 @@ import { QuestionWallKeyEventSupport } from '../QuestionWallKeyEventSupport';
import { MatSliderChange } from '@angular/material/slider';
import { RoomDataService } from '../../../../services/util/room-data.service';
import { Period } from '../../comment-list/comment-list.filter';
+import { User } from '../../../../models/user';
@Component({
selector: 'app-question-wall',
@@ -51,6 +52,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
periodsList = Object.values(Period);
period: Period = Period.all;
isLoading = true;
+ user: User;
constructor(
private authenticationService: AuthenticationService,
@@ -88,6 +90,11 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnInit(): void {
QuestionWallComment.updateTimeFormat(localStorage.getItem('currentLang'));
this.translateService.use(localStorage.getItem('currentLang'));
+ this.authenticationService.watchUser.subscribe(newUser => {
+ if (newUser) {
+ this.user = newUser;
+ }
+ });
this.roomDataService.getRoomData(this.roomId).subscribe(e => {
if (e === null) {
return;
@@ -263,11 +270,11 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
likeComment(comment: QuestionWallComment) {
- this.commentService.voteUp(comment.comment, this.authenticationService.getUser().id).subscribe();
+ this.commentService.voteUp(comment.comment, this.user.id).subscribe();
}
dislikeComment(comment: QuestionWallComment) {
- this.commentService.voteDown(comment.comment, this.authenticationService.getUser().id).subscribe();
+ this.commentService.voteDown(comment.comment, this.user.id).subscribe();
}
sortScore(reverse?: boolean) {
diff --git a/src/app/components/shared/write-comment/write-comment.component.html b/src/app/components/shared/write-comment/write-comment.component.html
index 1c326d81856560dc3c48b36e52d979bad92337f9..dd761f44a76c6840efcfe82ed71f478904b37d57 100644
--- a/src/app/components/shared/write-comment/write-comment.component.html
+++ b/src/app/components/shared/write-comment/write-comment.component.html
@@ -1,44 +1,41 @@
<ars-row>
<ng-container [ngTemplateOutlet]="additionalTemplate"></ng-container>
- <div class="lang-selection" *ngIf="enabled">
- <button class="lang-btn"
- mat-button
- (click)="select.open()"
- matTooltip="{{ 'spacy-dialog.lang-button-hint' | translate }}"
- matTooltipShowDelay="750">
- <mat-icon id="langSymbol">language</mat-icon>
- <span *ngIf="selectedLang !== 'auto'">
+ <button class="lang-btn"
+ mat-button
+ *ngIf="enabled"
+ (click)="select.open()"
+ matTooltip="{{ 'spacy-dialog.lang-button-hint' | translate }}"
+ matTooltipShowDelay="750">
+ <mat-icon class="btn-icon">language</mat-icon>
+ <span *ngIf="selectedLang !== 'auto'">
{{'spacy-dialog.' + (languagetoolService.mapLanguageToSpacyModel(selectedLang)) | translate}}
</span>
- <span *ngIf="selectedLang === 'auto'" #langSelect>
+ <span *ngIf="selectedLang === 'auto'" #langSelect>
{{'spacy-dialog.language' | translate}}
</span>
- <mat-select class="select-list" #select [(ngModel)]="selectedLang">
- <mat-option *ngFor="let lang of languages" [value]="lang">
- <span *ngIf="lang == 'de-DE'">{{ 'spacy-dialog.de' | translate }}</span>
- <span *ngIf="lang == 'en-US'">{{ 'spacy-dialog.en' | translate }}</span>
- <span *ngIf="lang == 'fr'">{{ 'spacy-dialog.fr' | translate }}</span>
- <span *ngIf="lang == 'auto'">{{ 'spacy-dialog.auto' | translate }}</span>
- </mat-option>
- </mat-select>
- </button>
- </div>
- <mat-form-field *ngIf="tags"
- class="tag-form-field">
- <mat-label>
- <mat-icon class="icon-svg"
- svgIcon="comment_tag"></mat-icon>
- {{'comment-page.tag' | translate}}
- </mat-label>
- <label for="tagSelect">{{selectedTag}}</label>
- <mat-select [(ngModel)]="selectedTag"
- class="tag-select"
- id="tagSelect">
- <mat-option>{{'comment-page.tag-reset' | translate}}</mat-option>
- <mat-option *ngFor="let tag of tags"
- value="{{tag}}">{{tag}}</mat-option>
+ <mat-select class="select-list" #select [(ngModel)]="selectedLang">
+ <mat-option *ngFor="let lang of languages" [value]="lang">
+ <span *ngIf="lang == 'de-DE'">{{ 'spacy-dialog.de' | translate }}</span>
+ <span *ngIf="lang == 'en-US'">{{ 'spacy-dialog.en' | translate }}</span>
+ <span *ngIf="lang == 'fr'">{{ 'spacy-dialog.fr' | translate }}</span>
+ <span *ngIf="lang == 'auto'">{{ 'spacy-dialog.auto' | translate }}</span>
+ </mat-option>
+ </mat-select>
+ </button>
+ <button class="tag-btn"
+ mat-button
+ *ngIf="enabled && tags && tags.length"
+ (click)="tagSelect.open()"
+ matTooltip="{{ 'spacy-dialog.lang-button-hint' | translate }}"
+ matTooltipShowDelay="750">
+ <mat-icon class="btn-icon" svgIcon="comment_tag"></mat-icon>
+ <label for="tagSelect" *ngIf="!selectedTag"><em>{{'comment-page.tag' | translate}}</em></label>
+ <label for="tagSelect" *ngIf="selectedTag">{{selectedTag}}</label>
+ <mat-select class="select-list" id="tagSelect" #tagSelect [(ngModel)]="selectedTag">
+ <mat-option [value]="null"><em>{{'comment-page.tag-reset' | translate}}</em></mat-option>
+ <mat-option *ngFor="let tag of tags" [value]="tag">{{tag}}</mat-option>
</mat-select>
- </mat-form-field>
+ </button>
</ars-row>
<ars-row [height]="12"></ars-row>
<app-view-comment-data *ngIf="enabled"
diff --git a/src/app/components/shared/write-comment/write-comment.component.scss b/src/app/components/shared/write-comment/write-comment.component.scss
index 60f26f6a7e2cb24bc148f0dbd94cfbb1738f8e2e..b6430bf801b9729e0666b76d1426990d7d6e1919 100644
--- a/src/app/components/shared/write-comment/write-comment.component.scss
+++ b/src/app/components/shared/write-comment/write-comment.component.scss
@@ -109,6 +109,10 @@ mat-hint {
margin-top: 8px;
}
+.btn-icon {
+ margin-right: 5px;
+}
+
/*
Styling for tag selection
*/
@@ -117,15 +121,8 @@ Styling for tag selection
display: inline;
}
-.tag-form-field {
- z-index: 10000;
+.tag-btn {
float: right;
-
- @media screen and (max-width: 480px) {
- float: unset;
- width: max-content;
- margin: 5px 16px;
- }
}
.anchor-wrp {
@@ -141,25 +138,13 @@ Styling for tag selection
Styling for language select
*/
-#langSymbol {
- margin-right: 5px;
-}
-
.select-list {
width: 18px;
margin-left: 12px;
}
-.lang-selection {
- vertical-align: middle;
- margin-right: 0;
- width: 200px;
- display: inline-block;
-
- > button {
- padding: 0;
- margin-left: 12px;
- }
+.lang-btn {
+ margin-left: 12px;
}
/*