From 061c4fbd8fc9fd957812c668dca7aa6c5d000ab4 Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Thu, 7 May 2015 18:35:54 -0300 Subject: [PATCH 01/10] transations working, new schema --- public/index.html | 25 +- public/views/backup.html | 7 + public/views/includes/topbar.html | 13 +- public/views/preferences.html | 8 + public/views/preferencesAbout.html | 6 + public/views/preferencesAdvanced.html | 6 + public/views/preferencesAltCurrency.html | 8 + public/views/preferencesBwsUrl.html | 8 + public/views/preferencesColor.html | 8 + public/views/preferencesDeleteWallet.html | 7 + public/views/preferencesLogs.html | 8 + public/views/walletHome.html | 9 +- src/css/main.css | 2 +- src/css/mobile.css | 317 +++++++++++++--------- src/js/controllers/index.js | 6 + src/js/controllers/preferences.js | 1 - src/js/routes.js | 150 ++++------ 17 files changed, 340 insertions(+), 249 deletions(-) diff --git a/public/index.html b/public/index.html index 142969ec2..3d0702dd6 100644 --- a/public/index.html +++ b/public/index.html @@ -21,27 +21,20 @@
- -
- - -
-
+
+
+
+
+
diff --git a/public/views/backup.html b/public/views/backup.html index 2ca89d3fc..61e71645e 100644 --- a/public/views/backup.html +++ b/public/views/backup.html @@ -1,3 +1,10 @@ +
+
+ +
diff --git a/public/views/includes/topbar.html b/public/views/includes/topbar.html index bf3fb769a..8ec5880ca 100644 --- a/public/views/includes/topbar.html +++ b/public/views/includes/topbar.html @@ -3,21 +3,22 @@ - {{'Back'|translate}} - -
- - {{'Close'|translate}}
+
+ +
+

