Skip to content

Commit e5b45b6

Browse files
AlexanderZhukCoherentAlexanderZhukCoherent
committed
Merge pull request #7 from angular-data-grid/updateMaterial
Update material
2 parents d3476ef + 5f2f960 commit e5b45b6

File tree

8 files changed

+358
-373
lines changed

8 files changed

+358
-373
lines changed

‎demo/demo.css‎

Lines changed: 22 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
*, *:before, *:after {
22
box-sizing: border-box; }
33

4+
:focus {
5+
outline: none; }
6+
47
body {
58
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
69

@@ -20,7 +23,8 @@ h1 {
2023
padding-left: 15px; }
2124

2225
.b-change-theme {
23-
padding: 20px; }
26+
padding: 20px;
27+
margin-bottom: 20px; }
2428
.b-change-theme__link {
2529
font-size: 16px;
2630
line-height: 20px;
@@ -61,49 +65,33 @@ h1 {
6165
th.sortable {
6266
line-height: 24px;
6367
position: relative; }
64-
th.sortable.sort-descent:before {
68+
th.sortable.sort-descent:before, th.sortable.sort-descent:after, th.sortable.sort-ascent:before, th.sortable.sort-ascent:after {
6569
content: '';
6670
position: absolute;
71+
margin: auto 0; }
72+
th.sortable.sort-descent:before, th.sortable.sort-ascent:before {
6773
left: 12px;
6874
width: 2px;
6975
background: #333;
70-
height: 12px;
71-
top: 0;
72-
bottom: 0;
73-
margin: auto 0; }
74-
th.sortable.sort-descent:after {
75-
content: '';
76-
position: absolute;
76+
height: 12px; }
77+
th.sortable.sort-descent:after, th.sortable.sort-ascent:after {
7778
left: 9px;
7879
border-top: 2px solid #333;
7980
border-left: 2px solid #333;
8081
transform-origin: center;
81-
transform: rotate(-135deg);
8282
height: 8px;
83-
width: 8px;
84-
top: 6px;
85-
bottom: 0;
86-
margin: auto 0; }
83+
width: 8px; }
84+
th.sortable.sort-descent:before, th.sortable.sort-descent:after {
85+
bottom: 0; }
86+
th.sortable.sort-descent:before {
87+
top: 0; }
88+
th.sortable.sort-descent:after {
89+
transform: rotate(-135deg);
90+
top: 6px; }
91+
th.sortable.sort-ascent:before, th.sortable.sort-ascent:after {
92+
top: 0; }
8793
th.sortable.sort-ascent:before {
88-
content: '';
89-
position: absolute;
90-
left: 12px;
91-
width: 2px;
92-
background: #333;
93-
height: 12px;
94-
top: 0;
95-
bottom: 0;
96-
margin: auto 0; }
94+
bottom: 0; }
9795
th.sortable.sort-ascent:after {
98-
content: '';
99-
position: absolute;
100-
left: 9px;
101-
border-top: 2px solid #333;
102-
border-left: 2px solid #333;
103-
transform-origin: center;
10496
transform: rotate(45deg);
105-
height: 8px;
106-
width: 8px;
107-
top: 0;
108-
bottom: 6px;
109-
margin: auto 0; }
97+
bottom: 6px; }

‎demo/demoApp.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
angular.module('myApp', ['dataGrid', 'pagination'])
1+
angular
2+
.module('myApp', ['dataGrid', 'pagination', 'ngMaterial'])
23
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
34

