Merge pull request #2694 from matiu/anims

State Anims

public/index.html

@@ -21,27 +21,20 @@
 
     <div class="off-canvas-wrap" id="off-canvas-wrap">
       <div class="inner-wrap">
-
-        <div ui-view="topbar"></div>
         <div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
 
         <div notifications="right top"></div> 
         <div ng-include="'views/includes/password.html'" ng-if="index.askPassword"
 ></div>
-
+        <div id="sectionContainer">
-
+          <div id="mainSection">
-        <section 
+            <section ui-view="main"
-          class="animation-slide"
+              ng-class="{
-          ng-class="{
+                'main': index.hasProfile, 
-          'main': index.hasProfile, 
+                'main-dark': mainDark, 
-          'main-dark': mainDark, 
+              }"></section>
-          'animation-left': index.slideLeft, 
+          </div>
-          'animation-right': index.slideRight,
+        </div>
-          'animation-up': index.slideUp,
-          'animation-down': index.slideDown
-          }" 
-          ui-view="main"></section>
-        <div ui-view="menu" ng-if="!index.noFocusedWallet && !$root.hideMenuBar"></div>
         <a class="close-menu" ng-click="index.closeMenu()"></a>
 
       </div>

public/views/add.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Add Wallet'; closeToHome = true; noColor = true">
+</div>
+
+
+
 <div class="content">
 <ul class="no-bullet manage size-12">
 	<li>

public/views/backup.html

@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Backup'; goBackToState = 'preferences'">
+</div>
+
+
 
 <div class="content p20v" ng-controller="backupController as backup">
   <div class="row m20t">

public/views/copayers.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Copayers'">
+</div>
+
 <div class="content p20v" ng-controller="copayersController as copayers" ng-init="copayers.init()">
   <div ng-show="!index.notAuthorized">
     <div class="row m10t text-center">

public/views/create.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Create new wallet';  goBackToState = 'add'; noColor = true">
+</div>
+
+
+
 <div class="content p20v" ng-controller="createController as create">
 
   <div class="onGoingProcess" ng-show="create.loading">

public/views/import.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Import wallet';  goBackToState = 'add'; noColor = true">
+</div>
+
 <div class="content p20v" ng-controller="importController as import">
   <div class="onGoingProcess" ng-show="import.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">

public/views/importLegacy.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Import legacy wallet'; goBackToState = 'add'; noColor = true">
+</div>
+
+
+
 <div class="content p20v" ng-controller="importLegacyController as importLegacy">
   <div class="row m20t">
     <div class="large-5 large-centered medium-7 medium-centered columns">

public/views/includes/topbar.html

@@ -3,21 +3,22 @@
     <a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet"
       ng-click="index.openMenu()"><i class="fi-list size-24"></i>
     </a>
-    <a ng-show="goBackToState"
+    <a ng-show="goBackToState" 
       ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i>
       <span class="text-back">{{'Back'|translate}}</span>
     </a>
-  </section>
 
-  <section class="right-small" ng-show="!goBackToState">
+    <a ng-show="closeToHome" class="p10 "
-    <a id="camera-icon" ng-show="!closeToHome && index.isComplete" class="p10"
-      ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
-    <a ng-show="closeToHome" class="p10"
       ng-click="topbar.goHome(); closeToHome = null">
       <span class="text-close">{{'Close'|translate}}</span>
     </a>
   </section>
 
+  <section class="right-small" ng-show="showCamera">
+    <a id="camera-icon" ng-show="index.isComplete" class="p10"
+      ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
+  </section>
+
   <section class="middle tab-bar-section">
     <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4B6178' : index.backgroundColor}">
       {{(titleSection|translate) || index.walletName}}

public/views/join.html

@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Join shared wallet'; goBackToState = 'add'; noColor = true">
+</div>
+
+
 <div class="content p20v" ng-controller="joinController as join">
   <div class="onGoingProcess" ng-show="join.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">

public/views/paymentUri.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Choose wallet'; closeToHome = true">
+</div>
+
 <div class="content p20v row payment-uri" ng-controller="paymentUriController as payment">
   <div class="large-12 columns" ng-init="uri = payment.checkBitcoinUri()">
     <div class="panel text-center" ng-show="!uri">

public/views/preferences.html

@@ -1,3 +1,11 @@
+
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Preferences'; closeToHome = true">
+</div>
+
+
 <div class="content preferences" ng-controller="preferencesController as preferences">
 
   <ul class="no-bullet m0 size-14">

