feat(theme): Custom material theme

.angular-cli.json

@@ -21,8 +21,9 @@
       "mobile": true,
       "styles": [
         "../node_modules/openlayers/dist/ol.css",
-        "css/styles.styl",
-        "css/material-icons.styl"
+        "css/material-theme.scss",
+        "css/material-icons.styl",
+        "css/styles.styl"
       ],
       "scripts": [
         "../node_modules/openlayers/dist/ol.js"

package.json

@@ -47,16 +47,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "2.4.5",
-    "@angular/compiler": "2.4.5",
-    "@angular/compiler-cli": "2.4.5",
-    "@angular/core": "2.4.5",
-    "@angular/forms": "2.4.5",
-    "@angular/http": "2.4.5",
-    "@angular/material": "2.0.0-beta.1",
-    "@angular/platform-browser": "2.4.5",
-    "@angular/platform-browser-dynamic": "2.4.5",
-    "@angular/platform-server": "2.4.5",
+    "@angular/common": "^2.4.5",
+    "@angular/compiler": "^2.4.5",
+    "@angular/compiler-cli": "^2.4.5",
+    "@angular/core": "^2.4.5",
+    "@angular/forms": "^2.4.5",
+    "@angular/http": "^2.4.5",
+    "@angular/material": "^2.0.0-beta.1",
+    "@angular/platform-browser": "^2.4.5",
+    "@angular/platform-browser-dynamic": "^2.4.5",
+    "@angular/platform-server": "^2.4.5",
     "@angular/router": "3.4.5",
     "@ngrx/core": "^1.2.0",
     "@ngrx/store": "^2.2.1",

src/app/app.component.styl

@@ -11,21 +11,32 @@ main {
   transition: 0.5s;
 }
 
-:host >>> .md-input-element {
+:host >>> .mat-input-element {
   padding: 0 $igo-padding;
 }
 
-:host >>> .md-input-placeholder {
-  font-style: italic;
+:host >>> .mat-input-wrapper {
+  padding: 0;
+}
+
+:host >>> .mat-input-placeholder-wrapper {
   top: 10px;
   left: $igo-padding;
   right: $igo-padding;
-  color: $igo-border-color;
+  padding: 0;
 }
 
-:host >>> .md-input-placeholder {
+:host >>> .mat-input-placeholder {
   font-style: italic;
-  top: 10px;
+  color: $igo-border-color;
+}
+
+:host >>> .mat-input-underline {
+  border-color: $igo-border-color;
+}
+
+:host >>> .mat-button-ripple-round {
+  border-radius: 0;
 }
 
 /*--- Spinner ---*/

src/app/core/spinner/spinner.component.styl

@@ -26,7 +26,7 @@ md-progress-circle {
   height: $igo-spinner-size - $igo-spinner-border-width;
   width: $igo-spinner-size - $igo-spinner-border-width;
   border-radius: 50%;
-  border: $igo-spinner-border-width solid $igo-tertiary-color;
+  border: $igo-spinner-border-width solid $igo-background-color;
   position: absolute;
   top: $igo-spinner-top-left;
   left: $igo-spinner-top-left;

src/app/pages/navigator/navigator.component.styl

@@ -17,7 +17,7 @@ md-sidenav-container {
 // and the sidenav appears below our backdrop.
 // The "side" mode is required to prevent
 // the sidenav from focusing a random button on open.
-:host >>> md-sidenav.md-sidenav-side {
+:host >>> md-sidenav.mat-sidenav-side {
   z-index: 3 !important;
 }
 
@@ -30,7 +30,7 @@ md-sidenav-container {
 }
 
 :host >>> igo-sidenav .igo-sidenav {
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
 :host >>> igo-sidenav .igo-sidenav-content {
@@ -56,7 +56,7 @@ md-sidenav-container {
   }
 }
 
-#igo-menu-button:hover .md-button-focus-overlay {
+#igo-menu-button:hover .mat-button-focus-overlay {
   background-color: $igo-primary-color-hover;
 }
 
@@ -79,5 +79,5 @@ md-sidenav-container {
   bottom: 0px;
   width: 100%;
   max-height: "calc(100% - %s)" % ($igo-sidenav-margin-top);
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }

src/app/search/search-bar/search-bar.component.html

@@ -1,7 +1,7 @@
 <md-input-container class="igo-search-bar">
   <input
     #input
-    md-input
+    mdInput
     [placeholder]="'Search for an address or a place' | translate"
     (keyup)="keyup($event)"
     [ngModel]="term">

src/app/search/search-bar/search-bar.component.styl

@@ -1,19 +1,19 @@
 @require '../../../css/theme.styl';
 
 .igo-search-bar {
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
-:host >>> .md-input-wrapper {
+:host >>> .mat-input-wrapper {
   margin: 0;
 }
 
-:host >>> label.md-input-placeholder.md-float:not(.md-empty),
-:host >>> label.md-input-placeholder.md-float.md-focused {
+:host >>> label.mat-input-placeholder.mat-float:not(.mat-empty),
+:host >>> label.mat-input-placeholder.mat-float.mat-focused {
   display: none;
 }
 
-:host >>> .md-input-element {
+:host >>> .mat-input-element {
   padding-right: $igo-icon-button-width;
 }
 

src/app/search/search-bar/search-bar.component.ts

@@ -18,12 +18,11 @@ import { AppStore } from '../../app.store';
   styleUrls: ['./search-bar.component.styl']
 })
 export class SearchBarComponent implements OnInit {
-  searchTool: Tool;
   @Output('key') key = new EventEmitter<string>();
   @ViewChild('input') input: ElementRef;
 
   term?: string;
-
+  private searchTool: Tool;
   private searchTermsStream = new Subject<string>();
 
   constructor(private store: Store<AppStore>,
@@ -50,6 +49,7 @@ export class SearchBarComponent implements OnInit {
     this.store
       .select(s => s.selectedResult)
       .subscribe((result: SearchResult) => {
+        this.blur();
         this.term = result ? result.title : undefined;
       });
   }
@@ -86,6 +86,10 @@ export class SearchBarComponent implements OnInit {
     this.searchTermsStream.next(this.term);
   }
 
+  blur() {
+    this.input.nativeElement.blur();
+  }
+
   focus() {
     this.input.nativeElement.focus();
   }

src/app/shared/list/list.component.styl

@@ -4,8 +4,9 @@ md-list {
   padding-top: 0;
 }
 
-:host >>> md-list-item .md-list-item {
-  height: 46px !important;
+:host >>> .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content,
+:host >>> .mat-nav-list .mat-list-item.mat-list-item-avatar .mat-list-item-content {
+  height: 46px;
 }
 
 :host >>> [igolistitem] md-list-item [md-list-avatar] {

src/app/shared/sidenav/sidenav.component.styl

@@ -1,5 +1,5 @@
 @require '../../../css/theme.styl';
 
 md-sidenav {
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }

src/css/material-theme.scss

@@ -0,0 +1,12 @@
+@import '~@angular/material/core/theming/all-theme';
+
+@include mat-core();
+
+$igo-app-primary: mat-palette($mat-blue, 700);
+$igo-app-accent: mat-palette($mat-grey, 500);
+
+$igo-app-warn: mat-palette($mat-red);
+
+$igo-app-theme: mat-light-theme($igo-app-primary, $igo-app-accent, $igo-app-warn);
+
+@include angular-material-theme($igo-app-theme);

src/css/styles.styl

@@ -17,30 +17,19 @@ html, body {
   box-sizing: border-box;
 }
 
-
-@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
-
 @require './theme.styl';
 
 input {
   height: $igo-icon-button-height;
 }
 
-.md-input-underline {
-  border-color: $igo-border-color;
-}
-
-.md-ripple-foreground {
-  display: none;
-}
-
-[md-button]:hover.igo-primary .md-button-focus-overlay,
-[md-icon-button]:hover.igo-primary .md-button-focus-overlay {
+[mdbutton]:hover.igo-primary .mat-button-focus-overlay,
+[md-icon-button]:hover.igo-primary .mat-button-focus-overlay {
   background-color: $igo-primary-color-hover;
 }
 
-[md-button]:hover.igo-secondary .md-button-focus-overlay,
-[md-icon-button]:hover.igo-secondary .md-button-focus-overlay {
+[mdbutton]:hover.igo-secondary .mat-button-focus-overlay,
+[md-icon-button]:hover.igo-secondary .mat-button-focus-overlay {
   background-color: $igo-secondary-color-hover;
 }
 
@@ -58,12 +47,12 @@ button[md-icon-button].igo-icon-button {
 
 button[md-icon-button].igo-primary {
   color: $igo-primary-color;
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
 button[md-icon-button].igo-secondary {
   color: $igo-secondary-color;
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
 button[md-icon-button].igo-icon-button {
@@ -72,16 +61,16 @@ button[md-icon-button].igo-icon-button {
 
 button[md-icon-button].igo-primary {
   color: $igo-primary-color;
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
 button[md-icon-button].igo-secondary {
   color: $igo-secondary-color;
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
 button {
-  background-color: $igo-tertiary-color;
+  background-color: $igo-background-color;
 }
 
 table td {

src/css/theme.styl

@@ -1,43 +1,22 @@
-$igo-icon-button-width = 40px;
-$igo-icon-button-height = 40px;
-
 $igo-primary-font-color = rgb(0, 0, 0);
 $igo-secondary-font-color = rgb(255, 255, 255);
 
-$igo-margin = 5px;
-
-$igo-padding = 5px;
+/* primary - ($md-blue, 500) */
+$igo-primary-color = rgb(25, 118, 210);
+$igo-primary-color-hover = rgba(25, 118, 210, 0.2);
 
-/* primary - purple */
-/*
-$igo-primary-color = rgb(103, 58, 183);
-$igo-primary-color-hover = rgba(103, 58, 183, 0.1);
-*/
+/* secondary - ($md-grey, 500) */
+$igo-secondary-color = rgb(158, 158, 158);
+$igo-secondary-color-hover = rgba(158, 158, 158, 0.1);
 
-/* primary - blue grey */
-/*
-$igo-primary-color = rgb(58,106,144);
-$igo-primary-color-hover = rgba(58,106,144, 0.1);
-*/
-$igo-primary-color = rgb(51, 102, 153);
-$igo-primary-color-hover = rgba(51, 102, 153, 0.2);
+/* background - white */
+$igo-background-color = rgb(255, 255, 255);
 
-/* secondary - light green */
-/*
-$igo-secondary-color = rgb(176,216,146);
-$igo-secondary-color-hover = rgba(176,216,146, 0.4);
-*/
-
-/* secondary - blue green */
-/*
-$igo-secondary-color = rgb(109, 184, 178);
-$igo-secondary-color-hover = rgba(109, 184, 178, 0.2);
-*/
-$igo-secondary-color = rgb(153, 153, 153);
-$igo-secondary-color-hover = rgba(153, 153, 153, 0.1);
+$igo-icon-button-width = 40px;
+$igo-icon-button-height = 40px;
 
-/* tertiary - white */
-$igo-tertiary-color = rgb(255, 255, 255);
+$igo-margin = 5px;
+$igo-padding = 5px;
 
 $igo-border-width = 1px;
 $igo-border-style = solid;