ipsos-components/tools/screenshot-test/src/app/result/result.component.html

Material Design components for Angular

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <mat-icon (click)="toggleCollapse()">{{collapseIcon}}</mat-icon>
      {{testName}}
    </mat-card-title>
    <mat-card-subtitle [ngClass]="resultText.toLowerCase()">{{resultText}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content *ngIf="!collapse">
    <div class="images-section" [ngClass]="mode" [class.flipping]="flipping">
      <div class="image-section test-section" >
        <div class="image-title">Test image</div>
        <div><img [src]="testImageUrl"/></div>
      </div>
      <div class="image-section diff-section" >
        <div class="image-title">Diff image</div>
        <div><img [src]="diffImageUrl"/></div>
      </div>
      <div class="image-section gold-section">
        <div class="image-title">Reference image</div>
        <div><img [src]="goldImageUrl"/></div>
      </div>
    </div>
  </mat-card-content>
  <mat-card-actions>
    <mat-button-toggle-group [(ngModel)]="mode" class="mode-section">
      <mat-button-toggle value="diff">
        Diff
      </mat-button-toggle>
      <mat-button-toggle value="flip">
        Flip
      </mat-button-toggle>
      <mat-button-toggle value="side">
        Side by side
      </mat-button-toggle>
    </mat-button-toggle-group>
    <button mat-button color="primary" (click)="flip()" *ngIf="mode === 'flip'">Flip</button>
  </mat-card-actions>
</mat-card>