# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1493759498 -3600
# Node ID ce44d0fbda3b8d1cab88cec9c508c9a8037ab4c0
# Parent  74f36b4777ff17e0ab9821a3d3f2017a0ac98a4f# Parent  080216cdff3f6e5e8afe0a63ec2a3cf6984a7320
Merge branch 'dev/custom-material-theme' of github.com:piper-audio/ugly-duckling into cc-vertical-scale

diff -r 74f36b4777ff -r ce44d0fbda3b .angular-cli.json
--- a/.angular-cli.json	Tue May 02 21:31:19 2017 +0100
+++ b/.angular-cli.json	Tue May 02 22:11:38 2017 +0100
@@ -20,7 +20,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "ugly",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "ugly-aesthetics.scss"
       ],
       "scripts": [
         "../node_modules/requirejs/require.js"
diff -r 74f36b4777ff -r ce44d0fbda3b package.json
--- a/package.json	Tue May 02 21:31:19 2017 +0100
+++ b/package.json	Tue May 02 22:11:38 2017 +0100
@@ -49,6 +49,7 @@
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "node-sass": "^4.5.2",
     "node-watch": "^0.4.1",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
diff -r 74f36b4777ff -r ce44d0fbda3b src/app/feature-extraction-menu/feature-extraction-menu.component.html
--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Tue May 02 21:31:19 2017 +0100
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Tue May 02 22:11:38 2017 +0100
@@ -11,7 +11,7 @@
   <p>
     <button md-raised-button
             color="primary"
-            (click)="extract(extractorSelect.selected.value)"
+            (click)="extract(getFirstSelectedItemOrEmpty(extractorSelect))"
             [disabled]="disabled">Extract</button>
   </p>
   <p>
diff -r 74f36b4777ff -r ce44d0fbda3b src/app/feature-extraction-menu/feature-extraction-menu.component.ts
--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Tue May 02 21:31:19 2017 +0100
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Tue May 02 22:11:38 2017 +0100
@@ -11,6 +11,7 @@
 } from '../services/feature-extraction/feature-extraction.service';
 import {ListResponse} from 'piper';
 import {Subscription} from 'rxjs/Subscription';
+import {MdSelect} from '@angular/material';
 
 export interface ExtractorOutputInfo {
   extractorKey: string;
@@ -70,6 +71,14 @@
     };
   }
 
+  private getFirstSelectedItemOrEmpty(select: MdSelect): string {
+    const selected = select.selected;
+    if (selected) {
+      return selected instanceof Array ? selected[0].value : selected.value;
+    }
+    return '';
+  }
+
   ngOnInit() {
     this.piperService.list().then(this.populateExtractors);
     this.librariesUpdatedSubscription =
diff -r 74f36b4777ff -r ce44d0fbda3b src/styles.css
--- a/src/styles.css	Tue May 02 21:31:19 2017 +0100
+++ b/src/styles.css	Tue May 02 22:11:38 2017 +0100
@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
 @font-face {
   font-family: 'Material Icons';
@@ -49,10 +48,3 @@
   height: 100%;
 }
 
-/* Small change to this colour to fit better with colours we use in
-   visualisations */
-
-.mat-toolbar, .mat-toolbar.mat-primary {
-  background: #0868ac;
-}
-
diff -r 74f36b4777ff -r ce44d0fbda3b src/ugly-aesthetics.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ugly-aesthetics.scss	Tue May 02 22:11:38 2017 +0100
@@ -0,0 +1,24 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$candy-app-primary: mat-palette($mat-indigo);
+$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$candy-app-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($candy-app-theme);
diff -r 74f36b4777ff -r ce44d0fbda3b yarn.lock
--- a/yarn.lock	Tue May 02 21:31:19 2017 +0100
+++ b/yarn.lock	Tue May 02 22:11:38 2017 +0100
@@ -3721,7 +3721,7 @@
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.3.0:
+node-sass, node-sass@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
   dependencies: