diff --git a/src/css/mobile.css b/src/css/mobile.css index ad536cf03..1be6f3013 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -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; } diff --git a/src/js/controllers/buyGlidera.js b/src/js/controllers/buyGlidera.js index f4c2df44b..da8469454 100644 --- a/src/js/controllers/buyGlidera.js +++ b/src/js/controllers/buyGlidera.js @@ -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) { diff --git a/src/js/controllers/copayers.js b/src/js/controllers/copayers.js index ad8f6d472..5a61e5af2 100644 --- a/src/js/controllers/copayers.js +++ b/src/js/controllers/copayers.js @@ -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(); diff --git a/src/js/controllers/preferencesDelete.js b/src/js/controllers/preferencesDelete.js index 99c6e3f01..7fbc0c4d2 100644 --- a/src/js/controllers/preferencesDelete.js +++ b/src/js/controllers/preferencesDelete.js @@ -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(); diff --git a/src/js/controllers/preferencesGlidera.js b/src/js/controllers/preferencesGlidera.js index ecc39ee08..c2a901379 100644 --- a/src/js/controllers/preferencesGlidera.js +++ b/src/js/controllers/preferencesGlidera.js @@ -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); }); }; diff --git a/src/js/controllers/sellGlidera.js b/src/js/controllers/sellGlidera.js index 4bac5037f..a417b457d 100644 --- a/src/js/controllers/sellGlidera.js +++ b/src/js/controllers/sellGlidera.js @@ -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) { diff --git a/src/js/controllers/topbar.js b/src/js/controllers/topbar.js index 74da473e5..cf8114c85 100644 --- a/src/js/controllers/topbar.js +++ b/src/js/controllers/topbar.js @@ -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); diff --git a/src/js/controllers/walletHome.js b/src/js/controllers/walletHome.js index 5c76c5386..036a986c6 100644 --- a/src/js/controllers/walletHome.js +++ b/src/js/controllers/walletHome.js @@ -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); }); }; diff --git a/src/js/routes.js b/src/js/routes.js index 49991165b..b5542771c 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -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() { diff --git a/src/js/services/animationService.js b/src/js/services/animationService.js new file mode 100644 index 000000000..3051e8a8e --- /dev/null +++ b/src/js/services/animationService.js @@ -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; +}); diff --git a/src/js/services/txStatus.js b/src/js/services/txStatus.js index 7435e846b..a4b45d485 100644 --- a/src/js/services/txStatus.js +++ b/src/js/services/txStatus.js @@ -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'); }); };