Skip to content

Commit 6f50c87

Browse files
adamdbradleyadamdbradley
committed
feat(icons): svg loaders and ionicons v2.0.1
1 parent bf40b22 commit 6f50c87

20 files changed

+2903
-1768
lines changed

Diff for: ‎config/lib/fonts/ionicons.eot

18.3 KB
Binary file not shown.

Diff for: ‎config/lib/fonts/ionicons.svg

+1,028-697
Loading

Diff for: ‎config/lib/fonts/ionicons.ttf

23.4 KB
Binary file not shown.

Diff for: ‎config/lib/fonts/ionicons.woff

10.4 KB
Binary file not shown.

Diff for: ‎js/angular/controller/loaderController.js

+425
Large diffs are not rendered by default.

Diff for: ‎js/angular/controller/scrollController.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,8 @@ function($scope, scrollViewOptions, $timeout, $window, $location, $document, $io
198198

199199
function onPullProgress(progress) {
200200
$scope.$broadcast('$ionicRefresher.pullProgress', progress);
201-
(refresherScope.$onPullProgress || angular.noop)(progress);
201+
refresherScope.$onPullProgress && refresherScope.$onPullProgress(progress);
202202
}
203203
};
204+
204205
}]);

Diff for: ‎js/angular/directive/loader.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @ngdoc directive
3+
* @name ionLoader
4+
* @module ionic
5+
* @restrict E
6+
* @description
7+
*/
8+
IonicModule
9+
.directive('ionLoader', function() {
10+
return {
11+
restrict: 'E',
12+
controller: '$ionicLoader',
13+
link: function($scope, $element, $attrs, ctrl) {
14+
ctrl.init();
15+
}
16+
};
17+
});

Diff for: ‎js/angular/directive/refresher.js

