Skip to content

Commit

Permalink
feat(icons): svg loaders and ionicons v2.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
adamdbradley committed Jan 15, 2015
1 parent bf40b22 commit 6f50c87
Show file tree
Hide file tree
Showing 20 changed files with 2,903 additions and 1,768 deletions.
Binary file modified config/lib/fonts/ionicons.eot
Binary file not shown.
1,725 changes: 1,028 additions & 697 deletions config/lib/fonts/ionicons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified config/lib/fonts/ionicons.ttf
Binary file not shown.
Binary file modified config/lib/fonts/ionicons.woff
Binary file not shown.
425 changes: 425 additions & 0 deletions js/angular/controller/loaderController.js

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion js/angular/controller/scrollController.js
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,8 @@ function($scope, scrollViewOptions, $timeout, $window, $location, $document, $io

function onPullProgress(progress) {
$scope.$broadcast('$ionicRefresher.pullProgress', progress);
(refresherScope.$onPullProgress || angular.noop)(progress);
refresherScope.$onPullProgress && refresherScope.$onPullProgress(progress);
}
};

}]);
17 changes: 17 additions & 0 deletions js/angular/directive/loader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* @ngdoc directive
* @name ionLoader
* @module ionic
* @restrict E
* @description
*/
IonicModule
.directive('ionLoader', function() {
return {
restrict: 'E',
controller: '$ionicLoader',
link: function($scope, $element, $attrs, ctrl) {
ctrl.init();
}
};
});
61 changes: 31 additions & 30 deletions js/angular/directive/refresher.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
* from `0` and `1`. For example, if the user has pulled the refresher halfway
* down, its progress would be `0.5`.
* @param {string=} pulling-icon The icon to display while the user is pulling down.
* Default: 'ion-arrow-down-c'.
* Default: 'ion-android-arrow-down'.
* @param {string=} pulling-text The text to display while the user is pulling down.
* @param {string=} refreshing-icon The icon to display after user lets go of the
* refresher.
Expand All @@ -77,44 +77,45 @@ IonicModule
'<i class="icon {{pullingIcon}}"></i>' +
'</div>' +
'<div class="text-pulling" ng-bind-html="pullingText"></div>' +
'<div class="icon-refreshing"><i class="icon {{refreshingIcon}}"></i></div>' +
'<div class="icon-refreshing">' +
'<ion-loader ng-if="showLoader" icon="{{loader}}"></ion-loader>' +
'<i ng-if="!showLoader" class="icon {{refreshingIcon}}"></i>' +
'</div>' +
'<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
'</div>' +
'</div>',
compile: function($element, $attrs) {
link: function($scope, $element, $attrs, scrollCtrl) {
if (angular.isUndefined($attrs.pullingIcon)) {
$attrs.$set('pullingIcon', 'ion-ios7-arrow-down');
}
if (angular.isUndefined($attrs.refreshingIcon)) {
$attrs.$set('refreshingIcon', 'ion-loading-d');
$attrs.$set('pullingIcon', 'ion-android-arrow-down');
}
return function($scope, $element, $attrs, scrollCtrl) {
$ionicBind($scope, $attrs, {
pullingIcon: '@',
pullingText: '@',
refreshingIcon: '@',
refreshingText: '@',
disablePullingRotation: '@',
$onRefresh: '&onRefresh',
$onPulling: '&onPulling'
});
$scope.showLoader = angular.isUndefined($attrs.refreshingIcon);

if (isDefined($attrs.onPullProgress)) {
var onPullProgressFn = $parse($attrs.onPullProgress);
$scope.$onPullProgress = function(progress) {
onPullProgressFn($scope, {
progress: progress
});
};
}
$ionicBind($scope, $attrs, {
pullingIcon: '@',
pullingText: '@',
refreshingIcon: '@',
refreshingText: '@',
loader: '@',
disablePullingRotation: '@',
$onRefresh: '&onRefresh',
$onPulling: '&onPulling'
});

scrollCtrl._setRefresher($scope, $element[0]);
$scope.$on('scroll.refreshComplete', function() {
$scope.$evalAsync(function() {
scrollCtrl.scrollView.finishPullToRefresh();
if (isDefined($attrs.onPullProgress)) {
var onPullProgressFn = $parse($attrs.onPullProgress);
$scope.$onPullProgress = function(progress) {
onPullProgressFn($scope, {
progress: progress
});
};
}

scrollCtrl._setRefresher($scope, $element[0]);
$scope.$on('scroll.refreshComplete', function() {
$scope.$evalAsync(function() {
scrollCtrl.scrollView.finishPullToRefresh();
});
};
});
}
};
}]);
6 changes: 3 additions & 3 deletions js/angular/directive/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
* ```html
* <ion-tabs class="tabs-positive tabs-icon-only">
*
* <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
* <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
* <!-- Tab 1 content -->
* </ion-tab>
*
* <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
* <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
* <!-- Tab 2 content -->
* </ion-tab>
*
* <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
* <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
* <!-- Tab 3 content -->
* </ion-tab>
*
Expand Down
4 changes: 2 additions & 2 deletions js/angular/service/ionicConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ IonicModule
},

backButton: {
icon: 'ion-ios7-arrow-back',
icon: 'ion-ios-arrow-back',
text: 'Back',
previousTitleText: true
},
Expand Down Expand Up @@ -303,7 +303,7 @@ IonicModule
},

backButton: {
icon: 'ion-arrow-left-c',
icon: 'ion-android-arrow-back',
text: false,
previousTitleText: false
},
Expand Down
28 changes: 28 additions & 0 deletions scss/_loaders.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* Loaders (Spinners)
* --------------------------------------------------
*/

svg.loader {
width: 28px;
height: 28px;
stroke: #333;
fill: #333;
}

.loader-ios,
.loader-ios-small {

line {
stroke: #69717d;
}

}

.loader-android {

circle {
stroke: #4b8bf4;
}

}
2 changes: 1 addition & 1 deletion scss/_platform.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

.platform-ios.platform-cordova {
// iOS7/8 has a status bar which sits on top of the header.
// iOS has a status bar which sits on top of the header.
// Bump down everything to make room for it. However, if
// if its in Cordova, and set to fullscreen, then disregard the bump.
&:not(.fullscreen) {
Expand Down
102 changes: 102 additions & 0 deletions scss/_refresher.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@

// Scroll refresher (for pull to refresh)
.scroll-refresher {
position: absolute;
top: -60px;
right: 0;
left: 0;
overflow: hidden;
margin: auto;
height: 60px;

.ionic-refresher-content {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
color: $scroll-refresh-icon-color;
text-align: center;

font-size: 30px;

.text-refreshing,
.text-pulling {
font-size: 16px;
line-height: 16px;
}
&.ionic-refresher-with-text {
bottom: 10px;
}
}

.icon-refreshing,
.icon-pulling {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.icon-pulling {
@include animation-name(refresh-spin-back);
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(none);
-webkit-transform: translate3d(0,0,0) rotate(0deg);
transform: translate3d(0,0,0) rotate(0deg);
}
.icon-refreshing,
.text-refreshing {
display: none;
}
.icon-refreshing {
@include animation-duration(1.5s);
}

&.active {
.icon-pulling:not(.pulling-rotation-disabled) {
@include animation-name(refresh-spin);
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
transform: translate3d(0,0,0) rotate(-180deg);
}
&.refreshing {
@include transition(-webkit-transform .2s);
@include transition(transform .2s);
-webkit-transform: scale(1,1);
transform: scale(1,1);

.icon-pulling,
.text-pulling {
display: none;
}
.icon-refreshing,
.text-refreshing {
display: block;
}
&.refreshing-tail {
-webkit-transform: scale(0,0);
transform: scale(0,0);
}
}
}
}

@-webkit-keyframes refresh-spin {
0% { -webkit-transform: translate3d(0,0,0) rotate(0); }
100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
}

@keyframes refresh-spin {
0% { transform: translate3d(0,0,0) rotate(0); }
100% { transform: translate3d(0,0,0) rotate(180deg); }
}

@-webkit-keyframes refresh-spin-back {
0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
}

@keyframes refresh-spin-back {
0% { transform: translate3d(0,0,0) rotate(180deg); }
100% { transform: translate3d(0,0,0) rotate(0); }
}
101 changes: 0 additions & 101 deletions scss/_scaffolding.scss
Original file line number Diff line number Diff line change
Expand Up @@ -157,107 +157,6 @@ body.grade-c {
}
}

@keyframes refresh-spin {
0% { transform: translate3d(0,0,0) rotate(0); }
100% { transform: translate3d(0,0,0) rotate(180deg); }
}

@-webkit-keyframes refresh-spin {
0% {-webkit-transform: translate3d(0,0,0) rotate(0); }
100% {-webkit-transform: translate3d(0,0,0) rotate(180deg); }
}

@keyframes refresh-spin-back {
0% { transform: translate3d(0,0,0) rotate(180deg); }
100% { transform: translate3d(0,0,0) rotate(0); }
}

@-webkit-keyframes refresh-spin-back {
0% {-webkit-transform: translate3d(0,0,0) rotate(180deg); }
100% {-webkit-transform: translate3d(0,0,0) rotate(0); }
}

// Scroll refresher (for pull to refresh)
.scroll-refresher {
position: absolute;
top: -60px;
right: 0;
left: 0;
overflow: hidden;
margin: auto;
height: 60px;

.ionic-refresher-content {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
color: $scroll-refresh-icon-color;
text-align: center;

font-size: 30px;

.text-refreshing,
.text-pulling {
font-size: 16px;
line-height: 16px;
}
&.ionic-refresher-with-text {
bottom: 10px;
}
}

.icon-refreshing,
.icon-pulling {
width: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.icon-pulling {
@include animation-name(refresh-spin-back);
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(none);
-webkit-transform: translate3d(0,0,0) rotate(0deg);
transform: translate3d(0,0,0) rotate(0deg);
}
.icon-refreshing,
.text-refreshing {
display: none;
}
.icon-refreshing {
@include animation-duration(1.5s);
}

&.active {
.icon-pulling:not(.pulling-rotation-disabled) {
@include animation-name(refresh-spin);
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
transform: translate3d(0,0,0) rotate(-180deg);
}
&.refreshing {
@include transition(transform .2s);
@include transition(-webkit-transform .2s);
-webkit-transform: scale(1,1);
transform: scale(1,1);
.icon-pulling,
.text-pulling {
display: none;
}
.icon-refreshing,
.text-refreshing {
display: block;
}
&.refreshing-tail{
-webkit-transform: scale(0,0);
transform: scale(0,0);
}
}
}
}

ion-infinite-scroll {
height: 60px;
width: 100%;
Expand Down
Loading

0 comments on commit 6f50c87

Please sign in to comment.