comment-list.component.html

<div fxLayout="row" id="search-container">
  <mat-label fxLayoutAlign="center center">
    <mat-icon class="search-icon">search</mat-icon>
  </mat-label>
  <input #searchBox placeholder="{{ 'comment-list.search' | translate }}"
         (input)="searchComments(searchBox.value)">
  <button mat-icon-button class="searchBarButton close" *ngIf="searchBox.value"
          (click)="hideCommentsList=false; searchBox.value=''">
    <mat-icon>close</mat-icon>
  </button>

  <span class="fill-remaining-space"></span>

  <div class="button-bar" fxLayoutAlign="center center">
    <div *ngIf="comments && comments.length > 0">
      <button mat-mini-fab color="primary" class="comment-counter" *ngIf="(!filteredComments) || (comments.length === filteredComments.length)">{{comments.length}}</button>
      <button mat-mini-fab color="secondary" class="comment-counter" *ngIf="(filteredComments) && (comments.length > filteredComments.length)">{{filteredComments.length}}</button>
    </div>

    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments && comments.length > 0"
            [matMenuTriggerFor]="filterMenu" matTooltip="{{ 'comment-list.filter-comments' | translate }}">
      <mat-icon class="searchBarIcon">filter_list</mat-icon>
    </button>

    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments && comments.length > 0"
            [matMenuTriggerFor]="sortMenu" matTooltip="{{ 'comment-list.sort-comments' | translate }}">
      <mat-icon class="searchBarIcon">sort</mat-icon>
    </button>

    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value" (click)="openCreateDialog()"
            matTooltip="{{ 'comment-list.add-comment' | translate }}">
      <mat-icon class="searchBarIcon">add_circle</mat-icon>
    </button>
  </div>

  <mat-menu #sortMenu="matMenu" xPosition="before">
      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(votedesc)">
        <mat-icon>arrow_upwards</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(voteasc)">
        <mat-icon>arrow_downwards</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort === timedesc ? timeasc : timedesc)">
        <mat-icon>access_time</mat-icon>
      </button>
  </mat-menu>

  <mat-menu #filterMenu="matMenu" xPosition="before">
    <div>
      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(correct)">
        <mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(favorite)">
        <mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">favorite</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(read)">
        <mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">visibility</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(unread)">
        <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort)">
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </mat-menu>
</div>

<div *ngIf="!isLoading">
<app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
</div>

<div *ngIf="comments && comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
  <h4>{{ 'comment-page.no-comments' | translate }}</h4>
</div>