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'); + } + } }); });