Commit 1d24a2c4 authored by Lukas Haase's avatar Lukas Haase Committed by Tom Käsler
Browse files

create question with markdown, create comment preview, present question markdown support

i18n support, remove comments
parent 5f23257f
......@@ -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;
}
......
<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>
......@@ -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;
}
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);
}
}
......@@ -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">
......
......@@ -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;
......
......@@ -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">
......
......@@ -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;
......
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';
}
......
......@@ -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';
......
......@@ -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",
......
......@@ -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",
......
......@@ -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": {
......
......@@ -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.",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment