diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 3195167d89895f78715a3da0f96b48f07da21e1c..78d6ea9b3360945d0e216b5cdf90409f485c6ab9 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -17,106 +17,57 @@
</mat-icon>
</button>
<span class="fill-remaining-space"></span>
- <ng-container *ngIf="isMobile">
- <button mat-flat-button class="edit-button" [matMenuTriggerFor]="editMenu" aria-label="Example icon-button with a menu">
- <mat-icon>edit</mat-icon>
- <span>{{'comment-page.edit' | translate}}</span>
- </button>
- <mat-menu #editMenu>
- <button mat-menu-item *ngIf="(isCreator || isModerator || comment.answer) && !inAnswerView"
- (click)="answerComment()" tabindex="0" attr.aria-labelledby="comment_answer{{ comment.id }}">
- <mat-icon class="not-marked" [ngClass]="{'answered-icon' : comment.answer}"
- [matTooltip]="comment.answer ? ('comment-page.has-answer' | translate) :
- ('comment-page.fullscreen' | translate)">
- comment
- </mat-icon>
- <span>{{'comment-page.answer' | translate}}</span>
- </button>
- <button mat-menu-item *ngIf="(!isStudent || comment.correct === 1) && !moderator" [disabled]="isStudent"
- (click)="markCorrect(comment, 1)" tabindex="0" attr.aria-labelledby="comment_correct{{ comment.id }}">
- <mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
- 'not-marked' : (comment.correct === 0 || comment.correct === 2)}"
- [matTooltip]="comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
- : ('comment-page.mark-not-correct' | translate)">check_circle
- </mat-icon>
- <span>{{comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
- : ('comment-page.mark-not-correct' | translate)}}</span>
- </button>
- <button mat-menu-item *ngIf="(!isStudent || comment.correct === 2) && !moderator" [disabled]="isStudent"
- (click)="markCorrect(comment, 2)" tabindex="0" attr.aria-labelledby="comment_not_correct{{ comment.id }}">
- <mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
- 'not-marked' : (comment.correct === 0 || comment.correct === 1)}"
- [matTooltip]="comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
- : ('comment-page.mark-not-wrong' | translate)">cancel
- </mat-icon>
- <span>{{comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
- : ('comment-page.mark-not-wrong' | translate)}}</span>
- </button>
- <button mat-menu-item *ngIf="(!isStudent || comment.favorite) && !moderator" [disabled]="isStudent"
- (click)="setFavorite(comment)" tabindex="0" attr.aria-labelledby="comment_grade{{ comment.id }}">
- <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
- [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
- : ('comment-page.mark-not-favorite' | translate)">grade
- </mat-icon>
- <span>{{!comment.favorite ? ('comment-page.mark-favorite' | translate)
- : ('comment-page.mark-not-favorite' | translate)}}</span>
- </button>
- <button mat-menu-item
- *ngIf="(isCreator || (comment.creatorId && user && comment.creatorId === user.id)) && !comment.favorite && !inAnswerView"
- (click)="openDeleteCommentDialog()"
- tabindex="0" attr.aria-labelledby="comment_delete{{ comment.id }}">
- <mat-icon class="not-marked" matTooltip="{{ 'comment-page.delete' | translate }}">delete
- </mat-icon>
- <span>{{ 'comment-page.delete' | translate }}</span>
- </button>
- </mat-menu>
- </ng-container>
- <ng-container *ngIf="!isMobile">
- <button mat-icon-button *ngIf="(isCreator || isModerator || comment.answer) && !inAnswerView"
- (click)="answerComment()" tabindex="0" attr.aria-labelledby="comment_answer{{ comment.id }}">
- <mat-icon class="not-marked" [ngClass]="{'answered-icon' : comment.answer}"
- [matTooltip]="comment.answer ? ('comment-page.has-answer' | translate) :
+
+ <button mat-icon-button *ngIf="(isCreator || isModerator || comment.answer) && !inAnswerView"
+ (click)="answerComment()" tabindex="0" attr.aria-labelledby="comment_answer{{ comment.id }}">
+ <mat-icon class="not-marked" [ngClass]="{'answered-icon' : comment.answer}"
+ [matTooltip]="comment.answer ? ('comment-page.has-answer' | translate) :
('comment-page.fullscreen' | translate)">
- comment
- </mat-icon>
- </button>
- <button mat-icon-button *ngIf="(!isStudent || comment.correct === 1) && !moderator" [disabled]="isStudent"
- (click)="markCorrect(comment, 1)" tabindex="0" attr.aria-labelledby="comment_correct{{ comment.id }}">
- <mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
+ comment
+ </mat-icon>
+ </button>
+
+ <button mat-icon-button *ngIf="(!isStudent || comment.correct === 1) && !moderator" [disabled]="isStudent"
+ (click)="markCorrect(comment, 1)" tabindex="0" attr.aria-labelledby="comment_correct{{ comment.id }}">
+ <mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
'not-marked' : (comment.correct === 0 || comment.correct === 2)}"
- [matTooltip]="comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
+ [matTooltip]="comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
: ('comment-page.mark-not-correct' | translate)">check_circle
- </mat-icon>
- </button>
- <button mat-icon-button *ngIf="(!isStudent || comment.correct === 2) && !moderator" [disabled]="isStudent"
- (click)="markCorrect(comment, 2)" tabindex="0" attr.aria-labelledby="comment_not_correct{{ comment.id }}">
- <mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
+ </mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="(!isStudent || comment.correct === 2) && !moderator" [disabled]="isStudent"
+ (click)="markCorrect(comment, 2)" tabindex="0" attr.aria-labelledby="comment_not_correct{{ comment.id }}">
+ <mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
'not-marked' : (comment.correct === 0 || comment.correct === 1)}"
- [matTooltip]="comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
+ [matTooltip]="comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
: ('comment-page.mark-not-wrong' | translate)">cancel
- </mat-icon>
- </button>
- <button mat-icon-button *ngIf="(!isStudent || comment.favorite) && !moderator" [disabled]="isStudent"
- (click)="setFavorite(comment)" tabindex="0" attr.aria-labelledby="comment_grade{{ comment.id }}">
- <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
- [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
+ </mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="(!isStudent || comment.favorite) && !moderator" [disabled]="isStudent"
+ (click)="setFavorite(comment)" tabindex="0" attr.aria-labelledby="comment_grade{{ comment.id }}">
+ <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
+ [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
: ('comment-page.mark-not-favorite' | translate)">grade
- </mat-icon>
- </button>
- <button mat-icon-button
- *ngIf="(isCreator || (comment.creatorId && user && comment.creatorId === user.id)) && !comment.favorite && !inAnswerView"
- (click)="openDeleteCommentDialog()"
- tabindex="0" attr.aria-labelledby="comment_delete{{ comment.id }}">
- <mat-icon class="not-marked" matTooltip="{{ 'comment-page.delete' | translate }}">delete
- </mat-icon>
- </button>
- </ng-container>
+ </mat-icon>
+ </button>
+ <button mat-icon-button
+ *ngIf="(isCreator || (comment.creatorId && user && comment.creatorId === user.id)) && !comment.favorite && !inAnswerView"
+ (click)="openDeleteCommentDialog()"
+ tabindex="0" attr.aria-labelledby="comment_delete{{ comment.id }}">
+ <mat-icon class="not-marked" matTooltip="{{ 'comment-page.delete' | translate }}">delete
+ </mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="(isCreator || isModerator) && !inAnswerView" (click)="setAck(comment)"
+ tabindex="0" attr.aria-labelledby="comment_moderation{{ comment.id }}">
+ <mat-icon class="gavel" [matTooltip]="!comment.ack ? ('comment-page.acknowledge' | translate)
+ : ('comment-page.reject' | translate)">gavel
+ </mat-icon>
+ </button>
</div>
<div fxLayout="row">
<div class="body click" (click)="answerComment()" role="button" style="width:100%;"
tabindex="0" attr.aria-labelledby="comment_answer{{ comment.id }}">
<ars-row #commentBody>
- <ars-row *ngIf="isExpandable&&!isExpanded" [height]="35" class="expand-shadow"></ars-row>
<ars-row #commentBodyInner>
<markdown [data]="comment.body"></markdown>
</ars-row>
@@ -147,21 +98,14 @@
<span class="scoreCreator">{{comment.score}}</span>
</div>
</div>
- <ars-row #commentExpander ars-flex-box [height]="45">
- <ars-row [height]="5">
- </ars-row>
- <ars-fill ars-flex-box>
- <ars-fill></ars-fill>
- <ars-col>
- <button mat-button class="expand-button" (click)="toggleExpand($event)">
- <span class="commentExpanderButton">
- {{ isExpanded ? ( 'comment-page.show-less' | translate )
- : ('comment-page.show-more' | translate ) }}
- </span>
- </button>
- </ars-col>
- <ars-fill></ars-fill>
- </ars-fill>
+ <ars-row #commentExpander ars-flex-box [height]="37">
+ <ars-fill></ars-fill>
+ <ars-col>
+ <button mat-button (click)="toggleExpand($event)"><span class="commentExpanderButton">
+ {{ isExpanded ? ( 'comment-page.show-less' | translate ) : ('comment-page.show-more' | translate ) }}
+ </span></button>
+ </ars-col>
+ <ars-fill></ars-fill>
</ars-row>
<div fxLayout="row" fxLayoutAlign="start center">
<div fxLayoutAlign="center center" (click)="this.clickedOnTag.emit(comment.tag)"
@@ -177,13 +121,6 @@
{{comment.userNumber}}
</strong>
</div>
- <span class="fill-remaining-space"></span>
- <button mat-icon-button *ngIf="(isCreator || isModerator) && !inAnswerView" (click)="setAck(comment)"
- tabindex="0" attr.aria-labelledby="comment_moderation{{ comment.id }}">
- <mat-icon class="gavel" [matTooltip]="!comment.ack ? ('comment-page.acknowledge' | translate)
- : ('comment-page.reject' | translate)">gavel
- </mat-icon>
- </button>
</div>
</div>
</mat-card>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 6c0a2cda4f0bc6d5bb42f6035525cf4b209abc02..278b622ac53a45e6abb28adbe62d055445fc85fa 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -19,57 +19,35 @@ mat-card-content > :first-child {
}
.upVoted {
- color: var(--green)!important;
+ color: var(--green);
}
.downVoted {
- color: var(--red)!important;
+ color: var(--red);
}
.not-marked {
- color: slategray!important;
+ color: slategray;
}
.answered-icon {
- color: var(--primary)!important;
+ color: var(--primary);
}
.correct-icon {
- color: var(--green)!important;
+ color: var(--green);
}
.favorite-icon {
- color: var(--yellow)!important;
+ color: var(--yellow);
}
.wrong-icon {
- color: var(--red)!important;
+ color: var(--red);
}
.beamer-icon {
- color: var(--on-surface)!important;
-}
-
-.edit-button{
- background-color:var(--primary);
- *{
- color:var(--on-primary);
- }
- mat-icon{
- margin-right:8px;
- }
-}
-
-.expand-shadow{
- position:relative;
- top:calc( 100% - 36px );
- box-shadow: inset 0px -35px 25px -25px var(--surface);
- border-bottom:1px solid var(--alt-surface);
-}
-
-.expand-button{
- box-sizing:border-box!important;
- border:1px solid transparent;
+ color: var(--on-surface);
}
.score {
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index 80224e059dca087929130d7126679127d41a0a1c..2f58d20cd6fbfbb71a51a8c9dc601e851c57bfff 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, OnInit, EventEmitter, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
import { Comment } from '../../../models/comment';
import { Vote } from '../../../models/vote';
import { AuthenticationService } from '../../../services/http/authentication.service';
@@ -57,7 +57,6 @@ export class CommentComponent implements OnInit, AfterViewInit {
@ViewChild('commentExpander', { static: true })commentExpander: RowComponent;
isExpanded = false;
isExpandable = false;
- isMobile = false;
constructor(protected authenticationService: AuthenticationService,
private route: ActivatedRoute,
@@ -68,8 +67,7 @@ export class CommentComponent implements OnInit, AfterViewInit {
private translateService: TranslateService,
public dialog: MatDialog,
protected langService: LanguageService,
- private wsCommentService: WsCommentServiceService,
- private cd: ChangeDetectorRef) {
+ private wsCommentService: WsCommentServiceService) {
langService.langEmitter.subscribe(lang => {
translateService.use(lang);
this.language = lang;
@@ -77,7 +75,6 @@ export class CommentComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
- this.isMobile = localStorage.getItem('deviceType') === 'mobile';
switch (this.userRole) {
case UserRole.PARTICIPANT.valueOf():
this.isStudent = true;
@@ -105,7 +102,6 @@ export class CommentComponent implements OnInit, AfterViewInit {
this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
this.commentBody.setOverflow('hidden');
}
- this.cd.detectChanges();
}
toggleExpand(evt: MouseEvent) {
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 258f52d4deb20c990e4880b2ba97450801ee852b..f96f2d1fa150b7b14106bc24e0b23f5ab8d6ace7 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -118,8 +118,7 @@
"write-comment": "Eingabe",
"preview-comment": "Ansicht",
"show-more": "mehr anzeigen",
- "show-less": "weniger anzeigen",
- "edit": "Bearbeiten"
+ "show-less": "weniger anzeigen"
},
"content": {
"abort": "Abbrechen",
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index e0fe2681a27f538fbea80f41202f6e0809164a6f..30a50f0e0c7635d40049fc18007e7571070b1c37 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -119,8 +119,7 @@
"write-comment": "Write",
"preview-comment": "Preview",
"show-more": "show more",
- "show-less": "show less",
- "edit": "Edit"
+ "show-less": "show less"
},
"content": {
"abort": "Abort",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index f4e7546494fb9d3eb14b990cc04260b0c023c6d3..2f3ff918d3ce566ed9ff80eb2b8434bcb95f699e 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -98,9 +98,7 @@
"preview-comment": "Ansicht",
"show-more": "mehr ansehen",
"show-less": "weniger anzeigen",
- "sure": "Bist du sicher?",
- "answer": "Kommentar",
- "edit": "Bearbeiten"
+ "sure": "Bist du sicher?"
},
"home-page": {
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 472971c1be19a739c308f4cc4ab9332f1847c5a7..07f10b08ecba608f9aa4b4027ce84d9862975262 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -108,9 +108,7 @@
"preview-comment": "Preview",
"show-more": "show more",
"show-less": "show less",
- "delete": "Delete question",
- "answer": "Comment",
- "edit": "Edit"
+ "delete": "Delete question"
},
"home-page": {
"exactly-8": "A key is a combination of 8 digits.",