Skip to content

Commit 067c7ec

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
add sorting arrows material theme
1 parent 17c99f0 commit 067c7ec

File tree

3 files changed

+75
-38
lines changed

3 files changed

+75
-38
lines changed

‎demo/material.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@
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">
88
<link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.1-master-a687bfc/angular-material.css">
9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
109
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
1110
<link rel="stylesheet" href="material/css/angular-data-grid.material.css">
1211
</head>
1312
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
1413
<div layout="column" layout-fill>
1514
<md-toolbar layout="row" layout-align="center">
16-
<div class="md-toolbar-tools" flex-lg="60" flex-md="80" flex-sm="100">
15+
<div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
1716
<span>Angular Data Grid &mdash; Material Design</span>
1817
<span flex></span>
1918
<md-menu md-position-mode="target-right target">
@@ -35,7 +34,7 @@
3534
</div>
3635
</md-toolbar>
3736
<md-content layout-padding layout="row" layout-align="center">
38-
<div flex-lg="60" flex-md="80" flex-xs="100">
37+
<div flex-gt-md="60" flex-md="80" flex-xs="100">
3938
<div>
4039
<h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Material styling</h3>
4140
<p class="layout-padding">Features enabled: sorting, filtering (using both in-grid and external controls), pagination and item-per-page functionality. Angular Material Datepickers used for date controls, although you can use any other framework / plugins.<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a></p>
@@ -101,7 +100,7 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
101100
<thead>
102101
<tr>
103102
<th sortable="code" class="sortable mdl-data-table__cell--non-numeric" >
104-
Order #
103+
<span>Order #</span>
105104
</th>
106105
<th class="st-sort-disable th-dropdown">
107106
<md-select filter-by="statusDisplay"
@@ -117,10 +116,10 @@ <h3 class="layout-padding">Angular Data Grid sample using out-of-box Angular Mat
117116
</md-select>
118117
</th>
119118
<th sortable="placed" class="sortable">
120-
Date Placed
119+
<span>Date Placed</span>
121120
</th>
122121
<th sortable='total.value' class="sortable">
123-
Total
122+
<span>Total</span>
124123
</th>
125124
</tr>
126125
</thead>

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

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1+
th:focus,
12
a:focus {
23
outline: none; }
34

45
.mdl-data-table {
56
width: 100%; }
67

7-
.md-errors-spacer {
8-
display: none; }
9-
108
.mdl-data-table tr {
119
transition: none !important; }
1210

@@ -55,21 +53,38 @@ md-datepicker {
5553
border-color: #3f51b5; }
5654
.pagination .active a {
5755
color: #fff; }
58-
.pagination-page {
59-
transition: background .1s ease-out, color .1s ease-out; }
60-
.pagination-page.active {
61-
background: #3f51b5; }
62-
.pagination-page.active a {
63-
color: #fff; }
56+
.pagination-page.active {
57+
background: #3f51b5; }
58+
.pagination-page.active a {
59+
color: #fff; }
60+
61+
.material-icons, .sortable span:before, .sortable span:after {
62+
font-family: 'Material Icons';
63+
font-size: 18px;
64+
-webkit-font-feature-settings: 'liga';
65+
-webkit-font-smoothing: antialiased; }
6466

65-
.sortable:after {
66-
font: 14px/1 FontAwesome;
67-
content: "\f0dc"; }
67+
.sortable span {
68+
position: relative; }
69+
.sortable span:before {
70+
content: 'arrow_drop_down';
71+
position: absolute;
72+
right: -18px;
73+
top: -2px; }
74+
.sortable span:after {
75+
content: 'arrow_drop_up';
76+
position: absolute;
77+
right: -18px;
78+
top: -9px; }
6879

69-
.sortable.sort-ascent:after {
70-
content: '\f0de';
71-
vertical-align: bottom; }
80+
.sortable.sort-ascent span:before {
81+
display: none; }
82+
83+
.sortable.sort-ascent span:after {
84+
top: -5px; }
7285

73-
.sortable.sort-descent:after {
74-
content: "\f0dd";
75-
vertical-align: top; }
86+
.sortable.sort-descent span:before {
87+
top: -5px; }
88+
89+
.sortable.sort-descent span:after {
90+
display: none; }

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

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
@import 'angular-data-grid.variables';
22

3+
th:focus,
34
a:focus {
45
outline: none;
56
}
67
.mdl-data-table {
78
width: 100%;
89
}
9-
.md-errors-spacer {
10-
display: none;
11-
}
1210
.mdl-data-table tr {
1311
transition: none !important;
1412
}
@@ -64,7 +62,6 @@ md-datepicker {
6462
}
6563
}
6664
&-page {
67-
transition: background .1s ease-out, color .1s ease-out;
6865
&.active {
6966
background: $backgroundActive;
7067
a {
@@ -73,18 +70,44 @@ md-datepicker {
7370
}
7471
}
7572
}
76-
73+
.material-icons {
74+
font-family: 'Material Icons';
75+
font-size: 18px;
76+
-webkit-font-feature-settings: 'liga';
77+
-webkit-font-smoothing: antialiased;
78+
}
7779
.sortable {
78-
&:after {
79-
font: 14px/1 FontAwesome;
80-
content: "\f0dc";
80+
span {
81+
position: relative;
82+
&:before {
83+
@extend .material-icons;
84+
content: 'arrow_drop_down';
85+
position: absolute;
86+
right: -18px;
87+
top: -2px;
88+
}
89+
&:after {
90+
@extend .material-icons;
91+
content: 'arrow_drop_up';
92+
position: absolute;
93+
right: -18px;
94+
top: -9px;
95+
}
8196
}
82-
&.sort-ascent:after {
83-
content: '\f0de';
84-
vertical-align: bottom;
97+
&.sort-ascent {
98+
span:before {
99+
display: none;
100+
}
101+
span:after {
102+
top: -5px
103+
}
85104
}
86-
&.sort-descent:after {
87-
content: "\f0dd";
88-
vertical-align: top;
105+
&.sort-descent {
106+
span:before {
107+
top: -5px
108+
}
109+
span:after {
110+
display: none;
111+
}
89112
}
90113
}

0 commit comments

Comments
 (0)