comment.component.html

<mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
                                        '': !comment.highlighted}" [@slide]>
  <div fxLayout="column">
    <div fxLayout="row">
      <span class="fill-remaining-space"></span>
      <div fxLayout="row" class="date">
        <div *ngIf="language === 'de'; else englishDate">
          {{comment.timestamp | date: ' HH:mm '}}
        </div>
        <ng-template #englishDate>
          {{comment.timestamp | date: 'h:mm a'}}
        </ng-template>
      </div>
      <button mat-icon-button [disabled]="isStudent" (click)="setCorrect(comment)"
              matTooltip="{{ 'comment-page.correct' | translate }}">
        <mat-icon [ngClass]="{'correct-icon' : comment.correct, 'not-marked' : !comment.correct}">check_circle</mat-icon>
      </button>
      <button mat-icon-button [disabled]="isStudent" (click)="setFavorite(comment)"
              matTooltip="{{ 'comment-page.favorite' | translate }}">
        <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}">favorite</mat-icon>
      </button>
      <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
              matTooltip="{{ 'comment-page.read' | translate }}">
        <mat-icon [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}">visibility
        </mat-icon>
      </button>
    </div>
    <div fxLayout="row">
      <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
      <span class="fill-remaining-space" (click)="openPresentDialog(comment)"></span>
      <div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState"
           (@rubberBand.done)="resetAnimationState()">
        <button mat-icon-button (click)="voteUp(comment)">
          <mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
        </button>
        <h2>{{comment.score}}</h2>
        <button mat-icon-button (click)="voteDown(comment)">
          <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
        </button>
      </div>
    </div>
  </div>
</mat-card>