fix(ionRefresher): do not animate pulling-text

Closes #909
ionic-team · Mar 27, 2014 · 5c893ab · 5c893ab
1 parent 7eff208
commit 5c893ab
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 62 deletions.
diff --git 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('<div class="scroll"></div>');
         innerElement.append(element.contents());
@@ -208,11 +208,11 @@ function($timeout, $controller, $ionicBind) {
     require: '^$ionicScroll',
     template:
     '<div class="scroll-refresher">' +
-    '<div class="ionic-refresher-content">' +
+      '<div class="ionic-refresher-content">' +
         '<i class="icon {{pullingIcon}} icon-pulling"></i>' +
-        '<div class="icon-pulling pulling-text" ng-bind-html="pullingText"></div>' +
+        '<div class="text-pulling" ng-bind-html="pullingText"></div>' +
         '<i class="icon {{refreshingIcon}} icon-refreshing"></i>' +
-        '<div class="icon-refreshing refreshing-text" ng-bind-html="refreshingText"></div>' +
+        '<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
       '</div>' +
     '</div>',
     compile: function($element, $attrs) {

diff --git a/js/ext/angular/test/list-fit.html b/js/ext/angular/test/list-fit.html
@@ -70,7 +70,7 @@ <h1 class="title">Footer!</h1>
   $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
@@ -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;