Skip to content

Commit 4c733b8

Browse files
Alexander ZhukAlexander Zhuk
Alexander Zhuk
authored and
Alexander Zhuk
committed
Merge remote-tracking branch 'origin/master'
2 parents fa133e6 + 4b2ace6 commit 4c733b8

7 files changed

+273
-287
lines changed

‎demo/fixed-header/angular-md-grid.html

+200-194
Large diffs are not rendered by default.

‎demo/material/css/angular-data-grid.material.css

+14-28
Original file line numberDiff line numberDiff line change
@@ -51,33 +51,19 @@ th md-select {
5151
.pagination-page.active a {
5252
color: #fff; }
5353

54-
.material-icons, .sortable span:before, .sortable span:after {
55-
font-family: 'Material Icons';
56-
font-size: 18px;
57-
-webkit-font-feature-settings: 'liga';
58-
-webkit-font-smoothing: antialiased; }
54+
.sortable .arrow {
55+
position: relative;
56+
width: 0;
57+
height: 0;
58+
border-left: 4px solid transparent;
59+
border-right: 4px solid transparent; }
5960

60-
.sortable span {
61-
position: relative; }
62-
.sortable span:before {
63-
content: 'arrow_drop_down';
64-
position: absolute;
65-
right: -18px;
66-
top: -2px; }
67-
.sortable span:after {
68-
content: 'arrow_drop_up';
69-
position: absolute;
70-
right: -18px;
71-
top: -9px; }
61+
.sortable.sort-ascent .arrow {
62+
top: -10px;
63+
left: 5px;
64+
border-bottom: 4px solid #757575; }
7265

73-
.sortable.sort-ascent span:before {
74-
display: none; }
75-
76-
.sortable.sort-ascent span:after {
77-
top: -5px; }
78-
79-
.sortable.sort-descent span:before {
80-
top: -5px; }
81-
82-
.sortable.sort-descent span:after {
83-
display: none; }
66+
.sortable.sort-descent .arrow {
67+
top: 10px;
68+
left: 5px;
69+
border-top: 4px solid #757575; }

‎demo/material/index.html

+36-32
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@
55
<title>Angular Data Grid - Material Design</title>
66
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
8-
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
9-
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
8+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
9+
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.3.0/material.indigo-blue.min.css">
1010
<link rel="stylesheet" href="css/angular-data-grid.material.css">
1111
</head>
1212
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
1313
<div layout="column" layout-fill>
1414
<md-toolbar layout="row" layout-align="center">
1515
<div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
1616
<span>Angular Data Grid &mdash; Material Design</span>
17-
<span flex></span>
1817
<md-menu md-position-mode="target-right target">
1918
<md-button ng-click="$mdOpenMenu($event)">
2019
<span layout="row" layout-align="center center">
@@ -33,27 +32,26 @@
3332
</md-menu>
3433
</div>
3534
</md-toolbar>
36-
<md-content layout-padding layout="row" layout-align="center">
35+
<div layout-padding layout="row" layout-align="center">
3736
<div flex-gt-md="60" flex-md="80" flex-xs="100">
38-
<div>
39-
<h4>Angular Data Grid sample using Material Design styling</h4>
37+
<h4>Angular Data Grid sample using Material Design styling</h4>
4038

41-
<p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
42-
Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and input controls used,
43-
along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for grid styling.
44-
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
45-
target="_blank">Project GitHub</a></p>
46-
</div>
39+
<p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
40+
Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and input controls used,
41+
along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for grid styling.
42+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
43+
target="_blank">Project GitHub</a></p>
4744
<h4>Additional Demos</h4>
4845
<ul>
4946
<li>
5047
<a href="../fixed-header/angular-md-grid.html" target="_blank">Fixed header table</a>
5148
</li>
5249
</ul>
5350
<hr>
51+
5452
<div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
55-
<div layout="row" layout-align="center start">
56-
<md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
53+
<div layout="row" layout-align="start center">
54+
<md-input-container md-no-float md-is-error="false" class="md-block">
5755
<input ng-model="code"
5856
class="md-input"
5957
ng-change="gridActions.filter()"
@@ -64,28 +62,31 @@ <h4>Additional Demos</h4>
6462
aria-invalid="false">
6563
</md-input-container>
6664
</div>
67-
<div layout="row" layout-align="start center">
65+
<div layout="row" layout-align="start center">
6866
<md-datepicker ng-model="dateFrom"
69-
flex="100"
7067
md-placeholder="From Date"
7168
is-open="dateFromOpened"
7269
ng-click="dateFromOpened = true"
7370
filter-by="placed"
7471
filter-type="dateFrom"
75-
ng-change="gridActions.filter()"></md-datepicker>
72+
ng-change="gridActions.filter()">
73+
</md-datepicker>
7674
</div>
77-
<div layout="row" layout-align="start center">
75+
<div layout="row" layout-align="start center">
7876
<md-datepicker ng-model="dateTo"
79-
flex="100"
8077
md-placeholder="To Date"
8178
is-open="dateToOpened"
8279
ng-click="dateToOpened = true"
8380
filter-by="placed"
8481
filter-type="dateTo"
85-
ng-change="gridActions.filter()"></md-datepicker>
82+
ng-change="gridActions.filter()">
83+
</md-datepicker>
8684
</div>
87-
<div layout="row" layout-align="start center">
88-
<md-button ng-show="dateTo || dateFrom" class="md-raised md-primary" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</md-button>
85+
<div layout="row" layout-align="start center">
86+
<md-button ng-show="dateTo || dateFrom"
87+
class="md-raised md-primary"
88+
ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
89+
</md-button>
8990
</div>
9091
</div>
9192
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
@@ -105,10 +106,10 @@ <h4>Additional Demos</h4>
105106
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
106107
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
107108
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
108-
<md-option>10</md-option>
109-
<md-option>25</md-option>
110-
<md-option>50</md-option>
111-
<md-option>75</md-option>
109+
<md-option ng-value="10">10</md-option>
110+
<md-option ng-value="25">25</md-option>
111+
<md-option ng-value="50">50</md-option>
112+
<md-option ng-value="75">75</md-option>
112113
</md-select>
113114
</md-input-container>
114115
</div>
@@ -120,6 +121,7 @@ <h4>Additional Demos</h4>
120121
<tr>
121122
<th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
122123
<span>Order #</span>
124+
<span class="arrow"></span>
123125
</th>
124126
<th class="st-sort-disable th-dropdown">
125127
<md-select filter-by="statusDisplay"
@@ -136,9 +138,11 @@ <h4>Additional Demos</h4>
136138
</th>
137139
<th sortable="placed" class="sortable">
138140
<span>Date Placed</span>
141+
<span class="arrow"></span>
139142
</th>
140143
<th sortable='total.value' class="sortable">
141144
<span>Total</span>
145+
<span class="arrow"></span>
142146
</th>
143147
</tr>
144148
</thead>
@@ -165,10 +169,10 @@ <h4>Additional Demos</h4>
165169
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
166170
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
167171
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
168-
<md-option>10</md-option>
169-
<md-option>25</md-option>
170-
<md-option>50</md-option>
171-
<md-option>75</md-option>
172+
<md-option ng-value="10">10</md-option>
173+
<md-option ng-value="25">25</md-option>
174+
<md-option ng-value="50">50</md-option>
175+
<md-option ng-value="75">75</md-option>
172176
</md-select>
173177
</md-input-container>
174178
</div>
@@ -183,15 +187,15 @@ <h4>Additional Demos</h4>
183187
</div>
184188
<hr>
185189
</div>
186-
</md-content>
190+
</div>
187191
</div>
188192
</body>
189193

190194
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
191195
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
192196
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
193197
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
194-
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
198+
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
195199
<script src="../../dist/pagination.min.js"></script>
196200
<script src="../../dist/dataGrid.min.js"></script>
197201
<script src="js/demoApp.js"></script>

‎demo/material/scss/angular-data-grid.material.scss

+13-31
Original file line numberDiff line numberDiff line change
@@ -64,44 +64,26 @@ th md-select {
6464
}
6565
}
6666
}
67-
.material-icons {
68-
font-family: 'Material Icons';
69-
font-size: 18px;
70-
-webkit-font-feature-settings: 'liga';
71-
-webkit-font-smoothing: antialiased;
72-
}
7367
.sortable {
74-
span {
68+
.arrow {
7569
position: relative;
76-
&:before {
77-
@extend .material-icons;
78-
content: 'arrow_drop_down';
79-
position: absolute;
80-
right: -18px;
81-
top: -2px;
82-
}
83-
&:after {
84-
@extend .material-icons;
85-
content: 'arrow_drop_up';
86-
position: absolute;
87-
right: -18px;
88-
top: -9px;
89-
}
70+
width: 0;
71+
height: 0;
72+
border-left: 4px solid transparent;
73+
border-right: 4px solid transparent;
9074
}
9175
&.sort-ascent {
92-
span:before {
93-
display: none;
94-
}
95-
span:after {
96-
top: -5px
76+
.arrow {
77+
top: -10px;
78+
left: 5px;
79+
border-bottom: 4px solid $backgroundArrows;
9780
}
9881
}
9982
&.sort-descent {
100-
span:before {
101-
top: -5px
102-
}
103-
span:after {
104-
display: none;
83+
.arrow {
84+
top: 10px;
85+
left: 5px;
86+
border-top: 4px solid $backgroundArrows;
10587
}
10688
}
10789
}

‎demo/material/scss/angular-data-grid.variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ $backgroundActive: rgb(63, 81, 181);
22
$foregroundActive: #fff;
33
$foregroundPagination: #ddd;
44
$foregroundDefault: #444;
5-
$backgroundIcons: #333;
5+
$backgroundIcons: #333;
6+
$backgroundArrows: #757575;

‎index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
require('./dist/dataGrid');
2+
require('./dist/pagination');
3+
4+
module.exports = {
5+
dataGrid: 'dataGrid',
6+
pagination: 'pagination',
7+
};

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"gulp-uglify": "^1.4.2"
1616
},
1717
"description": "Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, \r seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.",
18-
"main": "index.html",
18+
"main": "index.js",
1919
"devDependencies": {},
2020
"repository": {
2121
"type": "git",

0 commit comments

Comments
 (0)