anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2694 from matiu/anims

Browse source 
State Anims
This commit is contained in:
Gustavo Maximiliano Cortez 2015-05-11 16:54:58 -03:00
commit f56ff4c833
27 changed files with 336 additions and 334 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/css/main.css
View file

@ -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;
}

185
src/css/mobile.css
View file

@ -378,51 +378,69 @@ a, button, .button, input, textarea, select {
z-index: 1002;
}
/*******************************************/
/* === */
.pin {
margin: 0 auto;
width: 25%;
text-align: center;
overflow: hidden;
/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.main[ui-view]{
height: 100%; /* TODO */
}
.pin-box {
color: #fff;
font-size: 14px;
width: 25%;
float: left;
.ui-view-container {
position: relative;
height: 100%;
}
.pin-numbers {
[ui-view].slideDown,
[ui-view].slideRight,
[ui-view].slideLeft {
z-index:100;
}
#mainSection, #mainSectionDup {
height:100%;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
height: 72%;
left: 0;
right: 0;
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 {
height: 25%;
.CslideInUp {
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+ */

9
src/js/controllers/index.js
View file

@ -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) {

1
src/js/controllers/preferences.js
View file

@ -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 = {

18
src/js/controllers/walletHome.js
View file

@ -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();
});

278
src/js/routes.js
View file

@ -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,
send: 0,
history: 0,
copayers: -1,
preferences: 11,
preferencesColor: 12,
backup: 12,
@ -523,27 +381,10 @@ angular
};
$rootScope.$on('$stateChangeSuccess', function() {
$rootScope.$emit('Animation/Disable');
});
var cachedTransitionState, cachedBackPanel;
$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);
}
});
});