Skip to content

Commit a0a4cbd

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
add material theme
1 parent cc71080 commit a0a4cbd

File tree

7 files changed

+297
-106
lines changed

7 files changed

+297
-106
lines changed

‎demo/demo.css

+56-90
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,59 @@
1-
table {
2-
border-collapse: collapse;
3-
border-spacing: 0; }
4-
5-
:focus {
6-
outline: none; }
7-
8-
.pagination {
9-
display: inline-block;
10-
box-sizing: border-box; }
11-
12-
.pagination > li {
13-
display: inline-block;
14-
vertical-align: middle;
15-
width: auto;
16-
height: 30px;
17-
position: relative;
18-
border-radius: 2px;
1+
*, *:before, *:after {
192
box-sizing: border-box; }
203

21-
.pagination a {
22-
color: #444;
23-
font-size: 16px;
24-
padding: 0 10px;
25-
line-height: 30px;
26-
display: inline-block;
27-
text-decoration: none;
28-
box-sizing: border-box; }
29-
.pagination a .md-ripple-container {
30-
border-radius: 2px; }
31-
32-
.pagination-none-svg svg {
33-
display: none !important; }
34-
35-
.pagination-none-svg .pagination-prev a,
36-
.pagination-none-svg .pagination-next a,
37-
.pagination-none-svg .pagination-first a,
38-
.pagination-none-svg .pagination-last a {
39-
width: 30px;
40-
text-align: center;
41-
line-height: 24px; }
42-
43-
.pagination-page {
44-
transition: background .1s ease-out, color .1s ease-out; }
45-
.pagination-page.active {
46-
background: #106cc8; }
47-
.pagination-page.active a {
48-
color: #fff; }
49-
50-
.pagination {
51-
transition: background .1s ease-out, color .1s ease-out; }
52-
.pagination .active {
53-
background: #106cc8; }
54-
.pagination .active a {
55-
color: #fff; }
56-
57-
.table td {
58-
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
59-
padding: 12px; }
60-
61-
.table th {
62-
padding: 12px;
63-
border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
64-
65-
th.sortable {
66-
line-height: 24px;
67-
padding-right: 31px; }
68-
th.sortable svg {
69-
height: 18px;
70-
width: 18px;
71-
margin: 0 4px;
72-
transition: fill .25s,-webkit-transform .25s;
73-
transition: fill .25s,transform .25s;
4+
body {
5+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
6+
7+
h1 {
8+
margin-top: 20px;
9+
margin-bottom: 10px;
10+
font-family: inherit;
11+
font-weight: 500;
12+
line-height: 1.1;
13+
color: inherit;
14+
font-size: 36px; }
15+
16+
.container {
17+
max-width: 1170px;
18+
margin: 0 auto;
19+
padding-right: 15px;
20+
padding-left: 15px; }
21+
22+
.b-change-theme {
23+
padding: 20px; }
24+
.b-change-theme__link {
25+
font-size: 16px;
26+
line-height: 20px;
27+
font-weight: 400;
28+
color: #000;
29+
display: inline-block;
7430
vertical-align: middle;
75-
display: none !important; }
76-
th.sortable.sort-descent {
77-
padding-right: 0; }
78-
th.sortable.sort-descent svg {
79-
display: inline-block !important; }
80-
th.sortable.sort-ascent {
81-
padding-right: 0; }
82-
th.sortable.sort-ascent svg {
83-
display: inline-block !important;
84-
-webkit-transform: rotate(180deg);
85-
transform: rotate(180deg); }
86-
87-
.items-per-page .active {
88-
background: #106cc8; }
89-
.items-per-page .active a {
90-
color: #fff; }
91-
92-
.items-per-page a {
93-
cursor: pointer; }
31+
text-decoration: none; }
32+
.b-change-theme__link + .b-change-theme__link {
33+
margin-left: 30px; }
34+
.b-change-theme__link:before {
35+
width: 20px;
36+
height: 20px;
37+
content: '';
38+
border-radius: 2px;
39+
border: 1px solid #999;
40+
margin-right: 8px;
41+
vertical-align: bottom;
42+
display: inline-block; }
43+
.b-change-theme__link:hover {
44+
text-decoration: underline;
45+
color: #000; }
46+
.b-change-theme__link._active {
47+
text-decoration: none;
48+
position: relative; }
49+
.b-change-theme__link._active:after {
50+
content: '';
51+
width: 12px;
52+
height: 6px;
53+
border-left: 2px solid #444;
54+
border-bottom: 2px solid #444;
55+
transform-origin: center;
56+
transform: rotate(-45deg);
57+
left: 4px;
58+
top: 5px;
59+
position: absolute; }

‎demo/index.html

+156-4
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,169 @@
33
<head lang="en">
44
<meta charset="UTF-8">
55
<title>Flat JSON format for data tables</title>
6-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
6+
<link rel="stylesheet" href="demo.css">
7+
<link rel="stylesheet" href="../dist/material.css">
78
</head>
89
<body>
9-
<div class="container">
10+
<div class="container" ng-app="myApp" ng-controller="myAppController" ng-cloak>
1011
<div class="container">
11-
<h1>TEST <a href="../index.html">Go back</a></h1>
12+
<h1>Angular Data Grid</h1>
13+
<div class="b-change-theme">
14+
<span class="b-change-theme__link _active">Material Design</span>
15+
<a href="../index.html" class="b-change-theme__link">Bootstrap</a>
16+
</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>
85+
</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>
91+
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">
148+
<pagination max-size="5"
149+
boundary-links="true"
150+
class="pagination-sm"
151+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
152+
total-items="paginationOptions.totalItems"
153+
ng-model="paginationOptions.currentPage"
154+
ng-change="reloadGrid()"
155+
items-per-page="paginationOptions.itemsPerPage"></pagination>
156+
<div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
12161
</div>
13162
</div>
14163
</body>
15164

16-
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
165+
<!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
17166
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
167+
<script src="../dist/pagination.min.js"></script>
168+
<script src="../dist/dataGrid.min.js"></script>
169+
<script src="demoApp.js"></script>
18170

19171
</html>

‎dist/dataGrid.css renamed to ‎dist/material.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
table {
22
border-collapse: collapse;
3-
border-spacing: 0; }
3+
border-spacing: 0;
4+
margin: 8px;
5+
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); }
46

57
:focus {
68
outline: none; }
@@ -55,12 +57,12 @@ table {
5557
color: #fff; }
5658

5759
.table td {
58-
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
59-
padding: 12px; }
60+
border-top: 1px rgba(0, 0, 0, 0.12) solid;
61+
padding: 12px 24px; }
6062

6163
.table th {
62-
padding: 12px;
63-
border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
64+
padding: 12px 24px;
65+
border-top: 1px rgba(0, 0, 0, 0.12) solid; }
6466

6567
th.sortable {
6668
line-height: 24px;

‎gulpfile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
gulp.src('./src/css/demo.scss')
3939
.pipe(sass().on('error', sass.logError))
4040
.pipe(gulp.dest('./demo'));
41-
gulp.src('./src/css/dataGrid.scss')
41+
gulp.src('./src/css/material.scss')
4242
.pipe(sass().on('error', sass.logError))
4343
.pipe(gulp.dest('./dist'));
4444
});

‎index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111

1212
<div class="container">
1313
<h1>Angular Data Grid</h1>
14-
14+
<div class="b-change-theme">
15+
<span class="b-change-theme__link _active">Bootstrap</span>
16+
<a href="demo/index.html" class="b-change-theme__link">Material Design</a>
17+
</div>
1518
<div class="row">
1619
<div class="col-xs-12">
1720
<div class="col-md-3">

0 commit comments

Comments
 (0)