public/views/preferencesAbout.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='About Copay'; goBackToState = 'preferences'">
+</div>
+
 <div class="content p20v" ng-controller="preferencesAbout as about">
   <ul class="no-bullet m0 size-14">
     <div class="text-center small-5 small-centered columns m20b" >

public/views/preferencesAdvanced.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Advanced'; goBackToState = 'preferences'">
+</div>
+
 <div class="content preferences" ng-controller="preferencesAdvancedController as preferences">
 
   <ul class="no-bullet m0 size-14">

public/views/preferencesAltCurrency.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesAltCurrencyController as prefAltCurrency">
   <div ng-repeat="altCurrency in prefAltCurrency.alternativeOpts" ng-click="prefAltCurrency.save(altCurrency)" class="line-b p20 size-14">
     <span>{{altCurrency.name}}</span>

public/views/preferencesBwsUrl.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
 <div class="content preferences p20v" ng-controller="preferencesBwsUrlController as prefBwsUrl">
   <form name="settingsBwsUrlForm" ng-submit="prefBwsUrl.save()" class="columns">
     <label>Bitcore Wallet Service URL</label>

public/views/preferencesColor.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Color'; goBackToState = 'preferences'">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesColorController as p">
   <div ng-repeat="c in p.colorOpts" ng-click="p.save(c)" class="line-b p20 size-14">
     <span ng-style="{'color': c}">&block;</span>

public/views/preferencesDeleteWallet.html

@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Delete Wallet'; goBackToState = 'preferencesAdvanced'">
+</div>
+
+
 <div class="content p20v" ng-controller="preferencesDeleteWalletController as preferences">
   <h4 class="text-warning text-center m0" translate>Warning!</h4>
   <div class="box-notification" ng-show="preferences.error" >

public/views/preferencesLanguage.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Language'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesLanguageController as prefLang">
   <div class="animated infinite flash text-center m20t text-gray" ng-show="prefLang.loading" translate>Applying changes</div>
   <div ng-show="!prefLang.loading"

public/views/preferencesLogs.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Logs'; goBackToState = 'about'">
+</div>
+
+
+
 <div class="content p20v" ng-controller="preferencesLogs as logs">
 
   <div class="row columns">

public/views/preferencesUnit.html

@@ -1,3 +1,12 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Unit'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
+
 <div class="content preferences" ng-controller="preferencesUnitController as prefUnit">
   <div ng-repeat="unit in prefUnit.unitOpts" ng-click="prefUnit.save(unit)" class="line-b p20 size-14">
     <span>{{unit.shortName}}</span>

public/views/walletHome.html

@@ -1,5 +1,10 @@
-<div ng-controller="walletHomeController as home">
 
+<div class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="showCamera = true">
+</div>
+
+<div ng-controller="walletHomeController as home">
   <div class="row columns m20tp" ng-show="index.noFocusedWallet">
     <div class="text-center text-warning m20b">
       <i class="fi-alert"></i> <span translate>You do not have any wallet</span>
@@ -448,3 +453,5 @@
 
   </div>
 </div>
+<div class="extra-margin-bottom"></div>
+<div ng-include="'views/includes/menu.html'"></div>

src/css/main.css

@@ -140,7 +140,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 
 .main {
   background-color: #fff;
-  padding: 45px 0 58px 0;
+  padding: 0 0 58px 0;
   position: relative;
 }
 

src/css/mobile.css

@@ -378,51 +378,69 @@ a, button, .button, input, textarea, select {
   z-index: 1002;
 }
 
-/*******************************************/
+/* === */
 
