diff --git a/projects/ars/src/lib/components/layout/frame/row/row.component.ts b/projects/ars/src/lib/components/layout/frame/row/row.component.ts
index 615ea7bc8730a795cc71696d320b5247b9318b1d..04c5589940ba6b501ae0940cbf990501d3a495e3 100644
--- a/projects/ars/src/lib/components/layout/frame/row/row.component.ts
+++ b/projects/ars/src/lib/components/layout/frame/row/row.component.ts
@@ -58,6 +58,11 @@ export class RowComponent extends FrameType implements OnInit, AfterViewInit {
return this.getRenderedHeight();
}
+ public setOverflow(overflow: string) {
+ this.overflow = overflow;
+ this.updateOverflow();
+ }
+
public getRenderedHeight(): number {
return this.ref.nativeElement.offsetHeight;
}
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
index 2a81b5d79a00d41b4207b41b818c046110ad5ff8..0182e0228cb29f02e9d9ec2e2969dd0314e3b7ea 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
@@ -1,27 +1,43 @@
-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
- <mat-form-field>
- <textarea (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput #commentBody matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10 maxlength="250"
- [formControl]="bodyForm" aria-labelledby="ask-question-description"></textarea>
- <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate }}</mat-placeholder>
- <mat-hint align="end"><span aria-hidden="true">{{commentBody.value.length}} / 250</span></mat-hint>
-
- </mat-form-field>
- <mat-form-field *ngIf="tags !== null && tags !== undefined && tags.length > 0">
-
- <mat-label>{{ 'comment-page.tag' | translate }}</mat-label>
- <mat-select [(ngModel)]="selectedTag" class="comment-tag">
- <mat-option *ngFor="let tag of tags" value="{{tag}}">{{tag}}</mat-option>
- </mat-select>
-
- </mat-form-field>
-</div>
-<app-dialog-action-buttons
- buttonsLabelSection="comment-page"
- confirmButtonLabel="send"
- [cancelButtonClickAction]="buildCloseDialogActionCallback()"
- [confirmButtonClickAction]="buildCreateCommentActionCallback(commentBody)"
-></app-dialog-action-buttons>
-
-<div class="visually-hidden">
- <div id="ask-question-description">{{ 'comment-page.ask-question-description' | translate }}</div>
-</div>
+<ars-row ars-flex-box>
+ <ars-row>
+ <mat-tab-group>
+ <mat-tab label="{{ 'comment-page.write-comment' | translate }}">
+ <ars-row [height]="12"></ars-row>
+ <ars-row>
+ <mat-divider></mat-divider>
+ </ars-row>
+ <ars-row [height]="12"></ars-row>
+ <ars-row [overflow]="'auto'" style="max-height:calc( 100vh - 250px )">
+ <mat-form-field style="width:100%;">
+ <textarea (focus)="eventService.makeFocusOnInputTrue()" style="margin-top:15px;width:100%;"
+ (blur)="eventService.makeFocusOnInputFalse()"
+ matInput #commentBody matTextareaAutosize
+ matAutosizeMinRows=5 matAutosizeMaxRows=10 maxlength="250"
+ [formControl]="bodyForm" aria-labelledby="ask-question-description">
+ </textarea>
+ <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate }}</mat-placeholder>
+ <mat-hint align="end"><span aria-hidden="true">{{commentBody.value.length}} / 250</span></mat-hint>
+ </mat-form-field>
+ </ars-row>
+ </mat-tab>
+ <mat-tab label="{{ 'comment-page.preview-comment' | translate }}">
+ <ars-row [height]="12"></ars-row>
+ <ars-row>
+ <mat-divider></mat-divider>
+ </ars-row>
+ <ars-row [height]="12"></ars-row>
+ <ars-row [overflow]="'auto'" style="max-height:calc( 100vh - 250px )">
+ <markdown [data]="commentBody.value"></markdown>
+ </ars-row>
+ </mat-tab>
+ </mat-tab-group>
+ </ars-row>
+ <ars-row>
+ <app-dialog-action-buttons
+ buttonsLabelSection="comment-page"
+ confirmButtonLabel="send"
+ [cancelButtonClickAction]="buildCloseDialogActionCallback()"
+ [confirmButtonClickAction]="buildCreateCommentActionCallback(commentBody)"
+ ></app-dialog-action-buttons>
+ </ars-row>
+</ars-row>
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss b/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
index b95058ec50a7fb4eb3df7255a1933880ce90bece..3afb28f7320f6661e0d42126f9bbd1fd14129f53 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
@@ -61,3 +61,13 @@ mat-hint {
::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: var(--primary);
}
+
+::ng-deep .mat-tab-label-active,
+::ng-deep .mat-tab-label {
+ color: var(--on-surface);
+ opacity: 1!important;
+}
+
+::ng-deep .mat-ink-bar {
+ background-color: var(--primary) !important;
+}
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts
index 98c54399a0601f663b03a0209e03a5e4a85b85dc..870eda98185f46fe639a691105f49310e6de87f9 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { Comment } from '../../../../models/comment';
import { NotificationService } from '../../../../services/util/notification.service';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -24,6 +24,8 @@ export class CreateCommentComponent implements OnInit {
bodyForm = new FormControl('', [Validators.required]);
+ @ViewChild('commentBody', { static: true })commentBody: HTMLTextAreaElement;
+
constructor(
private notification: NotificationService,
public dialogRef: MatDialogRef<CommentListComponent>,
@@ -79,7 +81,7 @@ export class CreateCommentComponent implements OnInit {
/**
* Returns a lambda which executes the dialog dedicated action on call.
*/
- buildCreateCommentActionCallback(text: HTMLInputElement): () => void {
+ buildCreateCommentActionCallback(text: HTMLInputElement|HTMLTextAreaElement): () => void {
return () => this.closeDialog(text.value);
}
}
diff --git a/src/app/components/shared/_dialogs/present-comment/present-comment.component.html b/src/app/components/shared/_dialogs/present-comment/present-comment.component.html
index cdf83abb99cbf5dc3331840795a0e014162f5175..fceed936fc7842843239ba6c76b467093db82514 100644
--- a/src/app/components/shared/_dialogs/present-comment/present-comment.component.html
+++ b/src/app/components/shared/_dialogs/present-comment/present-comment.component.html
@@ -12,9 +12,7 @@
<mat-icon >close</mat-icon>
</button>
<div id="comment">
- <p>
- {{body}}
- </p>
+ <markdown [data]="body"></markdown>
</div>
<div class="visually-hidden">
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index d70d63185560555058b349c3210407d10f4cbfa9..d816a2174eb6350983e933857c740dafa3509295 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -269,7 +269,9 @@ export class CommentListComponent implements OnInit, OnDestroy {
openCreateDialog(): void {
const dialogRef = this.dialog.open(CreateCommentComponent, {
- width: '400px'
+ width: '900px',
+ maxWidth: 'calc( 100% - 50px )',
+ maxHeight: 'calc( 100vh - 50px )'
});
dialogRef.componentInstance.user = this.user;
dialogRef.componentInstance.roomId = this.roomId;
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index efa4e0f1a1c76df86eff2809588bfdc20925e66e..1aa45a5afdbb09f68b23809ee26cde908e5ab2f6 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -65,8 +65,13 @@
</button>
</div>
<div fxLayout="row">
- <div class="body click" (click)="openPresentDialog(comment)" tabindex="0" attr.aria-labelledby="comment-{{ comment.id }}">
- <span aria-hidden="true">{{ comment.body.trim() }}</span>
+ <div class="body click" (click)="openPresentDialog(comment)" style="width:100%;"
+ tabindex="0" attr.aria-labelledby="comment-{{ comment.id }}">
+ <ars-row #commentBody>
+ <ars-row #commentBodyInner>
+ <markdown [data]="comment.body"></markdown>
+ </ars-row>
+ </ars-row>
<span id="comment-{{ comment.id }}" class="visually-hidden" aria-hidden="true">{{ 'comment-page.comment' | translate: {
time: (language === 'de' ? (comment.timestamp | date: ' HH:mm ') : (comment.timestamp | date: 'h:mm a')),
votes: comment.score === 1 ? ('comment-page.a11y-text_textForOneVote' | translate) : comment.score + ('comment-page.a11y-text_textForVotes' | translate),
@@ -78,7 +83,6 @@
}
}}</span>
</div>
- <span class="fill-remaining-space click" (click)="openPresentDialog(comment)"></span>
<div fxLayout="column" *ngIf="isStudent" [ngClass]="{ '1': 'voteUp', '-1': 'voteDown', '0': 'reset'}[currentVote]">
<button mat-icon-button (click)="voteUp(comment)" matTooltip="{{ 'comment-page.vote-up' | translate }}"
tabindex="0" attr.aria-labelledby="comment_vote_up{{ comment.id }}">
@@ -94,6 +98,15 @@
<span class="scoreCreator">{{comment.score}}</span>
</div>
</div>
+ <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)"
*ngIf="comment.tag && comment.tag !== ''" class="comment-tags">
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 1b524e1791161998282a6c2dbb4067d9d5a836c4..bcf816347d0cb27b64f1e2dba90b7487a779d597 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -67,7 +67,6 @@ mat-card-content > :first-child {
min-height: 100px;
text-align: start;
font-size: 140%;
- max-height: 120px;
overflow: auto;
color: var(--on-surface);
white-space: pre-line;
@@ -122,6 +121,10 @@ user.role
color: var(--on-surface);
}
+.commentExpanderButton {
+ color: var(--on-surface);
+}
+
.user-icon {
margin-right: 5px;
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index 578a12d642e2ac881a753ef6b753d075c3244900..40af32129f1ac6537698750352e440f9e51ed6a3 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 } 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';
@@ -16,6 +16,7 @@ import { DeleteCommentComponent } from '../../creator/_dialogs/delete-comment/de
import { CorrectWrong } from '../../../models/correct-wrong.enum';
import { UserRole } from '../../../models/user-roles.enum';
import { Rescale } from '../../../models/rescale';
+import { RowComponent } from '../../../../../projects/ars/src/lib/components/layout/frame/row/row.component';
@Component({
selector: 'app-comment',
@@ -30,7 +31,10 @@ import { Rescale } from '../../../models/rescale';
]
})
-export class CommentComponent implements OnInit {
+export class CommentComponent implements OnInit, AfterViewInit {
+
+ static COMMENT_MAX_HEIGHT = 200;
+
@Input() comment: Comment;
@Input() moderator: boolean;
@Input() userRole: UserRole;
@@ -46,6 +50,11 @@ export class CommentComponent implements OnInit {
currentVote: string;
slideAnimationState = 'hidden';
roleString: string;
+ @ViewChild('commentBody', { static: true })commentBody: RowComponent;
+ @ViewChild('commentBodyInner', { static: true })commentBodyInner: RowComponent;
+ @ViewChild('commentExpander', { static: true })commentExpander: RowComponent;
+ isExpanded = false;
+ isExpandable = false;
constructor(protected authenticationService: AuthenticationService,
private route: ActivatedRoute,
@@ -83,6 +92,27 @@ export class CommentComponent implements OnInit {
this.inAnswerView = !this.router.url.includes('comments');
}
+ ngAfterViewInit(): void {
+ this.isExpandable = this.commentBody.getRenderedHeight() > CommentComponent.COMMENT_MAX_HEIGHT;
+ if (!this.isExpandable) {
+ this.commentExpander.ref.nativeElement.style.display = 'none';
+ } else {
+ this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
+ this.commentBody.setOverflow('hidden');
+ }
+ }
+
+ toggleExpand(evt: MouseEvent) {
+ this.isExpanded = !this.isExpanded;
+ if (this.isExpanded) {
+ this.commentBody.setPx(this.commentBodyInner.getRenderedHeight());
+ this.commentBody.setOverflow('visible');
+ } else {
+ this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
+ this.commentBody.setOverflow('hidden');
+ }
+ }
+
changeSlideState(): void {
this.slideAnimationState = 'visible';
}
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 04f48319c9ef416ada4891345e870cba8a1c821a..39f7b2f6e8fda7569bcb456474b5ae959eb19878 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -51,7 +51,7 @@ export class FooterComponent implements OnInit {
ngOnInit() {
this.deviceType = localStorage.getItem('deviceType');
- if (!this.themeService.getTheme()['source']['_value']) {
+ if (!this.themeService.getThemeByKey(this.themeClass) || !this.themeService.getTheme()['source']['_value']) {
if (this.deviceType === 'mobile') {
this.themeService.activate('dark');
this.themeClass = 'dark';
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 891b14fac670328f6a27ccee024002cd64121ebd..79adbe89d57c60c116147b52035637de8156cfe9 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -110,7 +110,11 @@
"send-description": "Frage abschicken",
"tag": "Kategorie",
"vote-down": "Frage abwerten",
- "vote-up": "Frage aufwerten"
+ "vote-up": "Frage aufwerten",
+ "write-comment": "Schreiben",
+ "preview-comment": "Vorschau",
+ "show-more": "mehr ansehen",
+ "show-less": "weniger anzeigen"
},
"content": {
"abort": "Abbrechen",
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 492c433e03162d7db51f70cab8e53f40d614900b..9c41d4318900b8a62b4202efdeb7db91d409dba8 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -111,7 +111,11 @@
"send-description": "Send question",
"tag": "Tag",
"vote-down": "Vote down",
- "vote-up": "Vote up"
+ "vote-up": "Vote up",
+ "write-comment": "Write",
+ "preview-comment": "Preview",
+ "show-more": "show more",
+ "show-less": "show less"
},
"content": {
"abort": "Abort",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 73389a6c9c79a0d7d294fe9c397104470621f3df..37bb92aa9eb4793c004dd26b57df65b2d7bceb34 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -93,7 +93,11 @@
"send-description": "Frage abschicken",
"tag": "Kategorie",
"vote-down": "Frage abwerten",
- "vote-up": "Frage aufwerten"
+ "vote-up": "Frage aufwerten",
+ "write-comment": "Schreiben",
+ "preview-comment": "Vorschau",
+ "show-more": "mehr ansehen",
+ "show-less": "weniger anzeigen"
},
"home-page": {
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index fcd031005dc290d9b11310c8e463de120d3cca1a..39f95fdeb4e955928d97ac14f2bb4418ae90c67d 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -93,7 +93,11 @@
"send-description": "Send question",
"tag": "Tag",
"vote-down": "Vote down",
- "vote-up": "Vote up"
+ "vote-up": "Vote up",
+ "write-comment": "Write",
+ "preview-comment": "Preview",
+ "show-more": "show more",
+ "show-less": "show less"
},
"home-page": {
"exactly-8": "A session key is a combination of exactly 8 digits.",