{{(titleSection|translate) || index.walletName}} diff --git a/public/views/preferences.html b/public/views/preferences.html index fb2a3ab46..8281eb458 100644 --- a/public/views/preferences.html +++ b/public/views/preferences.html @@ -1,3 +1,11 @@ + +
+
+ +
    diff --git a/public/views/preferencesAbout.html b/public/views/preferencesAbout.html index 660c8d5cf..d5b415dcc 100644 --- a/public/views/preferencesAbout.html +++ b/public/views/preferencesAbout.html @@ -1,3 +1,9 @@ +
    +
    +
      diff --git a/public/views/preferencesAdvanced.html b/public/views/preferencesAdvanced.html index 3e32b0adb..f27951a3c 100644 --- a/public/views/preferencesAdvanced.html +++ b/public/views/preferencesAdvanced.html @@ -1,3 +1,9 @@ +
      +
      +
        diff --git a/public/views/preferencesAltCurrency.html b/public/views/preferencesAltCurrency.html index d105d4ba9..25fc61447 100644 --- a/public/views/preferencesAltCurrency.html +++ b/public/views/preferencesAltCurrency.html @@ -1,3 +1,11 @@ +
        +
        + + +
        {{altCurrency.name}} diff --git a/public/views/preferencesBwsUrl.html b/public/views/preferencesBwsUrl.html index ba493a424..c704a3675 100644 --- a/public/views/preferencesBwsUrl.html +++ b/public/views/preferencesBwsUrl.html @@ -1,3 +1,11 @@ +
        +
        + + +
        diff --git a/public/views/preferencesColor.html b/public/views/preferencesColor.html index 7aa359333..0b7c74c4e 100644 --- a/public/views/preferencesColor.html +++ b/public/views/preferencesColor.html @@ -1,3 +1,11 @@ +
        +
        + + +
        █ diff --git a/public/views/preferencesDeleteWallet.html b/public/views/preferencesDeleteWallet.html index b36e8ffa8..425909eee 100644 --- a/public/views/preferencesDeleteWallet.html +++ b/public/views/preferencesDeleteWallet.html @@ -1,3 +1,10 @@ +
        +
        + +

        Warning!

        diff --git a/public/views/preferencesLogs.html b/public/views/preferencesLogs.html index 01ee55b80..192a6837c 100644 --- a/public/views/preferencesLogs.html +++ b/public/views/preferencesLogs.html @@ -1,3 +1,11 @@ +
        +
        + + +
        diff --git a/public/views/walletHome.html b/public/views/walletHome.html index c805d8cf2..af86570b2 100644 --- a/public/views/walletHome.html +++ b/public/views/walletHome.html @@ -1,5 +1,10 @@ -
        +
        +
        + +
        You do not have any wallet @@ -448,3 +453,5 @@
        +
        +
        diff --git a/src/css/main.css b/src/css/main.css index 48e9e7a27..0d0e4dbe0 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -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; } diff --git a/src/css/mobile.css b/src/css/mobile.css index eddc3d93e..d77ab1f13 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -379,52 +379,212 @@ 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; + transition:all 0.3s linear; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } -.pin-button-bar { - height: 25%; +@-webkit-keyframes CslideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } -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; +@keyframes CslideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } -a.pin-button:active { - color: #fff; - background-color: #3E5367; +.CslideInUp { + -webkit-animation: CslideInUp 0.3s 1; + animation: CslideInUp 0.3s 1; + z-index: 1003; } +@-webkit-keyframes CslideOutDown { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes CslideOutDown { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.CslideOutDown { + -webkit-animation: CslideOutDown 0.3s 1; + animation: CslideOutDown 0.3s 1; + z-index: 1003; +} + +@-webkit-keyframes CslideInLeft { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes CslideInLeft { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(100%,0, 0); + transform: translate3d(100%,0, 0); + } +} + +.CslideInLeft { + -webkit-animation: CslideInLeft 0.3s 1; + animation: CslideInLeft 0.3s 1; + z-index: 1003; +} + +@-webkit-keyframes CslideInRight { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(-100%,0, 0); + transform: translate3d(-100%,0, 0); + } +} + +@keyframes CslideInRight { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(-100%, 0,0); + transform: translate3d(-100%, 0,0); + } +} + +.CslideInRight { + -webkit-animation: CslideInRight 0.3s 1; + animation: CslideInRight 0.3s 1; + z-index: 1003; +} + +/* */ +/* [ui-view].slideDown.ng-enter { */ +/* -webkit-transform:translate3d(0, 0, 0); */ +/* -moz-transform:translate3d(0, 0, 0); */ +/* transform:translate3d(0, 0, 0); */ +/* z-index:120; */ +/* } */ +/* */ +/* [ui-view].slideDown.ng-enter-active { */ +/* z-index:120; */ +/* } */ +/* */ +/* [ui-view].slideDown.ng-leave { */ +/* -webkit-transform:translate3d(0, 0, 0); */ +/* z-index:100; */ +/* } */ +/* */ +/* [ui-view].slideDown.ng-leave-active { */ +/* -webkit-transform:translate3d(0, 0, 0); */ +/* z-index:101; */ +/* } */ +/* */ + + +[ui-view].slideRight.ng-enter { + -webkit-transform:translate3d(100%, 0, 0); + z-index:100; +} + +[ui-view].slideRight.ng-enter-active { + -webkit-transform:translate3d(0, 0, 0); + z-index:100; +} + + [ui-view].slideRight.ng-leave { + -webkit-transform:translate3d(0, 0, 0); + z-index:120; +} + +[ui-view].slideRight.ng-leave-active { + -webkit-transform:translate3d(100%,0, 0); + z-index:120; +} + + + +/* == */ + .icon-circle, .icon-circle-active { color: #1ABC9C; } @@ -685,95 +845,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); @@ -797,8 +868,8 @@ textarea:focus .animated.slideInRight, .animated.slideInLeft, -.animated.slideInUp, -.animated.slideInDown { +.animated.CslideInUp, +.animated.CslideOutDown { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } diff --git a/src/js/controllers/index.js b/src/js/controllers/index.js index c3bf5b394..3d379bd4d 100644 --- a/src/js/controllers/index.js +++ b/src/js/controllers/index.js @@ -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', diff --git a/src/js/controllers/preferences.js b/src/js/controllers/preferences.js index 90e9777ec..ba63e4225 100644 --- a/src/js/controllers/preferences.js +++ b/src/js/controllers/preferences.js @@ -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 = { diff --git a/src/js/routes.js b/src/js/routes.js index 357f95f42..bc8533028 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -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; } } @@ -229,15 +221,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', { @@ -286,13 +271,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 +282,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 +294,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 +305,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 +317,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 +328,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 +339,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 +350,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', { @@ -477,7 +402,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 @@ -522,28 +447,8 @@ angular importLegacy: 12 }; - - $rootScope.$on('$stateChangeSuccess', function() { - $rootScope.$emit('Animation/Disable'); - }); - $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 +476,48 @@ angular $state.transitionTo('copayers'); event.preventDefault(); } + + function animateTransition(entering, leaving) { + console.log('[routes.js.540:entering:]', entering, leaving); //TODO + var e = document.getElementById('mainSection'); + if (entering) { + e.className = entering; + } else { + e.className = ''; + } + + var e2 = e.cloneNode(true); + if (leaving) + e2.className= leaving; + else + e2.className =''; + + var c = document.getElementById('sectionContainer'); + e2.id = 'mainSectionDup'; + c.appendChild(e2); + + // TODO webkitTransitionEnd +//el.addEventListener("transitionend", updateTransition, true); + setTimeout(function(){ +console.log('[routes.js.556] DELETING OLD'); //TODO + e2.parentNode.removeChild(e2); + e2.innerHTML = ""; + }, 400); + } + + console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO + if (pageWeight[fromState.name] && pageWeight[toState.name]) { + if (pageWeight[fromState.name] > pageWeight[toState.name]) { + animateTransition(null, 'CslideInLeft'); + } else { + animateTransition(null, 'CslideInRight'); + } + } else if (fromState.name) { + if (pageWeight[toState.name]) { + animateTransition('CslideInUp', null); + } else { + animateTransition(null, 'CslideOutDown'); + } + } }); }); From 13cdc0dc4674365e08bf33361d36c5d826ddd47c Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Thu, 7 May 2015 18:49:30 -0300 Subject: [PATCH 02/10] fix easing --- src/css/mobile.css | 73 +++++++++++----------------------------------- 1 file changed, 17 insertions(+), 56 deletions(-) diff --git a/src/css/mobile.css b/src/css/mobile.css index d77ab1f13..e081e1c64 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -404,9 +404,16 @@ to prevent collapsing during animation*/ position: absolute; left: 0; right: 0; - transition:all 0.3s linear; - -webkit-animation-fill-mode: both; + + animation-timing-function: ease-in-out; + animation-duration: 0.4s; + animation-iteration-count: 1; animation-fill-mode: both; + + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-duration: 0.4s; + -webkit-animation-iteration-count: 1; + -webkit-animation-fill-mode: both; } @-webkit-keyframes CslideInUp { @@ -436,8 +443,8 @@ to prevent collapsing during animation*/ } .CslideInUp { - -webkit-animation: CslideInUp 0.3s 1; - animation: CslideInUp 0.3s 1; + -webkit-animation-name: CslideInUp; + animation-name: CslideInUp; z-index: 1003; } @@ -468,8 +475,8 @@ to prevent collapsing during animation*/ } .CslideOutDown { - -webkit-animation: CslideOutDown 0.3s 1; - animation: CslideOutDown 0.3s 1; + -webkit-animation-name: CslideOutDown; + animation-name: CslideOutDown; z-index: 1003; } @@ -500,8 +507,8 @@ to prevent collapsing during animation*/ } .CslideInLeft { - -webkit-animation: CslideInLeft 0.3s 1; - animation: CslideInLeft 0.3s 1; + -webkit-animation-name: CslideInLeft; + animation-name: CslideInLeft; z-index: 1003; } @@ -532,57 +539,11 @@ to prevent collapsing during animation*/ } .CslideInRight { - -webkit-animation: CslideInRight 0.3s 1; - animation: CslideInRight 0.3s 1; + -webkit-animation-name: CslideInRight; + animation-name: CslideInRight; z-index: 1003; } -/* */ -/* [ui-view].slideDown.ng-enter { */ -/* -webkit-transform:translate3d(0, 0, 0); */ -/* -moz-transform:translate3d(0, 0, 0); */ -/* transform:translate3d(0, 0, 0); */ -/* z-index:120; */ -/* } */ -/* */ -/* [ui-view].slideDown.ng-enter-active { */ -/* z-index:120; */ -/* } */ -/* */ -/* [ui-view].slideDown.ng-leave { */ -/* -webkit-transform:translate3d(0, 0, 0); */ -/* z-index:100; */ -/* } */ -/* */ -/* [ui-view].slideDown.ng-leave-active { */ -/* -webkit-transform:translate3d(0, 0, 0); */ -/* z-index:101; */ -/* } */ -/* */ - - -[ui-view].slideRight.ng-enter { - -webkit-transform:translate3d(100%, 0, 0); - z-index:100; -} - -[ui-view].slideRight.ng-enter-active { - -webkit-transform:translate3d(0, 0, 0); - z-index:100; -} - - [ui-view].slideRight.ng-leave { - -webkit-transform:translate3d(0, 0, 0); - z-index:120; -} - -[ui-view].slideRight.ng-leave-active { - -webkit-transform:translate3d(100%,0, 0); - z-index:120; -} - - - /* == */ .icon-circle, .icon-circle-active { From 5cf8db237837debad252f1c9d1ea65b5aa69a02b Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Fri, 8 May 2015 09:35:33 -0300 Subject: [PATCH 03/10] anim at routes --- public/views/add.html | 8 ++ public/views/copayers.html | 6 + public/views/create.html | 8 ++ public/views/import.html | 6 + public/views/importLegacy.html | 8 ++ public/views/join.html | 7 ++ public/views/paymentUri.html | 6 + public/views/preferencesAltCurrency.html | 2 +- public/views/preferencesBwsUrl.html | 2 +- public/views/preferencesLanguage.html | 8 ++ public/views/preferencesUnit.html | 9 ++ src/css/mobile.css | 137 ++--------------------- src/js/routes.js | 108 +++++------------- 13 files changed, 107 insertions(+), 208 deletions(-) diff --git a/public/views/add.html b/public/views/add.html index 3201a9753..86c7505d4 100644 --- a/public/views/add.html +++ b/public/views/add.html @@ -1,3 +1,11 @@ +
        +
        + + +
        • diff --git a/public/views/copayers.html b/public/views/copayers.html index b713e9930..dd6acf5c9 100644 --- a/public/views/copayers.html +++ b/public/views/copayers.html @@ -1,3 +1,9 @@ +
          +
          +
          diff --git a/public/views/create.html b/public/views/create.html index 62ca0fcf0..75f85b2d3 100644 --- a/public/views/create.html +++ b/public/views/create.html @@ -1,3 +1,11 @@ +
          +
          + + +
          diff --git a/public/views/import.html b/public/views/import.html index 414c06682..2edf34ff3 100644 --- a/public/views/import.html +++ b/public/views/import.html @@ -1,3 +1,9 @@ +
          +
          +
          diff --git a/public/views/importLegacy.html b/public/views/importLegacy.html index 80b4fc759..8442f7208 100644 --- a/public/views/importLegacy.html +++ b/public/views/importLegacy.html @@ -1,3 +1,11 @@ +
          +
          + + +
          diff --git a/public/views/join.html b/public/views/join.html index a2b94a2a0..e80647b92 100644 --- a/public/views/join.html +++ b/public/views/join.html @@ -1,3 +1,10 @@ +
          +
          + +
          diff --git a/public/views/paymentUri.html b/public/views/paymentUri.html index 39ee15334..9d3b97eea 100644 --- a/public/views/paymentUri.html +++ b/public/views/paymentUri.html @@ -1,3 +1,9 @@ +
          +
          +
          diff --git a/public/views/preferencesAltCurrency.html b/public/views/preferencesAltCurrency.html index 25fc61447..4a2159ef1 100644 --- a/public/views/preferencesAltCurrency.html +++ b/public/views/preferencesAltCurrency.html @@ -1,7 +1,7 @@
          + ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'; noColor = true">
          diff --git a/public/views/preferencesBwsUrl.html b/public/views/preferencesBwsUrl.html index c704a3675..acef1d2bc 100644 --- a/public/views/preferencesBwsUrl.html +++ b/public/views/preferencesBwsUrl.html @@ -1,7 +1,7 @@
          + ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'; noColor = true">
          diff --git a/public/views/preferencesLanguage.html b/public/views/preferencesLanguage.html index 17f5ef7ab..5672bb87f 100644 --- a/public/views/preferencesLanguage.html +++ b/public/views/preferencesLanguage.html @@ -1,3 +1,11 @@ +
          +
          + + +
          Applying changes
          +
          + + + +
          {{unit.shortName}} diff --git a/src/css/mobile.css b/src/css/mobile.css index e081e1c64..4cf82c6aa 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -406,141 +406,34 @@ to prevent collapsing during animation*/ right: 0; animation-timing-function: ease-in-out; - animation-duration: 0.4s; + animation-duration: .4s; animation-iteration-count: 1; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; - -webkit-animation-duration: 0.4s; + -webkit-animation-duration: .4s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; } -@-webkit-keyframes CslideInUp { - 0% { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes CslideInUp { - 0% { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - .CslideInUp { - -webkit-animation-name: CslideInUp; - animation-name: CslideInUp; + -webkit-animation-name: slideInUp; + animation-name: slideInUp; z-index: 1003; } - -@-webkit-keyframes CslideOutDown { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} - -@keyframes CslideOutDown { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } -} - .CslideOutDown { - -webkit-animation-name: CslideOutDown; - animation-name: CslideOutDown; + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; z-index: 1003; } - -@-webkit-keyframes CslideInLeft { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } -} - -@keyframes CslideInLeft { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(100%,0, 0); - transform: translate3d(100%,0, 0); - } -} - -.CslideInLeft { - -webkit-animation-name: CslideInLeft; - animation-name: CslideInLeft; +.CslideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; z-index: 1003; } - -@-webkit-keyframes CslideInRight { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(-100%,0, 0); - transform: translate3d(-100%,0, 0); - } -} - -@keyframes CslideInRight { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - -webkit-transform: translate3d(-100%, 0,0); - transform: translate3d(-100%, 0,0); - } -} - .CslideInRight { - -webkit-animation-name: CslideInRight; - animation-name: CslideInRight; + -webkit-animation-name: slideInRight; + animation-name: slideInRight; z-index: 1003; } @@ -827,14 +720,6 @@ textarea:focus transform: translate3d(-100%, 0, 0) !important; } -.animated.slideInRight, -.animated.slideInLeft, -.animated.CslideInUp, -.animated.CslideOutDown { - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; -} - /* removes 300ms in IE */ -ms-touch-action: manipulation; /* IE10 / touch-action: manipulation; /* IE11+ */ diff --git a/src/js/routes.js b/src/js/routes.js index bc8533028..c1f3f8789 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -112,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 }) @@ -134,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', { @@ -151,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', { @@ -173,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; - } - } } }) @@ -192,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', { @@ -209,9 +170,6 @@ angular 'main': { templateUrl: 'views/copayers.html' }, - 'topbar': { - templateUrl: 'views/includes/topbar.html' - } } }) .state('preferences', { @@ -233,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', { @@ -252,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', { @@ -372,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', { @@ -478,14 +412,16 @@ angular } function animateTransition(entering, leaving) { - console.log('[routes.js.540:entering:]', entering, leaving); //TODO - var e = document.getElementById('mainSection'); - if (entering) { - e.className = entering; - } else { - e.className = ''; + // Animation in progress? + var x = document.getElementById('mainSectionDup'); + if (x) { + console.log('Anim in progress'); + return; } + // console.log('[routes.js.540:entering:]', entering, leaving); //TODO + var e = document.getElementById('mainSection'); + var e2 = e.cloneNode(true); if (leaving) e2.className= leaving; @@ -496,21 +432,33 @@ angular e2.id = 'mainSectionDup'; c.appendChild(e2); - // TODO webkitTransitionEnd -//el.addEventListener("transitionend", updateTransition, true); - setTimeout(function(){ -console.log('[routes.js.556] DELETING OLD'); //TODO + if (entering) { + e.className = entering; + } else { + e.className = ''; + } + + var cleanedUp = false; + var cleanUp = function() { + if (cleanedUp) return; + cleanedUp=true; e2.parentNode.removeChild(e2); e2.innerHTML = ""; - }, 400); + e.className = ''; + }; + e.addEventListener("animationend", cleanUp, true); + e2.addEventListener("animationend", cleanUp, true); + e.addEventListener("webkitAnimationEnd", cleanUp, true); + e2.addEventListener("webkitAnimationEnd", cleanUp, true); + setTimeout(cleanUp, 500); } - console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO +// console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO if (pageWeight[fromState.name] && pageWeight[toState.name]) { if (pageWeight[fromState.name] > pageWeight[toState.name]) { - animateTransition(null, 'CslideInLeft'); + animateTransition(null,'CslideOutRight', event); } else { - animateTransition(null, 'CslideInRight'); + animateTransition('CslideInRight', null, event); } } else if (fromState.name) { if (pageWeight[toState.name]) { From 73634f125fb0994b1c7fc67601e62f85c1c18b7b Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Fri, 8 May 2015 11:38:34 -0300 Subject: [PATCH 04/10] update balance later --- src/css/mobile.css | 4 ++-- src/js/controllers/walletHome.js | 9 +++++---- src/js/routes.js | 4 ++++ 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/css/mobile.css b/src/css/mobile.css index 4cf82c6aa..3b6c6a7b6 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -405,12 +405,12 @@ to prevent collapsing during animation*/ left: 0; right: 0; - animation-timing-function: ease-in-out; + animation-timing-function: linear; animation-duration: .4s; animation-iteration-count: 1; animation-fill-mode: both; - -webkit-animation-timing-function: ease-in-out; + -webkit-animation-timing-function: linear; -webkit-animation-duration: .4s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; diff --git a/src/js/controllers/walletHome.js b/src/js/controllers/walletHome.js index b41b11ca8..895eccb32 100644 --- a/src/js/controllers/walletHome.js +++ b/src/js/controllers/walletHome.js @@ -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'); + }); } }); @@ -598,15 +599,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(); }); } diff --git a/src/js/routes.js b/src/js/routes.js index c1f3f8789..64b96a4a5 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -411,6 +411,10 @@ angular event.preventDefault(); } + /* + * -------------------- + */ + function animateTransition(entering, leaving) { // Animation in progress? var x = document.getElementById('mainSectionDup'); From fb3026f3c4b1ec8a0755685bf5e9379cb9214bbc Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Fri, 8 May 2015 12:02:11 -0300 Subject: [PATCH 05/10] no future transactions --- src/js/controllers/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/js/controllers/index.js b/src/js/controllers/index.js index 3d379bd4d..bb05060b9 100644 --- a/src/js/controllers/index.js +++ b/src/js/controllers/index.js @@ -334,6 +334,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) { From 1c463254fad48c2b46a823c8d70b3abb25da62af Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Fri, 8 May 2015 16:54:32 -0300 Subject: [PATCH 06/10] refactor anims --- src/css/mobile.css | 4 +- src/js/routes.js | 104 +++++++++++++++++++++++++-------------------- 2 files changed, 60 insertions(+), 48 deletions(-) diff --git a/src/css/mobile.css b/src/css/mobile.css index 3b6c6a7b6..9ee701e6e 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -406,12 +406,12 @@ to prevent collapsing during animation*/ right: 0; animation-timing-function: linear; - animation-duration: .4s; + animation-duration: 10s; animation-iteration-count: 1; animation-fill-mode: both; -webkit-animation-timing-function: linear; - -webkit-animation-duration: .4s; + -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; } diff --git a/src/js/routes.js b/src/js/routes.js index 64b96a4a5..3d0eda6c0 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -247,7 +247,7 @@ angular 'main': { templateUrl: 'views/preferencesBwsUrl.html' }, - + } }) .state('delete', { @@ -360,9 +360,8 @@ angular var pageWeight = { walletHome: 0, - receive: 0, - send: 0, - history: 0, + copayers: -1, + preferences: 11, preferencesColor: 12, backup: 12, @@ -381,6 +380,9 @@ angular importLegacy: 12 }; + + var transitionReady; + $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { @@ -415,37 +417,11 @@ angular * -------------------- */ - function animateTransition(entering, leaving) { - // Animation in progress? - var x = document.getElementById('mainSectionDup'); - if (x) { - console.log('Anim in progress'); - return; - } - - // console.log('[routes.js.540:entering:]', entering, leaving); //TODO - var e = document.getElementById('mainSection'); - - var e2 = e.cloneNode(true); - if (leaving) - e2.className= leaving; - else - e2.className =''; - - var c = document.getElementById('sectionContainer'); - e2.id = 'mainSectionDup'; - c.appendChild(e2); - - if (entering) { - e.className = entering; - } else { - e.className = ''; - } - + function cleanUpLater (e, e2) { var cleanedUp = false; var cleanUp = function() { if (cleanedUp) return; - cleanedUp=true; + cleanedUp = true; e2.parentNode.removeChild(e2); e2.innerHTML = ""; e.className = ''; @@ -454,22 +430,58 @@ angular e2.addEventListener("animationend", cleanUp, true); e.addEventListener("webkitAnimationEnd", cleanUp, true); e2.addEventListener("webkitAnimationEnd", cleanUp, true); - setTimeout(cleanUp, 500); - } + setTimeout(cleanUp, 11000); + }; -// console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO - if (pageWeight[fromState.name] && pageWeight[toState.name]) { - if (pageWeight[fromState.name] > pageWeight[toState.name]) { - animateTransition(null,'CslideOutRight', event); - } else { - animateTransition('CslideInRight', null, event); - } - } else if (fromState.name) { - if (pageWeight[toState.name]) { - animateTransition('CslideInUp', null); - } else { - animateTransition(null, 'CslideOutDown'); + function animateTransition(fromState, toState, event) { + + // Animation in progress? + var x = document.getElementById('mainSectionDup'); + if (x) { + console.log('Anim in progress'); + event.preventDefault(); + return; } + + var fromName = fromState.name; + var toName = toState.name; +console.log('[routes.js.446:fromName:]',fromName, toName); //TODO + + var fromWeight = pageWeight[fromName]; + var toWeight = pageWeight[toName]; + +console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO + + var entering = null, leaving = null; + + if (fromWeight && toWeight) { + if (fromWeight > toWeight) { + leaving = 'CslideOutRight'; + } else { + entering = 'CslideInRight'; + } + } else if (fromName && fromWeight >= 0 && toWeight >= 0) { + if (toName) { + entering = 'CslideInUp'; + } else { + leaving = 'CslideOutDown'; + } + } + +console.log('[routes.js.467]', entering, leaving); //TODO + + var e = document.getElementById('mainSection'); + + var e2 = e.cloneNode(true); + var c = document.getElementById('sectionContainer'); + e2.id = 'mainSectionDup'; + + + c.appendChild(e2); + e.className = entering || ''; + e2.className = leaving || ''; + cleanUpLater(e,e2); } + animateTransition(fromState, toState, event); }); }); From b8086aa522936e89132132ec69ba84a4d7c52c1e Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Fri, 8 May 2015 18:28:50 -0300 Subject: [PATCH 07/10] fix flash on ios --- src/css/mobile.css | 8 ++++-- src/js/routes.js | 67 +++++++++++++++++++++++++++++++--------------- 2 files changed, 52 insertions(+), 23 deletions(-) diff --git a/src/css/mobile.css b/src/css/mobile.css index 9ee701e6e..8798f180c 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -406,17 +406,19 @@ to prevent collapsing during animation*/ right: 0; animation-timing-function: linear; - animation-duration: 10s; + animation-duration: .3s; animation-iteration-count: 1; animation-fill-mode: both; -webkit-animation-timing-function: linear; - -webkit-animation-duration: 10s; + -webkit-animation-duration: .3s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; } .CslideInUp { + transform: translate3d(0, 100%, 0); + -webkit-transform: translate3d(0, 100%, 0); -webkit-animation-name: slideInUp; animation-name: slideInUp; z-index: 1003; @@ -432,6 +434,8 @@ to prevent collapsing during animation*/ 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; diff --git a/src/js/routes.js b/src/js/routes.js index 3d0eda6c0..22fccd09f 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -381,7 +381,7 @@ angular }; - var transitionReady; + var cachedTransitionState, cachedBackPanel; $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { @@ -417,42 +417,51 @@ angular * -------------------- */ - function cleanUpLater (e, e2) { - var cleanedUp = false; + function cleanUpLater(e, e2) { + var cleanedUp = false, timeoutID; var cleanUp = function() { if (cleanedUp) return; +console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO 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); - setTimeout(cleanUp, 11000); + // TODO + timeoutID = setTimeout(cleanUp, 500); }; function animateTransition(fromState, toState, event) { // Animation in progress? var x = document.getElementById('mainSectionDup'); - if (x) { + if (x && !cachedTransitionState) { console.log('Anim in progress'); - event.preventDefault(); - return; + return true; } var fromName = fromState.name; var toName = toState.name; -console.log('[routes.js.446:fromName:]',fromName, toName); //TODO + console.log('[routes.js.446:from/toName:]', fromName, toName); //TODO + if (!fromName || !toName) + return true; var fromWeight = pageWeight[fromName]; var toWeight = pageWeight[toName]; -console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO - var entering = null, leaving = null; + var entering = null, + leaving = null; if (fromWeight && toWeight) { if (fromWeight > toWeight) { @@ -461,27 +470,43 @@ console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO entering = 'CslideInRight'; } } else if (fromName && fromWeight >= 0 && toWeight >= 0) { - if (toName) { + if (toWeight) { entering = 'CslideInUp'; } else { leaving = 'CslideOutDown'; } } -console.log('[routes.js.467]', entering, leaving); //TODO - + console.log('[routes.js.467]', entering, leaving); //TODO var e = document.getElementById('mainSection'); - var e2 = e.cloneNode(true); - var c = document.getElementById('sectionContainer'); - e2.id = 'mainSectionDup'; + var desiredTransitionState = (fromName || '-') + ':' + (toName || '-'); - c.appendChild(e2); - e.className = entering || ''; - e2.className = leaving || ''; - cleanUpLater(e,e2); + if (desiredTransitionState == cachedTransitionState) { + e.className = entering || ''; + cachedBackPanel.className = leaving || ''; + cleanUpLater(e, cachedBackPanel); + console.log('USing', cachedTransitionState); //TODO + return true; + } else { + cachedBackPanel = e.cloneNode(true); + cachedBackPanel.id = 'mainSectionDup'; + var c = document.getElementById('sectionContainer'); + c.appendChild(cachedBackPanel); + + 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); } - animateTransition(fromState, toState, event); }); }); From a5d9e0970a59813872e3e1091bc61d426a3ada6c Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Mon, 11 May 2015 15:12:27 -0300 Subject: [PATCH 08/10] keep scroll on anim start --- src/js/routes.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/js/routes.js b/src/js/routes.js index 22fccd09f..d97ec6c74 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -452,7 +452,6 @@ console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO var fromName = fromState.name; var toName = toState.name; - console.log('[routes.js.446:from/toName:]', fromName, toName); //TODO if (!fromName || !toName) return true; @@ -476,8 +475,6 @@ console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO leaving = 'CslideOutDown'; } } - - console.log('[routes.js.467]', entering, leaving); //TODO var e = document.getElementById('mainSection'); @@ -490,11 +487,19 @@ console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO console.log('USing', cachedTransitionState); //TODO return true; } else { + var sc; + var contentDiv = e.getElementsByClassName('content'); + if (contentDiv) + 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; From 41287829792027ceb95b748fdb0a9cb74a8ea2ec Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Mon, 11 May 2015 15:21:08 -0300 Subject: [PATCH 09/10] add timeout to walletHome --- src/js/controllers/walletHome.js | 16 ++++++++-------- src/js/routes.js | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/js/controllers/walletHome.js b/src/js/controllers/walletHome.js index 895eccb32..4ec12ece0 100644 --- a/src/js/controllers/walletHome.js +++ b/src/js/controllers/walletHome.js @@ -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'); }; }; @@ -315,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(); @@ -861,8 +860,9 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi }; // Startup events - this.bindTouchDown(); - this.setAddress(); - this.setSendFormInputs(); - + $timeout(function() { + self.bindTouchDown(); + self.setAddress(); + self.setSendFormInputs(); + }, 50); }); diff --git a/src/js/routes.js b/src/js/routes.js index d97ec6c74..1f681c824 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -421,7 +421,6 @@ angular var cleanedUp = false, timeoutID; var cleanUp = function() { if (cleanedUp) return; -console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO cleanedUp = true; e2.parentNode.removeChild(e2); e2.innerHTML = ""; @@ -488,8 +487,9 @@ console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO return true; } else { var sc; - var contentDiv = e.getElementsByClassName('content'); - if (contentDiv) + // Keep prefDiv scroll + var contentDiv = e.getElementsByClassName('content'); + if (contentDiv && contentDiv[0]) sc = contentDiv[0].scrollTop; cachedBackPanel = e.cloneNode(true); From d2c96e9611c0ea576c88bf5c544f169c70ebc7fb Mon Sep 17 00:00:00 2001 From: Matias Alejo Garcia Date: Mon, 11 May 2015 15:25:42 -0300 Subject: [PATCH 10/10] rm async --- src/js/controllers/walletHome.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/js/controllers/walletHome.js b/src/js/controllers/walletHome.js index 4ec12ece0..98044ef5d 100644 --- a/src/js/controllers/walletHome.js +++ b/src/js/controllers/walletHome.js @@ -859,10 +859,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi return actions.hasOwnProperty('create'); }; - // Startup events - $timeout(function() { - self.bindTouchDown(); - self.setAddress(); - self.setSendFormInputs(); - }, 50); + this.bindTouchDown(); + this.setAddress(); + this.setSendFormInputs(); });