view src/app/app.component.html @ 505:cf4a17efb5d4

Update angular deps, fix material api changes. (currently running an earlier TypeScript version due to restrictions from angular)

<div class="ugly-container">
  <div class="ugly-header">
    <mat-toolbar color="primary">
      <mat-icon svgIcon="duck"></mat-icon>

      <span class="ugly-toolbar-filler"></span>

      <ugly-playback-control></ugly-playback-control>
      <ugly-recording-control
        (finishedRecording)="onFileOpened($event, true); tray.close()"
      ></ugly-recording-control>

      <!-- This fills the remaining space of the current row -->
      <span class="ugly-toolbar-filler"></span>


      <ugly-audio-file-open
        (fileOpened)="onFileOpened($event); tray.close()"
      ></ugly-audio-file-open>
      <button mat-icon-button (click)="analyses.stepBack()">
        <mat-icon>undo</mat-icon>
      </button>
      <button mat-icon-button (click)="analyses.stepForward()">
        <mat-icon>redo</mat-icon>
      </button>
      <button mat-icon-button (click)="tray.toggle()">
        <mat-icon>extension</mat-icon>
      </button>
    </mat-toolbar>
  </div>

  <ugly-action-tray #tray>
    <ugly-feature-extraction-menu
      (requestOutput)="tray.close(); extractFeatures($event)"
      [disabled]="!canExtract"
    >
    </ugly-feature-extraction-menu>
  </ugly-action-tray>
  <div class="ugly-content">
    <ugly-notebook-feed
      (removeItem)="removeItem($event)"
      [analyses]="analyses.toIterable()"
      [onSeek]="onSeek"></ugly-notebook-feed>
  </div>
</div>