diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index e83a56a0825..432a7f173cb 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -71,7 +71,7 @@ function($timeout, $controller, $ionicBind) { element.addClass('scroll-content'); if (attr.scroll != 'false') { - //We cannot use normal transclude here because it breaks element.data() + //We cannot use normal transclude here because it breaks element.data() //inheritance on compile innerElement = angular.element('
'); innerElement.append(element.contents()); @@ -208,11 +208,11 @@ function($timeout, $controller, $ionicBind) { require: '^$ionicScroll', template: '
' + - '
' + + '
' + '' + - '
' + + '
' + '' + - '
' + + '
' + '
' + '
', compile: function($element, $attrs) { diff --git a/js/ext/angular/test/list-fit.html b/js/ext/angular/test/list-fit.html index ba78e419d8e..53aa56221da 100644 --- a/js/ext/angular/test/list-fit.html +++ b/js/ext/angular/test/list-fit.html @@ -70,7 +70,7 @@

Footer!

$scope.onRefresh = function() { $timeout(function() { $scope.$broadcast('scroll.refreshComplete'); - }, 1000); + }, 1500); }; $scope.more = []; $scope.addMore = function() { diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index ae765f41eab..d487ab953f4 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -138,52 +138,6 @@ body.grade-c { } } - -// Scroll refresher (for pull to refresh) -.scroll-refresher { - position: absolute; - top: -60px; - right: 0; - left: 0; - overflow: hidden; - margin: auto; - height: 60px; - - .icon-refreshing { - @include animation-duration(1.5s); - display: none; - } -} - -.scroll-refresher-content { - position: absolute; - bottom: 15px; - left: 0; - width: 100%; - color: $scroll-refresh-icon-color; - text-align: center; - - font-size: 30px; -} - -.ionic-refresher-content { - position: absolute; - bottom: 15px; - left: 0; - width: 100%; - color: $scroll-refresh-icon-color; - text-align: center; - - font-size: 30px; - - .icon-pulling { - @include animation-name(refresh-spin-back); - @include animation-duration(200ms); - @include animation-timing-function(linear); - @include animation-fill-mode(both); - } -} - @keyframes refresh-spin { 0% { transform: rotate(0); } 100% { transform: rotate(-180deg); } @@ -204,31 +158,84 @@ body.grade-c { 100% {-webkit-transform: rotate(0); } } -.scroll-refresher.active { +// 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 { + line-height: 16px; + font-size: 16px; + } + } .icon-pulling { - display: block; + @include animation-name(refresh-spin-back); + @include animation-duration(200ms); + @include animation-timing-function(linear); + @include animation-fill-mode(both); } - .icon-refreshing { + .icon-refreshing, + .text-refreshing { display: none; } + .icon-refreshing { + @include animation-duration(1.5s); + } - &.refreshing { + &.active { + .icon-pulling, + .text-pulling { + display: block; + } .icon-pulling { - display: none; + @include animation-name(refresh-spin); } - .icon-refreshing { - display: block; + .icon-refreshing, + .text-refreshing { + display: none; } - } - .ionic-refresher-content { - i.icon.icon-pulling { - @include animation-name(refresh-spin); + &.refreshing { + .icon-pulling, + .text-pulling { + display: none; + } + .icon-refreshing, + .text-refreshing { + display: block; + } } } } +.scroll-refresher-content { + position: absolute; + bottom: 15px; + left: 0; + width: 100%; + color: $scroll-refresh-icon-color; + text-align: center; + + font-size: 30px; +} + // Infinite scroll ion-infinite-scroll .scroll-infinite { position: relative;