Skip to content

Commit 5f2f960

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
add Angular Material
1 parent d75853d commit 5f2f960

File tree

8 files changed

+250
-565
lines changed

8 files changed

+250
-565
lines changed

‎demo/demo.css‎

Lines changed: 20 additions & 47 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

@@ -62,63 +65,33 @@ h1 {
6265
th.sortable {
6366
line-height: 24px;
6467
position: relative; }
65-
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 {
6669
content: '';
6770
position: absolute;
71+
margin: auto 0; }
72+
th.sortable.sort-descent:before, th.sortable.sort-ascent:before {
6873
left: 12px;
6974
width: 2px;
7075
background: #333;
71-
height: 12px;
72-
top: 0;
73-
bottom: 0;
74-
margin: auto 0; }
75-
th.sortable.sort-descent:after {
76-
content: '';
77-
position: absolute;
76+
height: 12px; }
77+
th.sortable.sort-descent:after, th.sortable.sort-ascent:after {
7878
left: 9px;
7979
border-top: 2px solid #333;
8080
border-left: 2px solid #333;
8181
transform-origin: center;
82-
transform: rotate(-135deg);
8382
height: 8px;
84-
width: 8px;
85-
top: 6px;
86-
bottom: 0;
87-
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; }
8893
th.sortable.sort-ascent:before {
89-
content: '';
90-
position: absolute;
91-
left: 12px;
92-
width: 2px;
93-
background: #333;
94-
height: 12px;
95-
top: 0;
96-
bottom: 0;
97-
margin: auto 0; }
94+
bottom: 0; }
9895
th.sortable.sort-ascent:after {
99-
content: '';
100-
position: absolute;
101-
left: 9px;
102-
border-top: 2px solid #333;
103-
border-left: 2px solid #333;
104-
transform-origin: center;
10596
transform: rotate(45deg);
106-
height: 8px;
107-
width: 8px;
108-
top: 0;
109-
bottom: 6px;
110-
margin: auto 0; }
111-
112-
.col-wrap {
113-
font-size: 0;
114-
padding: 25px 0; }
115-
.col-wrap .col2 {
116-
vertical-align: top;
117-
display: inline-block;
118-
width: 50%;
119-
padding: 0 15px; }
120-
.col-wrap .col3 {
121-
vertical-align: top;
122-
display: inline-block;
123-
width: 33.33%;
124-
padding: 0 15px; }
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: 69 additions & 71 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>
@@ -15,64 +16,51 @@ <h1>Angular Data Grid</h1>
1516
<span class="b-change-theme__link _active">Material Design</span>
1617
</div>
1718
<div>
18-
<div class="col-wrap">
19-
<div class="col3">
20-
<div class="form-group">
21-
<input type="text"
22-
id="sort"
23-
class="form-control order-search-box"
24-
ng-change="gridActions.filter()"
25-
ng-model="code"
26-
filter-by="code"
27-
filter-type="text">
28-
<label for="sort" class="input-label">Search By Order #</label>
29-
</div>
30-
</div>
31-
<div class="col3">
32-
<div class="form-group">
33-
<div class="input-group datepicker">
34-
<input type="text"
35-
id="dateFrom"
36-
class="form-control"
37-
is-open="dateFromOpened"
38-
ng-click="dateFromOpened = true"
39-
datepicker-popup="shortDate"
40-
filter-by="placed"
41-
filter-type="dateFrom"
42-
ng-model="dateFrom"
43-
ng-blur="gridActions.filter()"
44-
ng-focus="gridActions.filter()"
45-
max-date="dateTo"
46-
show-weeks="false"
47-
close-text="Close"/>
48-
<label for="dateFrom" class="input-label">From</label>
49-
</div>
50-
</div>
51-
<div ng-show="dateTo || dateFrom" class="buttons-right">
52-
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
53-
</div>
54-
</div>
55-
<div class="col3">
56-
<div class="form-group">
57-
<div class="input-group datepicker">
58-
<input type="text"
59-
id="dateTo"
60-
class="form-control"
61-
is-open="dateToOpened"
62-
ng-click="dateToOpened = true"
63-
min-date="dateFrom"
64-
datepicker-popup="shortDate"
65-
filter-by="placed"
66-
filter-type="dateTo"
67-
ng-model="dateTo"
68-
ng-blur="gridActions.filter()"
69-
ng-focus="gridActions.filter()"
70-
show-weeks="false"
71-
close-text="Close"/>
72-
<label for="dateTo" class="input-label">To</label>
73-
</div>
74-
</div>
75-
</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>
7664
</div>
7765
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
7866
<div>
@@ -101,13 +89,20 @@ <h1>Angular Data Grid</h1>
10189
Purchase Order #
10290
</th>
10391
<th class="st-sort-disable th-dropdown">
104-
<select class="form-control width-15"
105-
filter-by="statusDisplay"
106-
filter-type="select"
107-
ng-model="status"
108-
ng-change="filter()">
109-
<option value="">All Statuses</option>
110-
</select>
92+
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>
111106
</th>
112107
<th sortable='total.value' class="sortable">
113108
Total
@@ -133,8 +128,8 @@ <h1>Angular Data Grid</h1>
133128
</tr>
134129
</tbody>
135130
</table>
136-
<div class="col-wrap">
137-
<div class="col2">
131+
<div layout-gt-sm="row" class="layout-gt-sm-row">
132+
<md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
138133
<pagination max-size="5"
139134
boundary-links="true"
140135
class="pagination-sm"
@@ -143,10 +138,10 @@ <h1>Angular Data Grid</h1>
143138
ng-model="paginationOptions.currentPage"
144139
ng-change="reloadGrid()"
145140
items-per-page="paginationOptions.itemsPerPage"></pagination>
146-
</div>
147-
<div class="col2">
141+
</md-input-container>
142+
<md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
148143
<div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
149-
</div>
144+
</md-input-container>
150145
</div>
151146
</div>
152147
</div>
@@ -155,8 +150,11 @@ <h1>Angular Data Grid</h1>
155150
</div>
156151
</body>
157152

158-
<!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
159153
<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>
160158
<script src="../dist/pagination.min.js"></script>
161159
<script src="../dist/dataGrid.min.js"></script>
162160
<script src="demoApp.js"></script>

0 commit comments

Comments
 (0)