-.pin {
+
-  margin: 0 auto;
+/* Have to set height explicity on ui-view 
-  width: 25%;
+to prevent collapsing during animation*/
-  text-align: center;
+.main[ui-view]{
-  overflow: hidden;
+ height: 100%; /* TODO */
 }
 
-.pin-box {
+.ui-view-container {
-  color: #fff;
+  position: relative;
-  font-size: 14px;
+  height: 100%;
-  width: 25%;
-  float: left;
 }
 
-.pin-numbers {
+[ui-view].slideDown,
+[ui-view].slideRight,
+[ui-view].slideLeft {
+  z-index:100;
+}
+
+#mainSection, #mainSectionDup {
+  height:100%;
   position: absolute;
-  bottom: 0;
+  left: 0;
-  width: 100%;
+  right: 0;
-  text-align: center;
+
-  height: 72%;
+  animation-timing-function: linear;
+  animation-duration: .3s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-duration: .3s;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-fill-mode: both;
 }
 
-.pin-button-bar {
+.CslideInUp {
-  height: 25%;
+  transform: translate3d(0, 100%, 0);
+  -webkit-transform: translate3d(0, 100%, 0);
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+  z-index: 1003;
+}
+.CslideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+  z-index: 1003;
+}
+.CslideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+  z-index: 1003;
+}
+.CslideInRight {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+  z-index: 1003;
 }
 
-a.pin-button {
+/* == */
-  margin: 2.5%;
-  display: inline-block;
-  color: #CED5DC;
-  font-size: 210%;
-  font-weight: 100;
-  border: 1px solid #4B6178;
-  border-radius: 100%;
-  width: 70px;
-  padding-top: 0.5rem;
-  height: 70px;
-}
-
-a.pin-button:active {
-  color: #fff;
-  background-color: #3E5367;
-}
 
 .icon-circle, .icon-circle-active {
   color:  #1ABC9C;
@@ -688,95 +706,6 @@ textarea:focus
   color: #B7C2CD;
 }
 
-.animation-slide {
-  position: absolute;
-  background: #fff;
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-
-.animation-slide.ng-enter, 
-.animation-slide.ng-leave {
-  -webkit-transition: 0.25s ease all;
-  transition: 0.25s ease all;
-}
-
-.animation-slide.ng-enter.ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  visibility: visible;
-}
-
-.animation-slide.ng-leave {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  visibility: hidden;
-}
-
-.animation-left.ng-enter {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-right.ng-enter {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
-.animation-up.ng-enter {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-}
-.animation-down.ng-enter {
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-}
-
-.animation-left.ng-leave.animation-left.ng-leave-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-right.ng-leave.animation-right.ng-leave-active {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
-.animation-up.ng-leave.animation-up.ng-leave-active {
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-down.ng-leave.animation-down.ng-leave-active {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
 .tab-view {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
@@ -798,14 +727,6 @@ textarea:focus
   transform: translate3d(-100%, 0, 0) !important;
 }
 
-.animated.slideInRight, 
-.animated.slideInLeft, 
-.animated.slideInUp, 
-.animated.slideInDown {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
 /* removes 300ms in IE */
 -ms-touch-action: manipulation; /* IE10 /
 touch-action: manipulation; /* IE11+ */

src/js/controllers/index.js

@@ -11,6 +11,12 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     return (parseFloat(number.toPrecision(12)));
   };
 
+
+  self.goHome = function() {
+    go.walletHome();
+  };
+
+
   self.menu = [{
     'title': gettext('Home'),
     'icon': 'icon-home',
@@ -326,6 +332,9 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     self.txHistoryPaging = txs[self.limitHistory] ? true : false;
     lodash.each(txs, function(tx) {
       tx.ts = tx.minedTs || tx.sentTs;
+      // no future transaction...
+      if (tx.ts > now) 
+        ts.ts = now;
       tx.rateTs = Math.floor((tx.ts || now) / 1000);
       tx.amountStr = profileService.formatAmount(tx.amount); //$filter('noFractionNumber')(
       if (c < self.limitHistory) {

src/js/controllers/preferences.js

@@ -3,7 +3,6 @@
 angular.module('copayApp.controllers').controller('preferencesController',
   function($scope, $rootScope, $filter, $timeout, $modal, $log, lodash, configService, profileService) {
     var config = configService.getSync();
-
     this.unitName = config.wallet.settings.unitName;
     this.bwsurl = config.bws.url;
     this.selectedAlternative = {

src/js/controllers/walletHome.js

@@ -91,12 +91,12 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
   $scope.openCopayersModal = function(copayers, copayerId) {
     var fc = profileService.focusedClient;
-       
+
     var ModalInstanceCtrl = function($scope, $modalInstance) {
       $scope.copayers = copayers;
       $scope.copayerId = copayerId;
       $scope.color = fc.backgroundColor;
-      $scope.cancel = function() { 
+      $scope.cancel = function() {
         $modalInstance.dismiss('cancel');
       };
     };
@@ -293,10 +293,11 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     });
 
     modalInstance.result.then(function(txp) {
-      $scope.$emit('Local/TxProposalAction');
       if (txp) {
         self.setOngoingProcess();
-        txStatus.notify(txp);
+        txStatus.notify(txp, function() {
+          $scope.$emit('Local/TxProposalAction');
+        });
       }
     });
 
@@ -314,8 +315,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
           $timeout(function() {
             self.setNewAddress();
           }, 5000);
-        }
+        } else {
-        else {
           $log.debug('Creating address ERROR:', err);
           $scope.$emit('Local/ClientError', err);
           $scope.$digest();
@@ -598,15 +598,15 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
             $scope.$digest();
             return cb(err);
           }
-          $scope.$emit('Local/TxProposalAction');
           txStatus.notify(btx, function() {
+            $scope.$emit('Local/TxProposalAction');
             return cb();
           });
         });
       } else {
         self.setOngoingProcess();
-        $scope.$emit('Local/TxProposalAction');
         txStatus.notify(signedTx, function() {
+          $scope.$emit('Local/TxProposalAction');
           return cb();
         });
       }
@@ -859,9 +859,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     return actions.hasOwnProperty('create');
   };
 
-  // Startup events
   this.bindTouchDown();
   this.setAddress();
   this.setSendFormInputs();
-
 });

src/js/routes.js

@@ -78,17 +78,8 @@ angular
         needProfile: true,
         views: {
           'main': {
-            templateUrl: 'views/walletHome.html'
+            templateUrl: 'views/walletHome.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html'
-          },
-          'menu': {
-            templateUrl: 'views/includes/menu.html',
-            controller: function($scope) {
-              $scope.activeMenu = 'walletHome';
-            }
-          }
         }
       })
       .state('createProfile', {
@@ -98,7 +89,8 @@ angular
           'main': {
             templateUrl: 'views/createProfile.html',
             controller: function($scope) {
-              $scope.mainDark = true;
+              // TODO
+              //              $scope.mainDark = true;
               $scope.noColor = true;
             }
           }
@@ -120,13 +112,6 @@ angular
           'main': {
             templateUrl: 'views/paymentUri.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.goBackToState = 'walletHome';
-              $scope.noColor = true;
-            }
-          }
         },
         needProfile: true
       })
@@ -142,14 +127,6 @@ angular
           'main': {
             templateUrl: 'views/join.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Join shared wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('import', {
@@ -159,14 +136,6 @@ angular
           'main': {
             templateUrl: 'views/import.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Import wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('importProfile', {
@@ -181,14 +150,6 @@ angular
           'main': {
             templateUrl: 'views/importLegacy.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Import legacy wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
 
       })
@@ -200,14 +161,6 @@ angular
           'main': {
             templateUrl: 'views/create.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Create new wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('copayers', {
@@ -217,9 +170,6 @@ angular
           'main': {
             templateUrl: 'views/copayers.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html'
-          }
         }
       })
       .state('preferences', {
@@ -229,15 +179,8 @@ angular
         needProfile: true,
         views: {
           'main': {
-            templateUrl: 'views/preferences.html'
+            templateUrl: 'views/preferences.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.titleSection = 'Preferences';
-              $scope.closeToHome = true;
-            }
-          }
         }
       })
       .state('preferencesLanguage', {
@@ -248,14 +191,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesLanguage.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Language');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesUnit', {
@@ -267,14 +202,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesUnit.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Unit');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesAdvanced', {
@@ -286,13 +213,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesAdvanced.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.titleSection = 'Advanced';
-              $scope.goBackToState = 'preferences';
-            }
-          }
         }
       })
       .state('preferencesColor', {
@@ -304,13 +224,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesColor.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Color');
-              $scope.goBackToState = 'preferences';
-            }
-          }
         }
       })
 
