From fb5fd996801ea3dcb6fe65293936c97df1be4d7c Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 2 Dec 2013 17:23:31 -0600
Subject: [PATCH] Pull to refresh

---
 dist/css/ionic.css                           | 61 ++++++++++++------
 dist/js/ionic-angular.js                     |  2 +-
 js/ext/angular/src/directive/ionicContent.js |  2 +-
 js/ext/angular/test/tabs.html                |  9 +--
 scss/_scaffolding.scss                       | 67 ++++++++++++++------
 scss/_variables.scss                         |  4 ++
 6 files changed, 94 insertions(+), 51 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index cab73cfe60..138f4be633 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2248,6 +2248,7 @@ body, .ionic-body {
   display: block;
   position: relative;
   overflow: hidden;
+  margin-top: -1px;
   width: auto;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
@@ -2278,8 +2279,14 @@ body, .ionic-body {
 
 .scroll-refresher {
   overflow: hidden;
-  margin-top: -100px;
-  height: 100px; }
+  margin-top: -60px;
+  height: 60px;
+  position: relative; }
+  .scroll-refresher .icon-refreshing {
+    display: none;
+    -webkit-animation-duration: 1.5s;
+    -moz-animation-duration: 1.5s;
+    animation-duration: 1.5s; }
 
 .scroll-refresher-content {
   position: relative;
@@ -2288,30 +2295,42 @@ body, .ionic-body {
   text-align: center; }
 
 .ionic-refresher-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  text-align: center; }
-
-.ionic-refresher {
   position: absolute;
-  bottom: 25px;
-  left: 50%;
-  margin-left: -5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #4a87ee; }
+  left: 0;
+  bottom: 15px;
+  width: 100%;
+  text-align: center;
+  font-size: 30px;
+  color: #666666; }
 
-@-webkit-keyframes refresher-pulsate {
+@-webkit-keyframes refresh-spin {
   0% {
-    -webkit-transform: scale(2, 2); }
-
-  50% {
-    -webkit-transform: scale(1.5, 1.5); }
+    -webkit-transform: rotate(0); }
 
   100% {
-    -webkit-transform: scale(2, 2); } }
+    -webkit-transform: rotate(-180deg); } }
+
+.scroll-refresher.active .icon-pulling {
+  display: block; }
+.scroll-refresher.active .icon-refreshing {
+  display: none; }
+.scroll-refresher.active.refreshing .icon-pulling {
+  display: none; }
+.scroll-refresher.active.refreshing .icon-refreshing {
+  display: block; }
+.scroll-refresher.active .ionic-refresher-content {
+  -webkit-animation-duration: 200ms;
+  -moz-animation-duration: 200ms;
+  animation-duration: 200ms;
+  -webkit-animation-timing-function: linear;
+  -moz-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: refresh-spin;
+  -moz-animation-name: refresh-spin;
+  animation-name: refresh-spin; }
 
 .overflow-scroll {
   overflow-x: hidden;
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 099face406..81dd0023bd 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -752,7 +752,7 @@ angular.module('ionic.ui.content', [])
     restrict: 'E',
     replace: true,
     require: ['^?content', '^?list'],
-    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
+    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
     scope: true,
     link: function($scope, $element, $attr, scrollCtrl) {
       var icon = $element[0].querySelector('.ionic-refresher');
diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index 9ec8075eca..4176a6c32a 100644
--- a/js/ext/angular/src/directive/ionicContent.js
+++ b/js/ext/angular/src/directive/ionicContent.js
@@ -128,7 +128,7 @@ angular.module('ionic.ui.content', [])
     restrict: 'E',
     replace: true,
     require: ['^?content', '^?list'],
-    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
+    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
     scope: true,
     link: function($scope, $element, $attr, scrollCtrl) {
       var icon = $element[0].querySelector('.ionic-refresher');
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
index 2297c4bbd4..b1bea8ab86 100644
--- a/js/ext/angular/test/tabs.html
+++ b/js/ext/angular/test/tabs.html
@@ -65,12 +65,7 @@
           <button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
         </header>
         <content>
-          <refresher>
-            <div id="refresh-content">
-              Refreshing
-              <i class="icon ion-ios7-reloading"></i>
-            </div>
-          </refresher>
+          <refresher></refresher>
           <list scroll="false" on-refresh="onRefresh()" on-reorder="onReorder(el, start, end)" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
             <item ng-repeat="item in items" 
             item="item"
@@ -190,7 +185,7 @@
         };
 
         // Create the items
-        for(var i = 0; i < 5; i++) {
+        for(var i = 0; i < 25; i++) {
           $scope.items.push({
             title: 'Task ' + (i + 1),
             buttons: [{
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index 2ec74fb998..16ff0b0079 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -64,6 +64,9 @@ body, .ionic-body {
   position: relative;
   overflow: hidden;
 
+  // Hide the top border if any
+  margin-top: -1px;
+
   width: auto;
   @include flex(1);
 }
@@ -84,8 +87,14 @@ body, .ionic-body {
 // Scroll refresher (for pull to refresh)
 .scroll-refresher {
   overflow: hidden;
-  margin-top: -100px;
-  height: 100px;
+  margin-top: -60px;
+  height: 60px;
+  position: relative;
+
+  .icon-refreshing {
+    display: none;
+    @include animation-duration(1.5s);
+  }
 }
 
 .scroll-refresher-content {
@@ -96,29 +105,45 @@ body, .ionic-body {
 }
 
 .ionic-refresher-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
-
-.ionic-refresher {
   position: absolute;
-  bottom: 25px;
-  left: 50%;
-  margin-left: -5px;
-  // A custom refresher
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: $positive;
+  left: 0;
+  bottom: 15px;
+  width: 100%;
+  text-align: center;
+
+  font-size: 30px;
+  color: $scroll-refresh-icon-color;
 }
 
+@-webkit-keyframes refresh-spin {
+  0% {-webkit-transform: rotate(0); }
+  100% {-webkit-transform: rotate(-180deg); }
+}
 
-@-webkit-keyframes refresher-pulsate {
-  0% {-webkit-transform: scale(2, 2); }
-  50% {-webkit-transform: scale(1.5, 1.5); }
-  100% {-webkit-transform: scale(2, 2); }
+.scroll-refresher.active {
+
+  .icon-pulling {
+    display: block;
+  }
+  .icon-refreshing {
+    display: none;
+  }
+
+  &.refreshing {
+    .icon-pulling {
+      display: none;
+    }
+    .icon-refreshing {
+      display: block;
+    }
+  }
+
+  .ionic-refresher-content {
+    @include animation-duration(200ms);
+    @include animation-timing-function(linear);
+    @include animation-fill-mode(both);
+    @include animation-name(refresh-spin);
+  }
 }
 
 .overflow-scroll {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index a4f9c017b5..5fbc1a0451 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -57,6 +57,10 @@ $border-radius-base:             4px !default;
 $border-radius-large:            6px !default;
 $border-radius-small:            3px !default;
 
+// Content
+// -------------------------------
+
+$scroll-refresh-icon-color: #666666;
 
 // Buttons
 // -------------------------------