Merge pull request #2663 from cmgustavo/feat/slide

Modals animation (slide up/down)

src/css/mobile.css

@@ -80,7 +80,7 @@ _:-ms-fullscreen, :root .main {
 @-moz-document url-prefix() {
   .extra-margin-bottom {
     display: block;
-    height: 75px;
+    height: 45px;
     overflow: hidden;
     clear: both;
   }
@@ -359,7 +359,7 @@ ul.off-canvas-list li a:hover {
   background: none;
 }
 
-a, button, .button, input, textarea, select, .reveal-modal {
+a, button, .button, input, textarea, select {
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
   box-shadow: none !important;
@@ -555,23 +555,17 @@ a.pin-button:active {
   padding: 0;
   border: none;
   border-radius: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
+  overflow-y: auto;
   padding-bottom: 20px;
 }
 
-.modal.fade .modal-dialog,
-.modal.in .modal-dialog,
-.reveal-modal-bg,
-.reveal-modal-bg .fade .in,
-.reveal-modal,
-.reveal-modal .fade,
-.reveal-modal .fade .out,
-.reveal-modal .fade .in,
-.reveal-modal.fade.full.in,
-.reveal-modal.fade.full.out,
-.reveal-modal.fade.full,
+.reveal-modal.animated.fadeOutUp, 
+.reveal-modal.animated.slideInUp, 
+.reveal-modal.animated.slideInDown {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+}
+
 input[type="color"],
 input[type="date"],
 input[type="datetime-local"],
@@ -691,7 +685,7 @@ textarea:focus
   color: #B7C2CD;
 }
 
-.animation-left, .animation-right {
+.animation-slide {
   position: absolute;
   background: #fff;
   display: block;
@@ -704,52 +698,80 @@ textarea:focus
   transform: translate3d(0, 0, 0);
 }
 
-.animation-left.ng-enter, .animation-left.ng-leave,
-.animation-right.ng-enter, .animation-right.ng-leave {
-  -webkit-transition: all ease 300ms;
-  transition: all ease 300ms;
+.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.01s;
-  transition-delay: 0.01s;
-  opacity: 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.01s;
-  transition-delay: 0.01s;
-  opacity: 0;
-}
-.animation-left.ng-enter.ng-enter-active,
-.animation-right.ng-enter.ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  opacity: 1;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
 }
 
-.animation-left.ng-leave,
-.animation-right.ng-leave {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  opacity: 0;
+.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.01s;
-  transition-delay: 0.01s;
-  opacity: 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.01s;
-  transition-delay: 0.01s;
-  opacity: 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 {
@@ -760,7 +782,7 @@ textarea:focus
   top: 46px;
   bottom: 37px;
   overflow: auto;
-  padding-bottom: 20px;
+  padding-bottom: 40px;
 }
 
 .tab-in {
@@ -773,6 +795,14 @@ 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/app.js

@@ -6,7 +6,6 @@ var modules = [
   'mm.foundation',
   'monospaced.qrcode',
   'gettext',
-  'ngAnimate',
   'ngLodash',
   'uiSwitch',
   'bwcModule',

src/js/controllers/index.js

@@ -652,19 +652,28 @@ angular.module('copayApp.controllers').controller('indexController', function($r
 
   $rootScope.$on('Animation/Disable', function(event) {
     $timeout(function() {
-      self.swipeLeft = false;
-      self.swipeRight = false;
-    }, 370);
+      self.slideLeft = false;
+      self.slideRight = false;
+      self.slideUp = false;
+      self.slideDown = false;
+    }, 400);
   });
 
-  $rootScope.$on('Animation/SwipeLeft', function(event) {
-    self.swipeLeft = true;
+  $rootScope.$on('Animation/SlideLeft', function(event) {
+    self.slideLeft = true;
   });
 
-  $rootScope.$on('Animation/SwipeRight', function(event) {
-    self.swipeRight = true;
+  $rootScope.$on('Animation/SlideRight', function(event) {
+    self.slideRight = true;
   });
 
+  $rootScope.$on('Animation/SlideUp', function(event) {
+    self.slideUp = true;
+  });
+
+  $rootScope.$on('Animation/SlideDown', function(event) {
+    self.slideDown = true;
+  });
 
   $rootScope.$on('NewIncomingTx', function() {
     self.updateBalance();

src/js/controllers/walletHome.js

@@ -91,23 +91,28 @@ 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');
       };
     };
-    $modal.open({
-      animation: false,
+    var modalInstance = $modal.open({
       templateUrl: 'views/modals/copayers.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
   };
 
-  $scope.openTxModal = function(tx, copayers) {
+  this.openTxpModal = function(tx, copayers) {
     var fc = profileService.focusedClient;
     var ModalInstanceCtrl = function($scope, $modalInstance) {
       $scope.error = null;
@@ -277,12 +282,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     };
 
     var modalInstance = $modal.open({
-      animation: false,
       templateUrl: 'views/modals/txp-details.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
 
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
+
     modalInstance.result.then(function(txp) {
       $scope.$emit('Local/TxProposalAction');
       if (txp) {
@@ -675,11 +684,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
         $modalInstance.dismiss('cancel');
       };
     };
-    $modal.open({
+    var modalInstance = $modal.open({
       templateUrl: 'views/modals/paypro.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
   };
 
   this.setFromPayPro = function(uri) {
@@ -829,12 +843,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       };
     };
 
-    $modal.open({
-      animation: false,
+    var modalInstance = $modal.open({
       templateUrl: 'views/modals/tx-details.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
   };
 
   this.hasAction = function(actions, action) {

src/js/routes.js

@@ -16,11 +16,9 @@ if (window && window.navigator) {
 //Setting up route
 angular
   .module('copayApp')
-  .config(function(historicLogProvider, $provide, $logProvider, $stateProvider, $urlRouterProvider, $animateProvider) {
+  .config(function(historicLogProvider, $provide, $logProvider, $stateProvider, $urlRouterProvider) {
     $urlRouterProvider.otherwise('/');
 
-    $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
-
     $logProvider.debugEnabled(true);
     $provide.decorator('$log', ['$delegate',
       function($delegate) {
@@ -506,7 +504,7 @@ angular
       receive: 0,
       send: 0,
       history: 0,
-      preferences: 0,
+      preferences: 11,
       preferencesColor: 12,
       backup: 12,
       preferencesAdvanced: 12,
@@ -517,7 +515,7 @@ angular
       preferencesBwsUrl: 12,
       about: 12,
       logs: 13,
-      add: 0,
+      add: 11,
       create: 12,
       join: 12,
       import: 12,
@@ -530,10 +528,21 @@ angular
     });
 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
+
       if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-        $rootScope.$emit('Animation/SwipeRight');
+        if (pageWeight[fromState.name] == 11) {
+          $rootScope.$emit('Animation/SlideDown');
+        }
+        else {
+          $rootScope.$emit('Animation/SlideRight');
+        }
       } else if (pageWeight[fromState.name] < pageWeight[toState.name]) {
-        $rootScope.$emit('Animation/SwipeLeft');
+        if (pageWeight[toState.name] < 12) {
+          $rootScope.$emit('Animation/SlideUp');
+        }
+        else {
+          $rootScope.$emit('Animation/SlideLeft');
+        }
       }
 
       if (!profileService.profile && toState.needProfile) {

src/js/services/txStatus.js

@@ -35,11 +35,16 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
       };
       if (cb) $timeout(cb, 100);
     };
-    $modal.open({
+    var modalInstance = $modal.open({
       templateUrl: 'views/modals/tx-status.html',
-      windowClass: 'full popup-tx-status',
+      windowClass: 'full popup-tx-status closeModalAnimation',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('animated fadeOutUp');
+    });
   };
 
   return root;