+31-30
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
* from `0` and `1`. For example, if the user has pulled the refresher halfway
5454
* down, its progress would be `0.5`.
5555
* @param {string=} pulling-icon The icon to display while the user is pulling down.
56-
* Default: 'ion-arrow-down-c'.
56+
* Default: 'ion-android-arrow-down'.
5757
* @param {string=} pulling-text The text to display while the user is pulling down.
5858
* @param {string=} refreshing-icon The icon to display after user lets go of the
5959
* refresher.
@@ -77,44 +77,45 @@ IonicModule
7777
'<i class="icon {{pullingIcon}}"></i>' +
7878
'</div>' +
7979
'<div class="text-pulling" ng-bind-html="pullingText"></div>' +
80-
'<div class="icon-refreshing"><i class="icon {{refreshingIcon}}"></i></div>' +
80+
'<div class="icon-refreshing">' +
81+
'<ion-loader ng-if="showLoader" icon="{{loader}}"></ion-loader>' +
82+
'<i ng-if="!showLoader" class="icon {{refreshingIcon}}"></i>' +
83+
'</div>' +
8184
'<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
8285
'</div>' +
8386
'</div>',
84-
compile: function($element, $attrs) {
87+
link: function($scope, $element, $attrs, scrollCtrl) {
8588
if (angular.isUndefined($attrs.pullingIcon)) {
86-
$attrs.$set('pullingIcon', 'ion-ios7-arrow-down');
87-
}
88-
if (angular.isUndefined($attrs.refreshingIcon)) {
89-
$attrs.$set('refreshingIcon', 'ion-loading-d');
89+
$attrs.$set('pullingIcon', 'ion-android-arrow-down');
9090
}
91-
return function($scope, $element, $attrs, scrollCtrl) {
92-
$ionicBind($scope, $attrs, {
93-
pullingIcon: '@',
94-
pullingText: '@',
95-
refreshingIcon: '@',
96-
refreshingText: '@',
97-
disablePullingRotation: '@',
98-
$onRefresh: '&onRefresh',
99-
$onPulling: '&onPulling'
100-
});
91+
$scope.showLoader = angular.isUndefined($attrs.refreshingIcon);
10192

102-
if (isDefined($attrs.onPullProgress)) {
103-
var onPullProgressFn = $parse($attrs.onPullProgress);
104-
$scope.$onPullProgress = function(progress) {
105-
onPullProgressFn($scope, {
106-
progress: progress
107-
});
108-
};
109-
}
93+
$ionicBind($scope, $attrs, {
94+
pullingIcon: '@',
95+
pullingText: '@',
96+
refreshingIcon: '@',
97+
refreshingText: '@',
98+
loader: '@',
99+
disablePullingRotation: '@',
100+
$onRefresh: '&onRefresh',
101+
$onPulling: '&onPulling'
102+
});
110103

111-
scrollCtrl._setRefresher($scope, $element[0]);
112-
$scope.$on('scroll.refreshComplete', function() {
113-
$scope.$evalAsync(function() {
114-
scrollCtrl.scrollView.finishPullToRefresh();
104+
if (isDefined($attrs.onPullProgress)) {
105+
var onPullProgressFn = $parse($attrs.onPullProgress);
106+
$scope.$onPullProgress = function(progress) {
107+
onPullProgressFn($scope, {
108+
progress: progress
115109
});
110+
};
111+
}
112+
113+
scrollCtrl._setRefresher($scope, $element[0]);
114+
$scope.$on('scroll.refreshComplete', function() {
115+
$scope.$evalAsync(function() {
116+
scrollCtrl.scrollView.finishPullToRefresh();
116117
});
117-
};
118+
});
118119
}
119120
};
120121
}]);

Diff for: ‎js/angular/directive/tabs.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@
2424
* ```html
2525
* <ion-tabs class="tabs-positive tabs-icon-only">
2626
*
27-
* <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
27+
* <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
2828
* <!-- Tab 1 content -->
2929
* </ion-tab>
3030
*
31-
* <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
31+
* <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
3232
* <!-- Tab 2 content -->
3333
* </ion-tab>
3434
*
35-
* <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
35+
* <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
3636
* <!-- Tab 3 content -->
3737
* </ion-tab>
3838
*

Diff for: ‎js/angular/service/ionicConfig.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ IonicModule
256256
},
257257

258258
backButton: {
259-
icon: 'ion-ios7-arrow-back',
259+
icon: 'ion-ios-arrow-back',
260260
text: 'Back',
261261
previousTitleText: true
262262
},
@@ -303,7 +303,7 @@ IonicModule
303303
},
304304

305305
backButton: {
306-
icon: 'ion-arrow-left-c',
306+
icon: 'ion-android-arrow-back',
307307
text: false,
308308
previousTitleText: false
309309
},

Diff for: ‎scss/_loaders.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Loaders (Spinners)
3+
* --------------------------------------------------
4+
*/
5+
6+
svg.loader {
7+
width: 28px;
8+
height: 28px;
9+
stroke: #333;
10+
fill: #333;
11+
}
12+
13+
.loader-ios,
14+
.loader-ios-small {
15+
16+
line {
17+
stroke: #69717d;
18+
}
19+
20+
}
21+
22+
.loader-android {
23+
24+
circle {
25+
stroke: #4b8bf4;
26+
}
27+
28+
}

Diff for: ‎scss/_platform.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
.platform-ios.platform-cordova {
9-
// iOS7/8 has a status bar which sits on top of the header.
9+
// iOS has a status bar which sits on top of the header.
1010
// Bump down everything to make room for it. However, if
1111
// if its in Cordova, and set to fullscreen, then disregard the bump.
1212
&:not(.fullscreen) {

Diff for: ‎scss/_refresher.scss

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
2+
// Scroll refresher (for pull to refresh)
3+
.scroll-refresher {
4+
position: absolute;
5+
top: -60px;
6+
right: 0;
7+
left: 0;
8+
overflow: hidden;
9+
margin: auto;
10+
height: 60px;
11+
12+
.ionic-refresher-content {
13+
position: absolute;
14+
bottom: 15px;
15+
left: 0;
16+
width: 100%;
17+
color: $scroll-refresh-icon-color;
18+
text-align: center;
19+
20+
font-size: 30px;
21+
22+
.text-refreshing,
23+
.text-pulling {
24+
font-size: 16px;
25+
line-height: 16px;
26+
}
27+
&.ionic-refresher-with-text {
28+
bottom: 10px;
29+
}
30+
}
31+
32+
.icon-refreshing,
33+
.icon-pulling {
34+
width: 100%;
35+
-webkit-backface-visibility: hidden;
36+
backface-visibility: hidden;
37+
-webkit-transform-style: preserve-3d;
38+
transform-style: preserve-3d;
39+
}
40+
.icon-pulling {
41+
@include animation-name(refresh-spin-back);
42+
@include animation-duration(200ms);
43+
@include animation-timing-function(linear);
44+
@include animation-fill-mode(none);
45+
-webkit-transform: translate3d(0,0,0) rotate(0deg);
46+
transform: translate3d(0,0,0) rotate(0deg);
47+
}
48+
.icon-refreshing,
49+
.text-refreshing {
50+
display: none;
51+
}
52+
.icon-refreshing {
53+
@include animation-duration(1.5s);
54+
}
55+
56+
&.active {
57+
.icon-pulling:not(.pulling-rotation-disabled) {
58+
@include animation-name(refresh-spin);
59+
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
60+
transform: translate3d(0,0,0) rotate(-180deg);
61+
}
62+
&.refreshing {
63+
@include transition(-webkit-transform .2s);
64+
@include transition(transform .2s);
65+
-webkit-transform: scale(1,1);
66+
transform: scale(1,1);
67+
68+
.icon-pulling,
69+
.text-pulling {
70+
display: none;
71+
}
72+
.icon-refreshing,
73+
.text-refreshing {
74+
display: block;
75+
}
76+
&.refreshing-tail {
77+
-webkit-transform: scale(0,0);
78+
transform: scale(0,0);
79+
}
80+
}
81+
}
82+
}
83+
84+
@-webkit-keyframes refresh-spin {
85+
0% { -webkit-transform: translate3d(0,0,0) rotate(0); }
86+
100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
87+
}
88+
89+
@keyframes refresh-spin {
90+
0% { transform: translate3d(0,0,0) rotate(0); }
91+
100% { transform: translate3d(0,0,0) rotate(180deg); }
92+
}
93+
94+
@-webkit-keyframes refresh-spin-back {
95+
0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
96+
100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
97+
}
98+
99+
@keyframes refresh-spin-back {
100+
0% { transform: translate3d(0,0,0) rotate(180deg); }
101+
100% { transform: translate3d(0,0,0) rotate(0); }
102+
}

Diff for: ‎scss/_scaffolding.scss

-101
Original file line numberDiff line numberDiff line change
@@ -157,107 +157,6 @@ body.grade-c {
157157
}
158158
}
159159

160-
@keyframes refresh-spin {
161-
0% { transform: translate3d(0,0,0) rotate(0); }
162-
100% { transform: translate3d(0,0,0) rotate(180deg); }
163-
}
164-
165-
@-webkit-keyframes refresh-spin {
166-
0% {-webkit-transform: translate3d(0,0,0) rotate(0); }
167-
100% {-webkit-transform: translate3d(0,0,0) rotate(180deg); }
168-
}
169-
170-
@keyframes refresh-spin-back {
171-
0% { transform: translate3d(0,0,0) rotate(180deg); }
172-
100% { transform: translate3d(0,0,0) rotate(0); }
173-
}
174-
175-
@-webkit-keyframes refresh-spin-back {
176-
0% {-webkit-transform: translate3d(0,0,0) rotate(180deg); }
177-
100% {-webkit-transform: translate3d(0,0,0) rotate(0); }
178-
}
179-
180-
// Scroll refresher (for pull to refresh)
181-
.scroll-refresher {
182-
position: absolute;
183-
top: -60px;
184-
right: 0;
185-
left: 0;
186-
overflow: hidden;
187-
margin: auto;
188-
height: 60px;
189-
190-
.ionic-refresher-content {
191-
position: absolute;
192-
bottom: 15px;
193-
left: 0;
194-
width: 100%;
195-
color: $scroll-refresh-icon-color;
196-
text-align: center;
197-
198-
font-size: 30px;
199-
200-
.text-refreshing,
201-
.text-pulling {
202-
font-size: 16px;
203-
line-height: 16px;
204-
}
205-
&.ionic-refresher-with-text {
206-
bottom: 10px;
207-
}
208-
}
209-
210-
.icon-refreshing,
211-
.icon-pulling {
212-
width: 100%;
213-
-webkit-backface-visibility: hidden;
214-
-webkit-transform-style: preserve-3d;
215-
backface-visibility: hidden;
216-
transform-style: preserve-3d;
217-
}
218-
.icon-pulling {
219-
@include animation-name(refresh-spin-back);
220-
@include animation-duration(200ms);
221-
@include animation-timing-function(linear);
222-
@include animation-fill-mode(none);
223-
-webkit-transform: translate3d(0,0,0) rotate(0deg);
224-
transform: translate3d(0,0,0) rotate(0deg);
225-
}
226-
.icon-refreshing,
227-
.text-refreshing {
228-
display: none;
229-
}
230-
.icon-refreshing {
231-
@include animation-duration(1.5s);
232-
}
233-
234-
&.active {
235-
.icon-pulling:not(.pulling-rotation-disabled) {
236-
@include animation-name(refresh-spin);
237-
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
238-
transform: translate3d(0,0,0) rotate(-180deg);
239-
}
240-
&.refreshing {
241-
@include transition(transform .2s);
242-
@include transition(-webkit-transform .2s);
243-
-webkit-transform: scale(1,1);
244-
transform: scale(1,1);
245-
.icon-pulling,
246-
.text-pulling {
247-
display: none;
248-
}
249-
.icon-refreshing,
250-
.text-refreshing {
251-
display: block;
252-
}
253-
&.refreshing-tail{
254-
-webkit-transform: scale(0,0);
255-
transform: scale(0,0);
256-
}
257-
}
258-
}
259-
}
260-
261160
ion-infinite-scroll {
262161
height: 60px;
263162
width: 100%;

0 commit comments

Comments
 (0)