view src/app/app.component.html @ 394:f45a916eb5b1

Use the cross hair layer for notes, tracks and curve. This involved bodging in unit to ShapedFeatureData, which isn't particularly easy to do because this isn't an encapsulated type. Need to come back to improving this, as I am monkey-patching a unit property onto Arrays etc.

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

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

      <ugly-playback-control></ugly-playback-control>
      <ugly-recording-control
        (finishedRecording)="onFileOpened($event)"
      ></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)"
      ></ugly-audio-file-open>
      <!-- menu opens when trigger button is clicked -->
      <button md-icon-button (click)="sidenav.toggle()">
        <md-icon>extension</md-icon>
      </button>
    </md-toolbar>
  </div>

  <div class="ugly-content">
    <md-sidenav-container>
      <md-sidenav #sidenav align="start" mode="over">
        <ugly-feature-extraction-menu
          (requestOutput)="extractFeatures($event)"
          [disabled]="!canExtract">
        </ugly-feature-extraction-menu>
      </md-sidenav>
      <ugly-notebook-feed
        [analyses]="analyses.toIterable()"
        [rootAudioUri]="rootAudioItem.uri"
        [onSeek]="onSeek"></ugly-notebook-feed>
    </md-sidenav-container>
  </div>
</div>