@@ -323,14 +236,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesAltCurrency.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Alternative Currency');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesBwsUrl', {
@@ -342,14 +247,7 @@ angular
           'main': {
             templateUrl: 'views/preferencesBwsUrl.html'
           },
-          'topbar': {
+
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.titleSection = 'Bitcore Wallet Service';
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('delete', {
@@ -361,14 +259,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesDeleteWallet.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Delete Wallet');
-              $scope.goBackToState = 'preferences';
-              $scope.goBackToState = 'preferencesAdvanced';
-            }
-          }
         }
       })
       .state('about', {
@@ -380,14 +270,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesAbout.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('About');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('logs', {
@@ -399,14 +281,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesLogs.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Logs');
-              $scope.goBackToState = 'about';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('backup', {
@@ -418,13 +292,6 @@ angular
           'main': {
             templateUrl: 'views/backup.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Backup');
-              $scope.goBackToState = 'preferences';
-            }
-          }
         }
       })
       .state('settings', {
@@ -447,14 +314,6 @@ angular
           'main': {
             templateUrl: 'views/add.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Add wallet');
-              $scope.closeToHome = true;
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('cordova', {
@@ -477,7 +336,7 @@ angular
         needProfile: false
       });
   })
-  .run(function($rootScope, $state, $log, gettextCatalog, uriHandler, isCordova, amMoment, profileService) {
+  .run(function($rootScope, $state, $log, gettextCatalog, uriHandler, isCordova, amMoment, profileService, $timeout) {
     FastClick.attach(document.body);
 
     // Auto-detect browser language
@@ -501,9 +360,8 @@ angular
 
     var pageWeight = {
       walletHome: 0,
-      receive: 0,
+      copayers: -1,
-      send: 0,
+
-      history: 0,
       preferences: 11,
       preferencesColor: 12,
       backup: 12,
@@ -523,27 +381,10 @@ angular
     };
 
 
-    $rootScope.$on('$stateChangeSuccess', function() {
+    var cachedTransitionState, cachedBackPanel;
-      $rootScope.$emit('Animation/Disable');
-    });
 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
 
-      if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-        if (pageWeight[fromState.name] == 11) {
-          $rootScope.$emit('Animation/SlideDown');
-        }
-        else {
-          $rootScope.$emit('Animation/SlideRight');
-        }
-      } else if (pageWeight[fromState.name] < pageWeight[toState.name]) {
-        if (pageWeight[toState.name] < 12) {
-          $rootScope.$emit('Animation/SlideUp');
-        }
-        else {
-          $rootScope.$emit('Animation/SlideLeft');
-        }
-      }
 
       if (!profileService.profile && toState.needProfile) {
 
@@ -571,5 +412,106 @@ angular
         $state.transitionTo('copayers');
         event.preventDefault();
       }
+
+      /* 
+       * --------------------
+       */
+
+      function cleanUpLater(e, e2) {
+        var cleanedUp = false, timeoutID;
+        var cleanUp = function() {
+          if (cleanedUp) return;
+          cleanedUp = true;
+          e2.parentNode.removeChild(e2);
+          e2.innerHTML = "";
+          e.className = '';
+          cachedBackPanel = null;
+          cachedTransitionState = '';
+          if (timeoutID) {
+            timeoutID=null;
+            window.clearTimeout(timeoutID);
+          }
+        };
+        e.addEventListener("animationend", cleanUp, true);
+        e2.addEventListener("animationend", cleanUp, true);
+        e.addEventListener("webkitAnimationEnd", cleanUp, true);
+        e2.addEventListener("webkitAnimationEnd", cleanUp, true);
+        // TODO
+        timeoutID = setTimeout(cleanUp, 500);
+      };
+
+      function animateTransition(fromState, toState, event) {
+
+        // Animation in progress?
+        var x = document.getElementById('mainSectionDup');
+        if (x && !cachedTransitionState) {
+          console.log('Anim in progress');
+          return true;
+        }
+
+        var fromName = fromState.name;
+        var toName = toState.name;
+        if (!fromName || !toName) 
+          return true;
+
+        var fromWeight = pageWeight[fromName];
+        var toWeight = pageWeight[toName];
+
+
+        var entering = null,
+          leaving = null;
+
+        if (fromWeight && toWeight) {
+          if (fromWeight > toWeight) {
+            leaving = 'CslideOutRight';
+          } else {
+            entering = 'CslideInRight';
+          }
+        } else if (fromName && fromWeight >= 0 && toWeight >= 0) {
+          if (toWeight) {
+            entering = 'CslideInUp';
+          } else {
+            leaving = 'CslideOutDown';
+          }
+        }
+        var e = document.getElementById('mainSection');
+
+
+        var desiredTransitionState = (fromName || '-') + ':' + (toName || '-');
+
+        if (desiredTransitionState == cachedTransitionState) {
+          e.className = entering || '';
+          cachedBackPanel.className = leaving || '';
+          cleanUpLater(e, cachedBackPanel);
+          console.log('USing', cachedTransitionState); //TODO
+          return true;
+        } else {
+          var sc;
+          // Keep prefDiv scroll
+          var contentDiv  = e.getElementsByClassName('content');
+          if (contentDiv && contentDiv[0]) 
+            sc = contentDiv[0].scrollTop;
+
+          cachedBackPanel = e.cloneNode(true);
+          cachedBackPanel.id = 'mainSectionDup';
+          var c = document.getElementById('sectionContainer');
+          c.appendChild(cachedBackPanel);
+
+          if (sc)
+            cachedBackPanel.getElementsByClassName('content')[0].scrollTop  = sc;
+
+          cachedTransitionState = desiredTransitionState;
+          console.log('CACHing', cachedTransitionState); //TODO
+          return false;
+        }
+      }
+
+      if (!animateTransition(fromState, toState)) {
+        event.preventDefault();
+        // Time for the backpane to render
+        setTimeout(function() {
+          $state.transitionTo(toState);
+        }, 50);
+      }
     });
   });