src/app/shared/comments/comments.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<app-collapsible
  (appCollapsedChange)="$event ? appCommentsToShow = 5 : null"
  [appCollapsed]="appCollapsed"
  [appTitle]="('comments.title' | translate) + ' (' + appComments?.length +')'">

  <div class="comments">

    <div *ngIf="appComments?.length > 0" class="comments--list">

      <div *ngIf="appCommentsToShow < appComments?.length"
           class="comments--list--buttons comments--list--buttons---size">

        <button (click)="showMore()"
                *ngIf="appCommentsToShow + 5 < appComments?.length"
                class="comments--list--buttons--button openk-button">
          {{"comments.showPrevious" | translate}}
        </button>
        <button (click)="showMore(true)"
                class="openk-button">
          {{"comments.showAll" | translate}}
        </button>

      </div>

      <div *ngFor="let comment of appComments?.slice(-appCommentsToShow)"
           class="comments--list--comment">

        <div class="comments--list--comment--header">
          <span class="comments--list--comment--header--author">{{comment.firstName + " " + comment.lastName}}</span>
          <span class="comments--list--comment--header--time">
            {{(comment.timestamp | appMomentPipe).format(timeDisplayFormat)}}
          </span>
          <button (click)="onDelete(comment.id)" *ngIf="comment.editable"
                  class="comments--list--comment--header--button"
                  mat-icon-button>
            <mat-icon class="comments--list--comment--header--button--icon">delete_forever</mat-icon>
          </button>
        </div>
        <div class="comments--list--comment--text">
          <ng-container *ngFor="let block of comment?.text?.split('\n')">
            {{block}} <br>
          </ng-container>
        </div>

      </div>
    </div>
    <div class="comments--newcomment">

    <textarea #textAreaElement (input)="onInput()"
              [placeholder]="'comments.placeholder' | translate"
              class="openk-textarea comments--newcomment--textfield"
              [value]="''"
              rows="1">
    </textarea>

      <div *ngIf="hasInputSomething" class="comments--newcomment--textfield--buttons">
        <button #test (click)="clear()"
                class="comments--newcomment--textfield--buttons--first-button openk-button openk-danger">
          {{"shared.actions.delete" | translate}}
        </button>
        <button (click)="onSave()"
                class="openk-button openk-success">{{"shared.actions.save" | translate}}</button>
      </div>
    </div>

  </div>

</app-collapsible>