Ref animations. Disabled for desktop

This commit is contained in:
Gustavo Maximiliano Cortez 2015-10-01 02:13:33 -03:00
parent 469d36556c
commit 434a53ecdd
No known key found for this signature in database
GPG Key ID: 15EDAD8D9F2EB1AF
11 changed files with 203 additions and 207 deletions

View File

@ -203,7 +203,7 @@ _:-ms-fullscreen, :root .main {
height: 75px;
position: absolute;
top: -33px;
font-size: 35px;
font-size: 2.2rem;
border: 3px solid #fff;
background: #1ABC9C;
margin: 0;
@ -301,7 +301,7 @@ a.missing-copayers {
.sidebar .avatar-wallet, .payment-uri .avatar-wallet, .modal-content .avatar-wallet {
background-color: #2C3E50;
color: #fff;
font-size: 20px;
font-size: 1.4rem;
font-weight: 700;
margin-right: 15px;
text-align: center;
@ -562,6 +562,11 @@ to prevent collapsing during animation*/
/*** modals ***/
.hideModal {
visibility: none !important;
display: none !important;
}
.reveal-modal-bg {
display: none !important;
}

View File

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('buyGlideraController',
function($scope, $timeout, $modal, profileService, addressService, glideraService, bwsError, lodash, isChromeApp) {
function($scope, $timeout, $modal, profileService, addressService, glideraService, bwsError, lodash, isChromeApp, animationService) {
var self = this;
this.show2faCodeInput = null;
@ -9,13 +9,6 @@ angular.module('copayApp.controllers').controller('buyGlideraController',
this.success = null;
this.loading = null;
// DISABLE ANIMATION ON CHROMEAPP
if (isChromeApp) {
var animatedSlideUp = 'full';
} else {
var animatedSlideUp = 'full animated slideInUp';
}
this.otherWallets = function(testnet) {
var network = testnet ? 'testnet' : 'livenet';
return lodash.filter(profileService.getWallets(network), function(w) {
@ -57,13 +50,13 @@ angular.module('copayApp.controllers').controller('buyGlideraController',
var modalInstance = $modal.open({
templateUrl: 'views/modals/wallets.html',
windowClass: animatedSlideUp,
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
m.addClass(animationService.modalAnimated.slideOutDown);
});
modalInstance.result.then(function(obj) {

View File

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('copayersController',
function($scope, $rootScope, $timeout, $log, $modal, profileService, go, notification, isCordova, gettext, gettextCatalog) {
function($scope, $rootScope, $timeout, $log, $modal, profileService, go, notification, isCordova, gettext, gettextCatalog, animationService) {
var self = this;
var delete_msg = gettextCatalog.getString('Are you sure you want to delete this wallet?');
@ -37,9 +37,15 @@ angular.module('copayApp.controllers').controller('copayersController',
var modalInstance = $modal.open({
templateUrl: 'views/modals/confirmation.html',
windowClass: 'full',
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass(animationService.modalAnimated.slideOutDown);
});
modalInstance.result.then(function(ok) {
if (ok) {
_deleteWallet();

View File

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('preferencesDeleteWalletController',
function($scope, $rootScope, $filter, $timeout, $modal, $log, notification, profileService, isCordova, go, gettext, gettextCatalog) {
function($scope, $rootScope, $filter, $timeout, $modal, $log, notification, profileService, isCordova, go, gettext, gettextCatalog, animationService) {
this.isCordova = isCordova;
this.error = null;
@ -27,9 +27,15 @@ angular.module('copayApp.controllers').controller('preferencesDeleteWalletContro
var modalInstance = $modal.open({
templateUrl: 'views/modals/confirmation.html',
windowClass: 'full',
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass(animationService.modalAnimated.slideOutDown);
});
modalInstance.result.then(function(ok) {
if (ok) {
_deleteWallet();

View File

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('preferencesGlideraController',
function($scope, $modal, $timeout, profileService, applicationService, glideraService, storageService, isChromeApp) {
function($scope, $modal, $timeout, profileService, applicationService, glideraService, storageService, isChromeApp, animationService) {
this.getEmail = function(token) {
var self = this;
@ -31,14 +31,6 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
});
};
// DISABLE ANIMATION ON CHROMEAPP
if (isChromeApp) {
var animatedSlideRight = 'full';
}
else {
var animatedSlideRight = 'full animated slideInRight';
}
this.revokeToken = function(testnet) {
var network = testnet ? 'testnet' : 'livenet';
var ModalInstanceCtrl = function($scope, $modalInstance) {
@ -52,7 +44,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
var modalInstance = $modal.open({
templateUrl: 'views/modals/glidera-confirmation.html',
windowClass: animatedSlideRight,
windowClass: animationService.modalAnimated.slideRight,
controller: ModalInstanceCtrl
});
@ -68,7 +60,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutRight');
m.addClass(animationService.modalAnimated.slideOutRight);
});
};

View File

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('sellGlideraController',
function($scope, $timeout, $log, $modal, configService, profileService, addressService, feeService, glideraService, bwsError, lodash, isChromeApp) {
function($scope, $timeout, $log, $modal, configService, profileService, addressService, feeService, glideraService, bwsError, lodash, isChromeApp, animationService) {
var self = this;
var config = configService.getSync();
@ -14,13 +14,6 @@ angular.module('copayApp.controllers').controller('sellGlideraController',
this.currentFeeLevel = config.wallet.settings.feeLevel || 'normal';
var fc;
// DISABLE ANIMATION ON CHROMEAPP
if (isChromeApp) {
var animatedSlideUp = 'full';
} else {
var animatedSlideUp = 'full animated slideInUp';
}
this.otherWallets = function(testnet) {
var network = testnet ? 'testnet' : 'livenet';
return lodash.filter(profileService.getWallets(network), function(w) {
@ -53,13 +46,13 @@ angular.module('copayApp.controllers').controller('sellGlideraController',
var modalInstance = $modal.open({
templateUrl: 'views/modals/wallets.html',
windowClass: animatedSlideUp,
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
m.addClass(animationService.modalAnimated.slideOutDown);
});
modalInstance.result.then(function(obj) {

View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('topbarController', function($rootScope, go) {
angular.module('copayApp.controllers').controller('topbarController', function($scope, $rootScope, go) {
this.onQrCodeScanned = function(data) {
$rootScope.$emit('dataScanned', data);

View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $timeout, $filter, $modal, $log, notification, txStatus, isCordova, profileService, lodash, configService, rateService, storageService, bitcore, isChromeApp, gettext, gettextCatalog, nodeWebkit, addressService, ledger, feeService, bwsError, confirmDialog, txFormatService) {
angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $timeout, $filter, $modal, $log, notification, txStatus, isCordova, profileService, lodash, configService, rateService, storageService, bitcore, isChromeApp, gettext, gettextCatalog, nodeWebkit, addressService, ledger, feeService, bwsError, confirmDialog, txFormatService, animationService) {
var self = this;
$rootScope.hideMenuBar = false;
@ -26,15 +26,6 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
this.isMobile = isMobile.any();
this.addr = {};
// DISABLE ANIMATION ON CHROMEAPP
if (isChromeApp) {
var animatedSlideUp = 'full';
var animatedSlideRight = 'full';
} else {
var animatedSlideUp = 'full animated slideInUp';
var animatedSlideRight = 'full animated slideInRight';
}
var disableScannerListener = $rootScope.$on('dataScanned', function(event, data) {
self.setForm(data);
$rootScope.$emit('Local/SetTab', 'send');
@ -117,7 +108,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
};
var modalInstance = $modal.open({
templateUrl: 'views/modals/copayers.html',
windowClass: animatedSlideUp,
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl,
});
@ -129,7 +120,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$rootScope.modalOpened = false;
disableCloseModal();
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
m.addClass(animationService.modalAnimated.slideOutDown);
});
};
@ -166,7 +157,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
var modalInstance = $modal.open({
templateUrl: 'views/modals/wallets.html',
windowClass: animatedSlideUp,
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl,
});
@ -178,7 +169,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$rootScope.modalOpened = false;
disableCloseModal();
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
m.addClass(animationService.modalAnimated.slideOutDown);
});
modalInstance.result.then(function(addr) {
@ -392,7 +383,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
var modalInstance = $modal.open({
templateUrl: 'views/modals/txp-details.html',
windowClass: animatedSlideRight,
windowClass: animationService.modalAnimated.slideRight,
controller: ModalInstanceCtrl,
});
@ -404,7 +395,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$rootScope.modalOpened = false;
disableCloseModal();
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutRight');
m.addClass(animationService.modalAnimated.slideOutRight);
});
modalInstance.result.then(function(txp) {
@ -555,7 +546,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
var modalInstance = $modal.open({
templateUrl: 'views/modals/customized-amount.html',
windowClass: animatedSlideUp,
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl,
});
@ -567,7 +558,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$rootScope.modalOpened = false;
disableCloseModal();
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
m.addClass(animationService.modalAnimated.slideOutDown);
});
};
@ -973,7 +964,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
};
var modalInstance = $modal.open({
templateUrl: 'views/modals/paypro.html',
windowClass: animatedSlideUp,
windowClass: animationService.modalAnimated.slideUp,
controller: ModalInstanceCtrl,
});
@ -985,7 +976,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$rootScope.modalOpened = false;
disableCloseModal();
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
m.addClass(animationService.modalAnimated.slideOutDown);
});
};
@ -1162,7 +1153,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
var modalInstance = $modal.open({
templateUrl: 'views/modals/tx-details.html',
windowClass: animatedSlideRight,
windowClass: animationService.modalAnimated.slideRight,
controller: ModalInstanceCtrl,
});
@ -1174,7 +1165,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$rootScope.modalOpened = false;
disableCloseModal();
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutRight');
m.addClass(animationService.modalAnimated.slideOutRight);
});
};

View File

@ -470,7 +470,7 @@ angular
needProfile: false
});
})
.run(function($rootScope, $state, $log, uriHandler, isCordova, profileService, $timeout, nodeWebkit, uxLanguage) {
.run(function($rootScope, $state, $log, uriHandler, isCordova, profileService, $timeout, nodeWebkit, uxLanguage, animationService) {
FastClick.attach(document.body);
uxLanguage.init();
@ -494,45 +494,6 @@ angular
win.menu = nativeMenuBar;
}
var pageWeight = {
walletHome: 0,
copayers: -1,
cordova: -1,
payment: -1,
uriglidera: -1,
preferences: 11,
glidera: 11,
preferencesColor: 12,
backup: 12,
preferencesAdvanced: 12,
buyGlidera: 12,
sellGlidera: 12,
preferencesGlidera: 12,
about: 12,
delete: 13,
preferencesLanguage: 12,
preferencesUnit: 12,
preferencesFee: 12,
preferencesAltCurrency: 12,
preferencesBwsUrl: 12,
preferencesAlias: 12,
preferencesEmail: 12,
export: 13,
logs: 13,
information: 13,
translators: 13,
disclaimer: 13,
add: 11,
create: 12,
join: 12,
import: 12,
importLegacy: 13
};
var cachedTransitionState, cachedBackPanel;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (!profileService.profile && toState.needProfile) {
@ -563,112 +524,9 @@ 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);
timeoutID = setTimeout(cleanUp, 500);
};
function animateTransition(fromState, toState, event) {
if (isaosp)
return true;
// 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;
// Horizontal Slide Animation?
if (fromWeight && toWeight) {
if (fromWeight > toWeight) {
leaving = 'CslideOutRight';
} else {
entering = 'CslideInRight';
}
// Vertical Slide Animation?
} else if (fromName && fromWeight >= 0 && toWeight >= 0) {
if (toWeight) {
entering = 'CslideInUp';
} else {
leaving = 'CslideOutDown';
}
// no Animation ?
} else {
return true;
}
var e = document.getElementById('mainSection');
var desiredTransitionState = (fromName || '-') + ':' + (toName || '-');
if (desiredTransitionState == cachedTransitionState) {
e.className = entering || '';
cachedBackPanel.className = leaving || '';
cleanUpLater(e, cachedBackPanel);
//console.log('USing animation', cachedTransitionState);
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;
return false;
}
}
if (!animateTransition(fromState, toState)) {
if (!animationService.transitionAnimated(fromState, toState)) {
event.preventDefault();
// Time for the backpane to render
setTimeout(function() {

View File

@ -0,0 +1,152 @@
'use strict';
angular.module('copayApp.services').factory('animationService', function(isCordova) {
var root = {};
var cachedTransitionState, cachedBackPanel;
// DISABLE ANIMATION ON DESKTOP
root.modalAnimated = {
slideUp : isCordova ? 'full animated slideInUp' : 'full',
slideRight : isCordova ? 'full animated slideInRight' : 'full',
slideOutDown : isCordova ? 'slideOutDown' : 'hideModal',
slideOutRight : isCordova ? 'slideOutRight' : 'hideModal',
};
var pageWeight = {
walletHome: 0,
copayers: -1,
cordova: -1,
payment: -1,
uriglidera: -1,
preferences: 11,
glidera: 11,
preferencesColor: 12,
backup: 12,
preferencesAdvanced: 12,
buyGlidera: 12,
sellGlidera: 12,
preferencesGlidera: 12,
about: 12,
delete: 13,
preferencesLanguage: 12,
preferencesUnit: 12,
preferencesFee: 12,
preferencesAltCurrency: 12,
preferencesBwsUrl: 12,
preferencesAlias: 12,
preferencesEmail: 12,
export: 13,
logs: 13,
information: 13,
translators: 13,
disclaimer: 13,
add: 11,
create: 12,
join: 12,
import: 12,
importLegacy: 13
};
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);
timeoutID = setTimeout(cleanUp, 500);
};
root.transitionAnimated = function (fromState, toState, event) {
if (isaosp)
return true;
// 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;
// Horizontal Slide Animation?
if (isCordova && fromWeight && toWeight) {
if (fromWeight > toWeight) {
leaving = 'CslideOutRight';
} else {
entering = 'CslideInRight';
}
// Vertical Slide Animation?
} else if (isCordova && fromName && fromWeight >= 0 && toWeight >= 0) {
if (toWeight) {
entering = 'CslideInUp';
} else {
leaving = 'CslideOutDown';
}
// no Animation ?
} else {
return true;
}
var e = document.getElementById('mainSection');
var desiredTransitionState = (fromName || '-') + ':' + (toName || '-');
if (desiredTransitionState == cachedTransitionState) {
e.className = entering || '';
cachedBackPanel.className = leaving || '';
cleanUpLater(e, cachedBackPanel);
//console.log('USing animation', cachedTransitionState);
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;
return false;
}
}
return root;
});

View File

@ -51,13 +51,13 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
};
var modalInstance = $modal.open({
templateUrl: root._templateUrl(type, txp),
windowClass: 'full popup-tx-status closeModalAnimation',
windowClass: 'popup-tx-status full',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('animated fadeOutUp');
m.addClass('hideModal');
});
};