From a0a4cbd3a03a04bdadcfc4c12d8be2c0e51fa254 Mon Sep 17 00:00:00 2001
From: IvanBisultanov <IvanBisutlanov@gmail.com>
Date: Tue, 29 Dec 2015 16:05:16 +0300
Subject: [PATCH] add material theme

---
 demo/demo.css                            | 146 ++++++++-------------
 demo/index.html                          | 160 ++++++++++++++++++++++-
 dist/{dataGrid.css => material.css}      |  12 +-
 gulpfile.js                              |   2 +-
 index.html                               |   5 +-
 src/css/demo.scss                        |  67 +++++++++-
 src/css/{dataGrid.scss => material.scss} |  11 +-
 7 files changed, 297 insertions(+), 106 deletions(-)
 rename dist/{dataGrid.css => material.css} (87%)
 rename src/css/{dataGrid.scss => material.scss} (88%)

diff --git a/demo/demo.css b/demo/demo.css
index e4b5e63..ff25c8c 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -1,93 +1,59 @@
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-:focus {
-  outline: none; }
-
-.pagination {
-  display: inline-block;
-  box-sizing: border-box; }
-
-.pagination > li {
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
-  height: 30px;
-  position: relative;
-  border-radius: 2px;
+*, *:before, *:after {
   box-sizing: border-box; }
 
-.pagination a {
-  color: #444;
-  font-size: 16px;
-  padding: 0 10px;
-  line-height: 30px;
-  display: inline-block;
-  text-decoration: none;
-  box-sizing: border-box; }
-  .pagination a .md-ripple-container {
-    border-radius: 2px; }
-
-.pagination-none-svg svg {
-  display: none !important; }
-
-.pagination-none-svg .pagination-prev a,
-.pagination-none-svg .pagination-next a,
-.pagination-none-svg .pagination-first a,
-.pagination-none-svg .pagination-last a {
-  width: 30px;
-  text-align: center;
-  line-height: 24px; }
-
-.pagination-page {
-  transition: background .1s ease-out, color .1s ease-out; }
-  .pagination-page.active {
-    background: #106cc8; }
-    .pagination-page.active a {
-      color: #fff; }
-
-.pagination {
-  transition: background .1s ease-out, color .1s ease-out; }
-  .pagination .active {
-    background: #106cc8; }
-    .pagination .active a {
-      color: #fff; }
-
-.table td {
-  border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
-  padding: 12px; }
-
-.table th {
-  padding: 12px;
-  border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
-
-th.sortable {
-  line-height: 24px;
-  padding-right: 31px; }
-  th.sortable svg {
-    height: 18px;
-    width: 18px;
-    margin: 0 4px;
-    transition: fill .25s,-webkit-transform .25s;
-    transition: fill .25s,transform .25s;
+body {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
+
+h1 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+  font-size: 36px; }
+
+.container {
+  max-width: 1170px;
+  margin: 0 auto;
+  padding-right: 15px;
+  padding-left: 15px; }
+
+.b-change-theme {
+  padding: 20px; }
+  .b-change-theme__link {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+    color: #000;
+    display: inline-block;
     vertical-align: middle;
-    display: none !important; }
-  th.sortable.sort-descent {
-    padding-right: 0; }
-    th.sortable.sort-descent svg {
-      display: inline-block !important; }
-  th.sortable.sort-ascent {
-    padding-right: 0; }
-    th.sortable.sort-ascent svg {
-      display: inline-block !important;
-      -webkit-transform: rotate(180deg);
-      transform: rotate(180deg); }
-
-.items-per-page .active {
-  background: #106cc8; }
-  .items-per-page .active a {
-    color: #fff; }
-
-.items-per-page a {
-  cursor: pointer; }
+    text-decoration: none; }
+    .b-change-theme__link + .b-change-theme__link {
+      margin-left: 30px; }
+    .b-change-theme__link:before {
+      width: 20px;
+      height: 20px;
+      content: '';
+      border-radius: 2px;
+      border: 1px solid #999;
+      margin-right: 8px;
+      vertical-align: bottom;
+      display: inline-block; }
+    .b-change-theme__link:hover {
+      text-decoration: underline;
+      color: #000; }
+    .b-change-theme__link._active {
+      text-decoration: none;
+      position: relative; }
+      .b-change-theme__link._active:after {
+        content: '';
+        width: 12px;
+        height: 6px;
+        border-left: 2px solid #444;
+        border-bottom: 2px solid #444;
+        transform-origin: center;
+        transform: rotate(-45deg);
+        left: 4px;
+        top: 5px;
+        position: absolute; }
diff --git a/demo/index.html b/demo/index.html
index e71ae2c..b0fc361 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,17 +3,169 @@
 <head lang="en">
     <meta charset="UTF-8">
     <title>Flat JSON format for data tables</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="../dist/material.css">
 </head>
 <body>
-<div class="container">
+<div class="container" ng-app="myApp" ng-controller="myAppController" ng-cloak>
     <div class="container">
-        <h1>TEST <a href="../index.html">Go back</a></h1>
+        <h1>Angular Data Grid</h1>
+        <div class="b-change-theme">
+            <span class="b-change-theme__link _active">Material Design</span>
+            <a href="../index.html" class="b-change-theme__link">Bootstrap</a>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
+                <div class="col-md-3">
+                    <div class="form-group">
+                        <input type="text" class="form-control order-search-box"
+                               placeholder="Search By Order #"
+                               ng-change="gridActions.filter()"
+                               ng-model="code"
+                               filter-by="code"
+                               filter-type="text">
+                    </div>
+                </div>
+                <div class="col-md-9 buttons-right">
+                    <div class="form-inline margin-bottom-small">
+                        <div class="form-group">
+                            <label class="control-label">From: </label>
+
+                            <div class="input-group datepicker">
+                                <input type="text"
+                                       id="dateFrom"
+                                       class="form-control"
+                                       is-open="dateFromOpened"
+                                       ng-click="dateFromOpened = true"
+                                       datepicker-popup="shortDate"
+                                       filter-by="placed"
+                                       filter-type="dateFrom"
+                                       ng-model="dateFrom"
+                                       ng-blur="gridActions.filter()"
+                                       ng-focus="gridActions.filter()"
+                                       max-date="dateTo"
+                                       show-weeks="false"
+                                       close-text="Close"
+                                       placeholder="MM/DD/YY"/>
+                            <span class="input-group-btn">
+                            <label for="dateFrom" class="btn btn-default form-control">
+                                <i class="fa fa-calendar"></i></label>
+                            </span>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="control-label">To: </label>
+
+                            <div class="input-group datepicker">
+                                <input type="text"
+                                       id="dateTo"
+                                       class="form-control"
+                                       is-open="dateToOpened"
+                                       ng-click="dateToOpened = true"
+                                       min-date="dateFrom"
+                                       datepicker-popup="shortDate"
+                                       filter-by="placed"
+                                       filter-type="dateTo"
+                                       ng-model="dateTo"
+                                       ng-blur="gridActions.filter()"
+                                       ng-focus="gridActions.filter()"
+                                       show-weeks="false"
+                                       close-text="Close"
+                                       placeholder="MM/DD/YY"/>
+                                <span class="input-group-btn">
+                                <label for="dateTo" class="btn btn-default form-control">
+                                    <i class="fa fa-calendar"></i></label>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div ng-show="dateTo || dateFrom" class="buttons-right">
+                        <a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
+                    </div>
+                </div>
+                <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
+                    <div class="row margin-bottom-big">
+                        <strong class="col-md-12">
+                            found : {{filtered.length}} items
+                        </strong>
+
+                    </div>
+                    <pagination max-size="5"
+                                boundary-links="true"
+                                class="pagination-sm"
+                                ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                                total-items="paginationOptions.totalItems"
+                                ng-model="paginationOptions.currentPage"
+                                ng-change="reloadGrid()"
+                                items-per-page="paginationOptions.itemsPerPage"></pagination>
+                    <table class="table table-hover table-leo table-condensed table-bordered table-striped">
+                        <thead>
+                        <tr>
+                            <th sortable="code" class="sortable">
+                                Order #
+                            </th>
+                            <th sortable="placed" class="sortable">
+                                Date Placed
+                            </th>
+                            <th sortable="purchaseOrderNumber" class="sortable">
+                                Purchase Order #
+                            </th>
+                            <th class="st-sort-disable th-dropdown">
+                                <select class="form-control width-15"
+                                        filter-by="statusDisplay"
+                                        filter-type="select"
+                                        ng-model="status"
+                                        ng-change="filter()">
+                                    <option value="">All Statuses</option>
+                                </select>
+                            </th>
+                            <th sortable='total.value' class="sortable">
+                                Total
+                            </th>
+                            <th class="st-sort-disable">
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr grid-item>
+                            <td>
+                                <a href="{{globalData.contextPath + '/my-account/order/' + item.code}}"
+                                   ng-bind="item.id"></a>
+                            </td>
+                            <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
+                            <td ng-bind="item.purchaseOrderNumber"></td>
+                            <td ng-bind="item.statusDisplay"></td>
+                            <td ng-bind="item.total.formattedValue"></td>
+                            <td>
+                                <a class="btn btn-secondary btn-sm"
+                                   href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
+                                    Order</a>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <div class="row">
+                        <pagination max-size="5"
+                                    boundary-links="true"
+                                    class="pagination-sm"
+                                    ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                                    total-items="paginationOptions.totalItems"
+                                    ng-model="paginationOptions.currentPage"
+                                    ng-change="reloadGrid()"
+                                    items-per-page="paginationOptions.itemsPerPage"></pagination>
+                        <div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 </body>
 
-<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+<!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+<script src="../dist/pagination.min.js"></script>
+<script src="../dist/dataGrid.min.js"></script>
+<script src="demoApp.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/dist/dataGrid.css b/dist/material.css
similarity index 87%
rename from dist/dataGrid.css
rename to dist/material.css
index e4b5e63..823b576 100644
--- a/dist/dataGrid.css
+++ b/dist/material.css
@@ -1,6 +1,8 @@
 table {
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+  margin: 8px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
 
 :focus {
   outline: none; }
@@ -55,12 +57,12 @@ table {
       color: #fff; }
 
 .table td {
-  border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
-  padding: 12px; }
+  border-top: 1px rgba(0, 0, 0, 0.12) solid;
+  padding: 12px 24px; }
 
 .table th {
-  padding: 12px;
-  border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
+  padding: 12px 24px;
+  border-top: 1px rgba(0, 0, 0, 0.12) solid; }
 
 th.sortable {
   line-height: 24px;
diff --git a/gulpfile.js b/gulpfile.js
index a763b39..4fe7687 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -38,7 +38,7 @@
         gulp.src('./src/css/demo.scss')
             .pipe(sass().on('error', sass.logError))
             .pipe(gulp.dest('./demo'));
-        gulp.src('./src/css/dataGrid.scss')
+        gulp.src('./src/css/material.scss')
             .pipe(sass().on('error', sass.logError))
             .pipe(gulp.dest('./dist'));
     });
diff --git a/index.html b/index.html
index b614f5e..cda5e65 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,10 @@
 
     <div class="container">
         <h1>Angular Data Grid</h1>
-
+        <div class="b-change-theme">
+            <span class="b-change-theme__link _active">Bootstrap</span>
+            <a href="demo/index.html" class="b-change-theme__link">Material Design</a>
+        </div>
         <div class="row">
             <div class="col-xs-12">
                 <div class="col-md-3">
diff --git a/src/css/demo.scss b/src/css/demo.scss
index 3a09c2e..0085554 100644
--- a/src/css/demo.scss
+++ b/src/css/demo.scss
@@ -1 +1,66 @@
-@import 'dataGrid';
\ No newline at end of file
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+h1 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+  font-size: 36px;
+}
+.container {
+  max-width: 1170px;
+  margin: 0 auto;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+.b-change-theme {
+  padding: 20px;
+  &__link {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+    color: #000;
+    display: inline-block;
+    vertical-align: middle;
+    text-decoration: none;
+    &+& {
+      margin-left: 30px;
+    }
+    &:before {
+      width: 20px;
+      height: 20px;
+      content: '';
+      border-radius: 2px;
+      border: 1px solid #999;
+      margin-right: 8px;
+      vertical-align: bottom;
+      display: inline-block;
+    }
+    &:hover {
+      text-decoration: underline;
+      color: #000;
+    }
+    &._active{
+      text-decoration: none;
+      position: relative;
+      &:after {
+        content: '';
+        width: 12px;
+        height: 6px;
+        border-left: 2px solid #444;
+        border-bottom: 2px solid #444;
+        transform-origin: center;
+        transform: rotate(-45deg);
+        left: 4px;
+        top: 5px;
+        position: absolute;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/css/dataGrid.scss b/src/css/material.scss
similarity index 88%
rename from src/css/dataGrid.scss
rename to src/css/material.scss
index 8089c55..b68987d 100644
--- a/src/css/dataGrid.scss
+++ b/src/css/material.scss
@@ -2,6 +2,9 @@
 table {
   border-collapse: collapse;
   border-spacing: 0;
+
+  margin: 8px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
 }
 :focus {
   outline: none;
@@ -66,12 +69,12 @@ table {
 }
 .table {
   td {
-    border-bottom: 1px rgba(0,0,0,.12) solid;
-    padding: 12px;
+    border-top: 1px rgba(0,0,0,.12) solid;
+    padding: 12px 24px;
   }
   th {
-    padding: 12px;
-    border-bottom: 1px rgba(0,0,0,.12) solid;
+    padding: 12px 24px;
+    border-top: 1px rgba(0,0,0,.12) solid;
   }
 }
 th.sortable {