From 6b356134cc7289b4506e457d662a1ac7d5a26b5d Mon Sep 17 00:00:00 2001
From: Thibault Cohen <titilambert@gmail.com>
Date: Thu, 25 Jun 2015 17:07:01 -0400
Subject: [PATCH] Begin to integrate angular-material (on table component)

Change-Id: I36bdb98bdc4a7406d33c64df4bd0de2d9d42ea56
---
 app/assets/sass/temporary.scss  | 31 +++++++++++++++++++++++++++++++
 app/components/table/table.html |  8 ++++++--
 app/components/table/table.js   |  4 +++-
 app/index.html                  |  4 ++++
 bower.json                      | 16 ++++++++++------
 5 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss
index c1f83a4..2f45f07 100644
--- a/app/assets/sass/temporary.scss
+++ b/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 {
diff --git a/app/components/table/table.html b/app/components/table/table.html
index ca2bc0f..29307f5 100644
--- a/app/components/table/table.html
+++ b/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>
diff --git a/app/components/table/table.js b/app/components/table/table.js
index 5716064..6a879e5 100644
--- a/app/components/table/table.js
+++ b/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;
diff --git a/app/index.html b/app/index.html
index 9c98cc8..97552e3 100644
--- a/app/index.html
+++ b/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>
diff --git a/bower.json b/bower.json
index d47b2b9..c475266 100644
--- a/bower.json
+++ b/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"
   }
 }
+