annotate src/app/app.component.html @ 102:5f7896f2fad7

Playback controls and placeholder record button in the centre of the toolbar, plugin button on the right. Sidenav now overlays the content.

<md-toolbar color="primary">
  <md-icon svgIcon="duck"></md-icon>

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

  <app-playback-control></app-playback-control>
  <button md-icon-button>
    <md-icon>mic_off</md-icon>
  </button>

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


  <app-audio-file-open (fileOpened)="onFileOpened($event)"></app-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>

<md-sidenav-container>
  <md-sidenav #sidenav align="start" mode="over">
    <app-feature-extraction-menu
      (requestOutput)="extractFeatures($event)"
      [disabled]="!canExtract">
    </app-feature-extraction-menu>
  </md-sidenav>
  <app-waveform
    [audioBuffer]="audioBuffer"
    ></app-waveform>
</md-sidenav-container>