From 5c893ab81acf2af8442b321ad1c9bfd47e1c7981 Mon Sep 17 00:00:00 2001
From: Andy Joslin <andytjoslin@gmail.com>
Date: Wed, 26 Mar 2014 21:29:07 -0600
Subject: [PATCH] fix(ionRefresher): do not animate pulling-text

Closes #909
---
 js/ext/angular/src/directive/ionicContent.js |   8 +-
 js/ext/angular/test/list-fit.html            |   2 +-
 scss/_scaffolding.scss                       | 137 ++++++++++---------
 3 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index e83a56a082..432a7f173c 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('<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
index ba78e419d8..53aa56221d 100644
--- a/js/ext/angular/test/list-fit.html
+++ b/js/ext/angular/test/list-fit.html
@@ -70,7 +70,7 @@ function ContentCtrl($scope, $timeout) {
   $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 ae765f41ea..d487ab953f 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,29 +158,82 @@ body.grade-c {
   100% {-webkit-transform: rotate(0); }
 }
 
-.scroll-refresher.active {
-
-  .icon-pulling {
-    display: block;
-  }
-  .icon-refreshing {
-    display: none;
-  }
-
-  &.refreshing {
-    .icon-pulling {
-      display: none;
-    }
-    .icon-refreshing {
-      display: block;
-    }
-  }
+// 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 {
-    i.icon.icon-pulling {
-      @include animation-name(refresh-spin);
+    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 {
+    @include animation-name(refresh-spin-back);
+    @include animation-duration(200ms);
+    @include animation-timing-function(linear);
+    @include animation-fill-mode(both);
+  }
+  .icon-refreshing,
+  .text-refreshing {
+    display: none;
+  }
+  .icon-refreshing {
+    @include animation-duration(1.5s);
+  }
+
+  &.active {
+    .icon-pulling,
+    .text-pulling {
+      display: block;
+    }
+    .icon-pulling {
+      @include animation-name(refresh-spin);
+    }
+    .icon-refreshing,
+    .text-refreshing {
+      display: none;
+    }
+
+    &.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