upgrade angular-material to v0.10.0

- replace md-select to md-menu
- refactoring

Author: micrum

.editorconfig

@@ -11,7 +11,7 @@
     "angular-touch": "~1.3.4",
     "angular-sanitize": "~1.3.4",
     "angular-ui-router": "~0.2.13",
-    "angular-material": "~0.8.3",
+    "angular-material": "~0.10.0",
     "angular": "~1.3.4",
     "angular-google-chart": "~0.0.11"
   },

bower.json

@@ -58,8 +58,13 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
     $mdThemingProvider.theme('red', 'default')
       .primaryPalette('red');
 
+    $mdThemingProvider.theme('custom', 'default')
+      .primaryPalette('defaultPrimary', {
+        'hue-1': '50'
+    });
+
     $mdThemingProvider.definePalette('defaultPrimary', {
-      '50':  '#E75753',
+      '50':  '#FFFFFF',
       '100': '#E75753',
       '200': '#E75753',
       '300': '#E75753',
@@ -72,12 +77,7 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
       'A100': '#E75753',
       'A200': '#E75753',
       'A400': '#E75753',
-      'A700': '#E75753',
-      'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
-                                          // on this palette should be dark or light
-      'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
-        '200', '300', '400', 'A100'],
-      'contrastLightColors': undefined    // could also specify this if default was 'dark'
+      'A700': '#E75753'
     });
 
     $mdIconProvider

src/app/index.js

@@ -28,9 +28,7 @@ $accent-color: #E75753;
 
 
 // VARIABLES
-$left-sidenav-width: 120px;
-
-$font-weight-normal: 400;
+$left-sidenav-width: 110px;
 
 
 // PANEL-WIDGET
@@ -53,7 +51,7 @@ $font-weight-normal: 400;
   position: relative;
 
   &-content {
-    height: 500px;
+    height: 80vh;
   }
 }
 
@@ -79,17 +77,14 @@ body {
   color: $text-color;
 }
 
-.sidenav-button {
-  text-transform: none;
-}
-
-h1 {
-  color: $accent-color;
-  font-weight: $font-weight-normal;
-}
-
 
 // CHARTS
 .donut-chart-title{
   text-align: center;
 }
+
+
+// UTILS
+.capitalize {
+  text-transform: capitalize;
+}

src/app/stylesheets/_custom.scss

@@ -39,12 +39,12 @@ <h2 layout-padding>Memory load</h2>
 </md-grid-list>
 
 <div layout-gt-md="row">
-  <panel-widget flex title="Information Panel" template="app/views/partials/infoPanel.html" theme="white"></panel-widget>
-  <panel-widget flex title="Usage Stats" template="app/views/partials/usage.html" theme="white"></panel-widget>
-  <panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true" theme="white"></panel-widget>
+  <panel-widget flex title="Information Panel" template="app/views/partials/infoPanel.html"></panel-widget>
+  <panel-widget flex title="Usage Stats" template="app/views/partials/usage.html"></panel-widget>
+  <panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true"></panel-widget>
 </div>
 
 <div layout-gt-md="row">
-  <panel-widget flex title="Performance" template="app/views/partials/progress.html" options="true" theme="white"></panel-widget>
-  <panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html" theme="white"></panel-widget>
+  <panel-widget flex title="Performance" template="app/views/partials/progress.html" options="true"></panel-widget>
+  <panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html"></panel-widget>
 </div>

src/app/views/dashboard.html

@@ -1,37 +1,27 @@
 <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left"
             class="md-whiteframe-z2 md-sidenav-left">
-  <md-toolbar md-theme="white">
-    <md-button  layout="row" layout-align="center center" class="md-toolbar-tools" href="https://github.com/flatlogic/angular-material-dashboard">
+  <md-toolbar md-theme="custom" class="md-hue-1 md-whiteframe-z2">
+    <md-button layout="row" layout-align="center center" class="md-toolbar-tools md-accent"
+               href="https://github.com/flatlogic/angular-material-dashboard">
       <h1>AMD</h1>
     </md-button>
   </md-toolbar>
-  <md-list>
-    <md-item ng-repeat="item in vm.menuItems">
-      <md-item-content layout="row">
-        <md-button layout="column" layout-align="center center" flex ng-click="vm.selectItem(item)"
-                   ui-sref-active="md-accent" ui-sref="{{item.sref}}" class="sidenav-button">
+      <md-button ng-repeat-start="item in vm.menuItems" layout="column" layout-align="center center"
+                 flex class="capitalize" ng-click="vm.selectItem(item)"
+                 ui-sref-active="md-accent" ui-sref="{{item.sref}}">
           <div hide-sm hide-md class="md-tile-content">
-            <md-icon md-svg-icon="{{item.icon}}"></md-icon>
+              <md-icon md-svg-icon="{{item.icon}}"></md-icon>
           </div>
           <div class="md-tile-content">
-            {{item.name}}
+              {{item.name}}
           </div>
-        </md-button>
-      </md-item-content>
-      <md-divider></md-divider>
-    </md-item>
-
-    <md-divider hide-gt-md></md-divider>
-    <md-item hide-gt-md>
-      <md-item-content>
-        <md-button flex ng-click="vm.showActions($event)">
+      </md-button>
+      <md-divider ng-repeat-end></md-divider>
+      <md-button hide-gt-md flex ng-click="vm.showActions($event)">
           <div layout="row" class="md-tile-content">
             Actions
           </div>
-        </md-button>
-      </md-item-content>
-    </md-item>
-  </md-list>
+      </md-button>
 </md-sidenav>
 
 <div layout="column" flex>
@@ -51,11 +41,13 @@ <h1>AMD</h1>
   <md-toolbar class="md-accent" layout="row">
     <!-- TODO: replace md-icon to ng-src and fix images paths in build -->
     <md-icon hide-sm hide-md md-svg-icon="user"></md-icon>
-
-    <md-select hide-sm hide-md placeholder="Admin" ng-model="admin">
-      <md-option ui-sref="home.profile" value="1">Profile</md-option>
-      <md-option ng-click="vm.showActions($event)" value="2">Actions</md-option>
-    </md-select>
+    <md-menu hide-sm hide-md>
+      <md-button class="capitalize" ng-click="$mdOpenMenu()" aria-label="Open menu">Richard Feynman</md-button>
+      <md-menu-content>
+        <md-menu-item><md-button ui-sref="home.profile">Profile</md-button></md-menu-item>
+        <md-menu-item><md-button ng-click="vm.showActions($event)">Actions</md-button></md-menu-item>
+      </md-menu-content>
+    </md-menu>
   </md-toolbar>
 
   <section>

src/app/views/main.html

@@ -9,7 +9,7 @@ angular.module('app')
       scope: { title: '@', template: '@', options: '@' },
       template: '' +
       '<section layout-margin class="md-whiteframe-z1">' +
-      '  <md-toolbar md-theme="white" class="panel-widget">' +
+      '  <md-toolbar md-theme="custom" class="md-hue-1 panel-widget">' +
       '    <div class="md-toolbar-tools">' +
       '      <h3>{{title}}</h3>' +
       '      <span flex></span>' +