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

i18n support, remove comments

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;
   }

src/app/components/shared/_dialogs/create-comment/create-comment.component.html

-<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>

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;
+}

src/app/components/shared/_dialogs/create-comment/create-comment.component.ts

-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);
   }
 }

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">

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;

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">

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;

src/app/components/shared/comment/comment.component.ts

-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';
   }

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';

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",

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",

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": {

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.",