mirror of https://github.com/BTCPrivate/copay.git
New slide up/down for different states
This commit is contained in:
parent
826ea930b1
commit
e24628d775
|
@ -84,7 +84,6 @@ module.exports = function(grunt) {
|
|||
'bower_components/moment/min/moment-with-locales.js',
|
||||
'bower_components/angular/angular.js',
|
||||
'bower_components/angular-ui-router/release/angular-ui-router.js',
|
||||
'bower_components/angular-foundation/mm-foundation.js',
|
||||
'bower_components/angular-foundation/mm-foundation-tpls.js',
|
||||
'bower_components/angular-animate/angular-animate.js',
|
||||
'bower_components/angular-moment/angular-moment.js',
|
||||
|
|
|
@ -31,8 +31,15 @@
|
|||
|
||||
|
||||
<section
|
||||
ng-class="{'main': index.hasProfile, 'main-dark': mainDark, 'animation-left': index.slideLeft,
|
||||
'animation-right': index.slideRight}"
|
||||
class="animation-slide"
|
||||
ng-class="{
|
||||
'main': index.hasProfile,
|
||||
'main-dark': mainDark,
|
||||
'animation-left': index.slideLeft,
|
||||
'animation-right': index.slideRight,
|
||||
'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>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<nav class="tab-bar">
|
||||
<section class="right-small">
|
||||
<a ng-click="cancel()" class="p10 ng-animate-disabled">
|
||||
<a ng-click="cancel()" class="p10">
|
||||
<span class="text-close" translate>Close</span>
|
||||
</a>
|
||||
</section>
|
||||
|
|
|
@ -561,17 +561,6 @@ a.pin-button:active {
|
|||
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,
|
||||
input[type="color"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
|
@ -691,7 +680,7 @@ textarea:focus
|
|||
color: #B7C2CD;
|
||||
}
|
||||
|
||||
.animation-left, .animation-right {
|
||||
.animation-slide {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
display: block;
|
||||
|
@ -704,52 +693,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 {
|
||||
|
@ -773,6 +790,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+ */
|
||||
|
|
|
@ -653,7 +653,9 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
$timeout(function() {
|
||||
self.slideLeft = false;
|
||||
self.slideRight = false;
|
||||
}, 370);
|
||||
self.slideUp = false;
|
||||
self.slideDown = false;
|
||||
}, 400);
|
||||
});
|
||||
|
||||
$rootScope.$on('Animation/SlideLeft', function(event) {
|
||||
|
@ -664,6 +666,13 @@ angular.module('copayApp.controllers').controller('indexController', function($r
|
|||
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();
|
||||
|
|
|
@ -277,9 +277,9 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
|
|||
};
|
||||
|
||||
var modalInstance = $modal.open({
|
||||
animation: false,
|
||||
animation: true,
|
||||
templateUrl: 'views/modals/txp-details.html',
|
||||
windowClass: 'full',
|
||||
windowClass: 'full animated slideInUp',
|
||||
controller: ModalInstanceCtrl,
|
||||
});
|
||||
|
||||
|
|
|
@ -517,7 +517,7 @@ angular
|
|||
preferencesBwsUrl: 12,
|
||||
about: 12,
|
||||
logs: 13,
|
||||
add: 0,
|
||||
add: 11,
|
||||
create: 12,
|
||||
join: 12,
|
||||
import: 12,
|
||||
|
@ -530,11 +530,22 @@ angular
|
|||
});
|
||||
|
||||
$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) {
|
||||
|
||||
|
|
Loading…
Reference in New Issue