Begin to integrate angular-material (on table component)

Change-Id: I36bdb98bdc4a7406d33c64df4bd0de2d9d42ea56

app/assets/sass/temporary.scss

@@ -31,6 +31,37 @@
     padding-right: 15px;
 }
 
+// angular material component
+
+
+md-checkbox .md-icon {
+    border-color: $_color_dark_delta;
+    border-width: 1px !important;
+}
+
+md-checkbox.md-checked .md-icon {
+    .color-scheme--dark & {
+        background-color:$_color_omega;
+        color: $_color_alpha;
+    }
+
+    .color-scheme--light & {
+        background-color:$_color_omega;
+        color: $_color_omega;
+    }
+}
+
+md-checkbox.md-checked .md-icon:after {
+     .color-scheme--dark & {
+        border-color: $_color_alpha;
+    }
+
+    .color-scheme--light & {
+        border-color: $_color_alpha;
+    }
+}
+
+
 // host/service status page
 
 .data-table thead th:first-child + th {

app/components/table/table.html

@@ -1,7 +1,9 @@
 <table class="data-table" ng-controller="TableCtrl">
   <thead>
       <tr>
-        <th class="data-table__checkbox"><input type="checkbox" ng-click="onCheckChange()" ng-model="isCheckAll"></th>
+        <th class="data-table__checkbox">
+            <md-checkbox ng-model="isCheckAll" ng-change="onCheckChange()"></md-checkbox>
+        </th>
         <th ng-repeat="i in cellIndexes" class="data-table__{{cellsName[i]}}">
           {{cellsText[i]}}
           <i class="ico-up-dir"></i>
@@ -11,7 +13,9 @@
 
   <tbody class="{{entry.child_class}}" ng-repeat="(groupByKey, groupByItems) in entries | groupBy:'host_name'">
     <tr ng-repeat="entry in groupByItems | actionbarSelectFilter:actionbarFilters.activeFilter | filter:actionbarFilters.searchFilter | noRepeat:this | wrappableStyle:this">
-      <td><input type="checkbox" ng-model="entry.is_checked"></td>
+      <td>
+        <md-checkbox ng-model="entry.is_checked"></md-checkbox>
+      </td>
       <td bansho-cell cell-name="{{cell}}" ng-repeat="cell in cellsName"></td>
     </tr>
   </tbody>

app/components/table/table.js

@@ -9,7 +9,8 @@ angular.module('bansho.table', ['bansho.surveil',
                                  'bansho.table.cell_status_service_check',
                                  'bansho.table.cell_status_last_check',
                                  'bansho.table.cell_status_host_address',
-                                 'bansho.table.cell_status_host_status'
+                                 'bansho.table.cell_status_host_status',
+                                 'ngMaterial'
                                 ])
 
     .value('tableGlobalConfig', {'cellToFieldsMap': {}, 'cellWrappableField': {}, 'nextTableIndex': 0})
@@ -32,6 +33,7 @@ angular.module('bansho.table', ['bansho.surveil',
             $scope.cellsName = conf.cells.name;
             $scope.cellsText = conf.cells.text;
             $scope.cellIndexes = [];
+            conf.isCheckAll = false;
 
             $scope.$watch(function () {
                 return conf.isCheckAll;

app/index.html

@@ -14,6 +14,7 @@
     <link href="bower_components/pnotify/pnotify.core.css" media="all" rel="stylesheet" type="text/css" />
     <link href="bower_components/pnotify/pnotify.buttons.css" media="all" rel="stylesheet" type="text/css" />
     <link href="bower_components/pnotify/pnotify.history.css" media="all" rel="stylesheet" type="text/css" />
+    <link href="bower_components/angular-material/angular-material.min.css" media="all" rel="stylesheet" type="text/css" />
     <!-- endbuild -->
 
 
@@ -26,6 +27,9 @@
     <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/angular-material/angular-material.min.js"></script>
+    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
     <script src="bower_components/moment/moment.js"></script>
     <script src="bower_components/raphael/raphael-min.js"></script>
     <script src="bower_components/justgage-toorshia/justgage.js"></script>

bower.json

@@ -5,17 +5,21 @@
   "license": "AGPLv3",
   "private": true,
   "dependencies": {
-    "angular": "~1.3.15",
-    "angular-route": "~1.3.15",
-    "angular-loader": "~1.3.15",
-    "angular-mocks": "~1.3.15",
+    "angular": "1.3.16",
+    "angular-route": "1.3.16",
+    "angular-loader": "1.3.16",
+    "angular-mocks": "1.3.16",
     "html5-boilerplate": "~5.2.0",
     "bootstrap-sass-official": "3.3.1",
     "fontawesome": "~4.3.0",
     "justgage-toorshia": "master",
     "moment": "~2.9.0",
     "angular-filter": "~0.5.4",
-    "angular-cookies": "~1.3.15",
-    "pnotify": "~2.0.1"
+    "angular-cookies": "1.3.16",
+    "pnotify": "~2.0.1",
+    "angular-animate": "1.3.16",
+    "angular-aria": "1.3.16",
+    "angular-material": "0.10.0"
   }
 }
+