45
$scope.gridOptions = {
@@ -10,7 +11,6 @@ angular.module('myApp', ['dataGrid', 'pagination'])
1011
.factory('myAppFactory', function () {
1112
return {
1213
getData: function () {
13-
//return $http.get(root + '/posts', {});
1414
return [{
1515
"total": {
1616
"currencyIso": "USD",

‎demo/index.html‎

Lines changed: 123 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head lang="en">
44
<meta charset="UTF-8">
55
<title>Flat JSON format for data tables</title>
6+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
67
<link rel="stylesheet" href="demo.css">
78
<link rel="stylesheet" href="../dist/material.css">
89
</head>
@@ -11,140 +12,124 @@
1112
<div class="container">
1213
<h1>Angular Data Grid</h1>
1314
<div class="b-change-theme">
14-
<span class="b-change-theme__link _active">Material Design</span>
1515
<a href="../index.html" class="b-change-theme__link">Bootstrap</a>
16+
<span class="b-change-theme__link _active">Material Design</span>
1617
</div>
17-
<div class="row">
18-
<div class="col-xs-12">
19-
<div class="col-md-3">
20-
<div class="form-group">
21-
<input type="text" class="form-control order-search-box"
22-
placeholder="Search By Order #"
23-
ng-change="gridActions.filter()"
24-
ng-model="code"
25-
filter-by="code"
26-
filter-type="text">
27-
</div>
28-
</div>
29-
<div class="col-md-9 buttons-right">
30-
<div class="form-inline margin-bottom-small">
31-
<div class="form-group">
32-
<label class="control-label">From: </label>
33-
34-
<div class="input-group datepicker">
35-
<input type="text"
36-
id="dateFrom"
37-
class="form-control"
38-
is-open="dateFromOpened"
39-
ng-click="dateFromOpened = true"
40-
datepicker-popup="shortDate"
41-
filter-by="placed"
42-
filter-type="dateFrom"
43-
ng-model="dateFrom"
44-
ng-blur="gridActions.filter()"
45-
ng-focus="gridActions.filter()"
46-
max-date="dateTo"
47-
show-weeks="false"
48-
close-text="Close"
49-
placeholder="MM/DD/YY"/>
50-
<span class="input-group-btn">
51-
<label for="dateFrom" class="btn btn-default form-control">
52-
<i class="fa fa-calendar"></i></label>
53-
</span>
54-
</div>
55-
</div>
56-
<div class="form-group">
57-
<label class="control-label">To: </label>
58-
59-
<div class="input-group datepicker">
60-
<input type="text"
61-
id="dateTo"
62-
class="form-control"
63-
is-open="dateToOpened"
64-
ng-click="dateToOpened = true"
65-
min-date="dateFrom"
66-
datepicker-popup="shortDate"
67-
filter-by="placed"
68-
filter-type="dateTo"
69-
ng-model="dateTo"
70-
ng-blur="gridActions.filter()"
71-
ng-focus="gridActions.filter()"
72-
show-weeks="false"
73-
close-text="Close"
74-
placeholder="MM/DD/YY"/>
75-
<span class="input-group-btn">
76-
<label for="dateTo" class="btn btn-default form-control">
77-
<i class="fa fa-calendar"></i></label>
78-
</span>
79-
</div>
80-
</div>
81-
</div>
82-
<div ng-show="dateTo || dateFrom" class="buttons-right">
83-
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
84-
</div>
18+
<div>
19+
<div layout-gt-sm="row" class="layout-gt-sm-row">
20+
<md-input-container class="md-block flex-gt-sm md-input-has-value" flex-gt-sm="">
21+
<label for="order">Search By Order #</label>
22+
<input ng-model="code"
23+
class="md-input"
24+
ng-change="gridActions.filter()"
25+
id="order"
26+
filter-by="code"
27+
filter-type="text"
28+
aria-invalid="false">
29+
</md-input-container>
30+
<md-input-container class="md-block flex-gt-sm md-input-has-value" flex-gt-sm="">
31+
<label for="dateFrom">From</label>
32+
<input ng-model="dateFrom"
33+
datepicker-popup="shortDate"
34+
is-open="dateFromOpened"
35+
ng-click="dateFromOpened = true"
36+
class="md-input"
37+
filter-by="placed"
38+
filter-type="dateFrom"
39+
ng-model="dateFrom"
40+
id="dateFrom"
41+
ng-blur="gridActions.filter()"
42+
ng-focus="gridActions.filter()"
43+
max-date="dateTo"
44+
show-weeks="false"
45+
close-text="Close">
46+
</md-input-container>
47+
<md-input-container class="md-block flex-gt-sm md-input-has-value" flex-gt-sm="">
48+
<label for="dateTo">To</label>
49+
<input type="text"
50+
id="dateTo"
51+
class="md-input"
52+
is-open="dateToOpened"
53+
ng-click="dateToOpened = true"
54+
min-date="dateFrom"
55+
datepicker-popup="shortDate"
56+
filter-by="placed"
57+
filter-type="dateTo"
58+
ng-model="dateTo"
59+
ng-blur="gridActions.filter()"
60+
ng-focus="gridActions.filter()"
61+
show-weeks="false"
62+
close-text="Close"/>
63+
</md-input-container>
64+
</div>
65+
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
66+
<div>
67+
<strong>
68+
found : {{filtered.length}} items
69+
</strong>
8570
</div>
86-
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
87-
<div class="row margin-bottom-big">
88-
<strong class="col-md-12">
89-
found : {{filtered.length}} items
90-
</strong>
71+
<pagination max-size="5"
72+
boundary-links="true"
73+
class="pagination-sm"
74+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
75+
total-items="paginationOptions.totalItems"
76+
ng-model="paginationOptions.currentPage"
77+
ng-change="reloadGrid()"
78+
items-per-page="paginationOptions.itemsPerPage"></pagination>
79+
<table class="table table-hover table-leo table-condensed table-bordered table-striped">
80+
<thead>
81+
<tr>
82+
<th sortable="code" class="sortable">
83+
Order #
84+
</th>
85+
<th sortable="placed" class="sortable">
86+
Date Placed
87+
</th>
88+
<th sortable="purchaseOrderNumber" class="sortable">
89+
Purchase Order #
90+
</th>
91+
<th class="st-sort-disable th-dropdown">
9192

92-
</div>
93-
<pagination max-size="5"
94-
boundary-links="true"
95-
class="pagination-sm"
96-
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
97-
total-items="paginationOptions.totalItems"
98-
ng-model="paginationOptions.currentPage"
99-
ng-change="reloadGrid()"
100-
items-per-page="paginationOptions.itemsPerPage"></pagination>
101-
<table class="table table-hover table-leo table-condensed table-bordered table-striped">
102-
<thead>
103-
<tr>
104-
<th sortable="code" class="sortable">
105-
Order #
106-
</th>
107-
<th sortable="placed" class="sortable">
108-
Date Placed
109-
</th>
110-
<th sortable="purchaseOrderNumber" class="sortable">
111-
Purchase Order #
112-
</th>
113-
<th class="st-sort-disable th-dropdown">
114-
<select class="form-control width-15"
115-
filter-by="statusDisplay"
116-
filter-type="select"
117-
ng-model="status"
118-
ng-change="filter()">
119-
<option value="">All Statuses</option>
120-
</select>
121-
</th>
122-
<th sortable='total.value' class="sortable">
123-
Total
124-
</th>
125-
<th class="st-sort-disable">
126-
</th>
127-
</tr>
128-
</thead>
129-
<tbody>
130-
<tr grid-item>
131-
<td>
132-
<a href="{{globalData.contextPath + '/my-account/order/' + item.code}}"
133-
ng-bind="item.id"></a>
134-
</td>
135-
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
136-
<td ng-bind="item.purchaseOrderNumber"></td>
137-
<td ng-bind="item.statusDisplay"></td>
138-
<td ng-bind="item.total.formattedValue"></td>
139-
<td>
140-
<a class="btn btn-secondary btn-sm"
141-
href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
142-
Order</a>
143-
</td>
144-
</tr>
145-
</tbody>
146-
</table>
147-
<div class="row">
93+
<md-input-container>
94+
<label>State</label>
95+
<md-select filter-by="statusDisplay"
96+
filter-type="select"
97+
ng-model="status"
98+
ng-change="filter()">
99+
<md-option value="">All Statuses</md-option>
100+
<md-option ng-repeat="option in statusOptions track by option.value"
101+
value="{{option.value}}">
102+
{{option.text}}
103+
</md-option>
104+
</md-select>
105+
</md-input-container>
106+
</th>
107+
<th sortable='total.value' class="sortable">
108+
Total
109+
</th>
110+
<th class="st-sort-disable">
111+
</th>
112+
</tr>
113+
</thead>
114+
<tbody>
115+
<tr grid-item>
116+
<td>
117+
<a ng-bind="item.code"></a>
118+
</td>
119+
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
120+
<td ng-bind="item.purchaseOrderNumber"></td>
121+
<td ng-bind="item.statusDisplay"></td>
122+
<td ng-bind="item.total.formattedValue"></td>
123+
<td>
124+
<a class="btn btn-secondary btn-sm"
125+
href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
126+
Order</a>
127+
</td>
128+
</tr>
129+
</tbody>
130+
</table>
131+
<div layout-gt-sm="row" class="layout-gt-sm-row">
132+
<md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
148133
<pagination max-size="5"
149134
boundary-links="true"
150135
class="pagination-sm"
@@ -153,17 +138,23 @@ <h1>Angular Data Grid</h1>
153138
ng-model="paginationOptions.currentPage"
154139
ng-change="reloadGrid()"
155140
items-per-page="paginationOptions.itemsPerPage"></pagination>
141+
</md-input-container>
142+
<md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
156143
<div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
157-
</div>
144+
</md-input-container>
158145
</div>
159146
</div>
160147
</div>
161148
</div>
162149
</div>
150+
</div>
163151
</body>
164152

165-
<!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
166153
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
154+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
155+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
156+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
157+
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
167158
<script src="../dist/pagination.min.js"></script>
168159
<script src="../dist/dataGrid.min.js"></script>
169160
<script src="demoApp.js"></script>

0 commit comments

Comments
 (0)