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

Merge pull request #2663 from cmgustavo/feat/slide

Browse source 
Modals animation (slide up/down)
This commit is contained in:
Matias Alejo Garcia 2015-05-08 14:26:14 -03:00
commit 9f620d127e
19 changed files with 532 additions and 470 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Gruntfile.js
View file

@ -84,9 +84,7 @@ module.exports = function(grunt) {
'bower_components/moment/min/moment-with-locales.js',
'bower_components/angular/angular.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-foundation/mm-foundation.js',
'bower_components/angular-foundation/mm-foundation-tpls.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-moment/angular-moment.js',
'bower_components/ng-lodash/build/ng-lodash.js',
'bower_components/angular-qrcode/qrcode.js',
@ -126,22 +124,6 @@ module.exports = function(grunt) {
dest: 'public/css/foundation.css',
}
},
cssmin: {
copay: {
files: {
'public/css/copay.css': ['src/css/*.css'],
}
},
foundation: {
files: {
'public/css/foundation.css': [
'bower_components/angular/angular-csp.css',
'bower_components/foundation/css/foundation.css',
'bower_components/animate.css/animate.css'
]
}
}
},
uglify: {
options: {
mangle: false
@ -209,7 +191,6 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-angular-gettext');
grunt.loadNpmTasks('grunt-markdown');
grunt.loadNpmTasks('grunt-release');

1
bower.json
View file

@ -9,7 +9,6 @@
"dependencies": {
"angular": "~1.3.13",
"angular-foundation": "*",
"angular-animate": "~1.3.13",
"angular-qrcode": "~5.1.0",
"angular-gettext": "~2.0.5",
"animate.css": "~3.2.0",

1
package.json
View file

@ -29,7 +29,6 @@
"grunt-cli": "^0.1.13",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.2",
"grunt-contrib-uglify": "^0.8.0",
"grunt-contrib-watch": "^0.5.3",
"grunt-exec": "^0.4.6",

11
public/index.html
View file

@ -31,8 +31,15 @@
<section
ng-class="{'main': index.hasProfile, 'main-dark': mainDark, 'animation-left': index.swipeLeft,
'animation-right': index.swipeRight}"
class="animation-slide"
ng-class="{
'main': index.hasProfile,
'main-dark': mainDark,
'animation-left': index.slideLeft,
'animation-right': index.slideRight,
'animation-up': index.slideUp,
'animation-down': index.slideDown
}"
ui-view="main"></section>
<div ui-view="menu" ng-if="!index.noFocusedWallet && !$root.hideMenuBar"></div>
<a class="close-menu" ng-click="index.closeMenu()"></a>

2
public/views/importLegacy.html
View file

@ -31,7 +31,7 @@
<label for="username">
{{importLegacy.fromCloud ? 'Email': 'Username'}}
<input type="text" class="form-control" placeholder="{{importLegacy.fromCloud ? 'Email': 'Username'}}"
name="username" ng-model="importLegacy.username" required>
name="username" ng-model="importLegacy.username" autocapitalize="off" required>
</label>
<label for="password">

6
public/views/includes/topbar.html
View file

@ -1,9 +1,9 @@
<nav ng-controller="topbarController as topbar" class="tab-bar">
<section class="left-small">
<a id="hamburger" class="p10 ng-animate-disabled" ng-show="!goBackToState && !closeToHome && !index.noFocusedWallet"
<a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome && !index.noFocusedWallet"
ng-click="index.openMenu()"><i class="fi-list size-24"></i>
</a>
<a ng-show="goBackToState" class="ng-animate-disabled"
<a ng-show="goBackToState"
ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i>
<span class="text-back">{{'Back'|translate}}</span>
</a>
@ -12,7 +12,7 @@
<section class="right-small" ng-show="!goBackToState">
<a id="camera-icon" ng-show="!closeToHome && index.isComplete" class="p10"
ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
<a ng-show="closeToHome" class="p10 ng-animate-disabled"
<a ng-show="closeToHome" class="p10"
ng-click="topbar.goHome(); closeToHome = null">
<span class="text-close">{{'Close'|translate}}</span>
</a>

2
public/views/includes/transaction.html
View file

@ -1,6 +1,6 @@
<div class="ng-animate-disabled row collapse last-transactions-content line-b"
ng-class="{'text-gray':!tx.pendingForUs}"
ng-click="openTxModal(tx, index.copayers)">
ng-click="home.openTxpModal(tx, index.copayers)">
<div class="small-1 columns text-center" >
<i class="icon-circle-active size-10" ng-show="tx.pendingForUs" ng-style="{'color':index.backgroundColor}" style="margin-top:8px;"></i>
&nbsp;

2
public/views/modals/copayers.html
View file

@ -1,5 +1,5 @@
<nav class="tab-bar">
<section class="right-small">
<section class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>

2
public/views/modals/paypro.html
View file

@ -1,5 +1,5 @@
<nav class="tab-bar">
<section class="right-small">
<section class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>

2
public/views/modals/scanner.html
View file

@ -1,5 +1,5 @@
<nav class="tab-bar">
<section class="right-small">
<section class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>

10
public/views/modals/tx-details.html
View file

@ -1,6 +1,6 @@
<nav class="tab-bar">
<section class="right-small">
<a ng-click="cancel()" class="p10 ng-animate-disabled">
<section class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>
</section>
@ -23,7 +23,7 @@
<h4 class="title m0" translate>Information</h4>
<ul class="no-bullet size-14 m0">
<li ng-if="btx.addressTo" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
<li ng-if="btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
<span class="text-gray" translate>To</span>:
<span class="right">
<span ng-if="btx.merchant">
@ -35,7 +35,7 @@
</span>
</span>
</li>
<li ng-if="btx.time" class="line-b p10">
<li ng-if="btx.time" class="line-b p10 oh">
<span class="text-gray" translate>Date</span>:
<span class="right">
<time>{{ btx.time * 1000 | amCalendar}}</time>
@ -53,7 +53,7 @@
{{btx.merchant.pr.pd.memo}}
</span>
</li>
<li ng-if="btx.time" class="line-b p10">
<li ng-if="btx.time" class="line-b p10 oh">
<span class="text-gray" translate>Confirmations</span>:
<span class="right" >
<span class="text-warning" ng-show="!btx.confirmations || btx.confirmations == 0" translate>

4
public/views/modals/txp-details.html
View file

@ -1,6 +1,6 @@
<nav class="tab-bar">
<section class="right-small">
<a ng-click="cancel()" class="p10 ng-animate-disabled">
<section class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>
</section>

50
public/views/walletHome.html
View file

@ -33,6 +33,7 @@
index.onGoingProcessName == 'openingWallet'
|| index.onGoingProcessName == 'updatingStatus'
|| index.onGoingProcessName == 'updatingBalance'
|| index.onGoingProcessName == 'updatingPendingTxps'
"> Updating Wallet... </span>
<span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
<span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span>
@ -54,7 +55,13 @@
<div class="oh" ng-show="!index.noFocusedWallet">
<div id="walletHome" class="walletHome tab-view tab-in">
<!--
WalletHome
-->
<div id="walletHome" class="walletHome tab-view tab-in">
<div class="oh">
<div class="amount" ng-style="{'background-color':index.backgroundColor}">
<div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
@ -149,14 +156,15 @@
</div>
</div>
</div>
</div>
<div class="extra-margin-bottom"></div>
</div> <!-- END WalletHome -->
<!--
<!--
receive
-->
<div id="receive" class="receive tab-view">
-->
<div id="receive" class="receive tab-view">
<div ng-show="index.needsBackup && !home.skipBackup" class="p60t row text-center">
<div class="text-warning text-bold m15b">
@ -205,7 +213,7 @@
<h4 ng-class="{'enable_text_select': !index.isCordova}" class="size-12">
{{home.generatingAddress ? '...' : home.addr}}
</h4>
</h4>
</div>
</div>
</div>
@ -231,16 +239,16 @@
</div>
</div>
</div>
</div>
<div class="extra-margin-bottom"></div>
</div> <!-- END Receive -->
<!--
<!--
send
-->
<div id="send" class="send tab-view">
<div id="send" class="send tab-view">
<div ng-show="index.lockedBalance">
<h4 class="title m0">
<div class="left">
@ -345,7 +353,7 @@
</label>
<div class="input">
<textarea id="comment" ng-disabled="home.blockUx" name="comment"
ng-maxlength="100" ng-model="_comment" ng-focus="home.formFocus('msg')"
ng-maxlength="500" ng-model="_comment" ng-focus="home.formFocus('msg')"
ng-blur="home.formFocus(false)"></textarea>
</div>
</div>
@ -366,15 +374,15 @@
</form>
</div>
</div>
<!-- end of row -->
</div>
<div class="extra-margin-bottom"></div>
</div> <!-- END Send -->
<!--
<!--
history
history
-->
<div id="history" class="history tab-view">
-->
<div id="history" class="history tab-view">
<div class="row m20t" ng-show="!index.txHistory[0] && !index.updatingTxHistory">
<div class="large-12 columns">
<div class="oh text-center">
@ -385,7 +393,6 @@ history
<span ng-if="!index.txHistoryError" translate>
No transactions yet
</span>
</span>
</div>
</div>
</div>
@ -436,9 +443,8 @@ history
</div>
</div>
</div>
<div class="extra-margin-bottom"></div>
</div> <!-- END History -->
</div>
</div>
</div>
<div class="extra-margin-bottom"></div>

120
src/css/mobile.css
View file

@ -80,7 +80,7 @@ _:-ms-fullscreen, :root .main {
@-moz-document url-prefix() {
.extra-margin-bottom {
display: block;
height: 75px;
height: 45px;
overflow: hidden;
clear: both;
}
@ -359,7 +359,7 @@ ul.off-canvas-list li a:hover {
background: none;
}
a, button, .button, input, textarea, select, .reveal-modal {
a, button, .button, input, textarea, select {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
@ -555,23 +555,17 @@ a.pin-button:active {
padding: 0;
border: none;
border-radius: 0;
top: 0;
height: 100%;
overflow: auto;
overflow-y: auto;
padding-bottom: 20px;
}
.modal.fade .modal-dialog,
.modal.in .modal-dialog,
.reveal-modal-bg,
.reveal-modal-bg .fade .in,
.reveal-modal,
.reveal-modal .fade,
.reveal-modal .fade .out,
.reveal-modal .fade .in,
.reveal-modal.fade.full.in,
.reveal-modal.fade.full.out,
.reveal-modal.fade.full,
.reveal-modal.animated.fadeOutUp,
.reveal-modal.animated.slideInUp,
.reveal-modal.animated.slideInDown {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
}
input[type="color"],
input[type="date"],
input[type="datetime-local"],
@ -691,7 +685,7 @@ textarea:focus
color: #B7C2CD;
}
.animation-left, .animation-right {
.animation-slide {
position: absolute;
background: #fff;
display: block;
@ -704,52 +698,80 @@ textarea:focus
transform: translate3d(0, 0, 0);
}
.animation-left.ng-enter, .animation-left.ng-leave,
.animation-right.ng-enter, .animation-right.ng-leave {
-webkit-transition: all ease 300ms;
transition: all ease 300ms;
.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.01s;
transition-delay: 0.01s;
opacity: 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.01s;
transition-delay: 0.01s;
opacity: 0;
}
.animation-left.ng-enter.ng-enter-active,
.animation-right.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
visibility: hidden;
}
.animation-left.ng-leave,
.animation-right.ng-leave {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 0;
.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.01s;
transition-delay: 0.01s;
opacity: 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.01s;
transition-delay: 0.01s;
opacity: 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 {
@ -760,7 +782,7 @@ textarea:focus
top: 46px;
bottom: 37px;
overflow: auto;
padding-bottom: 20px;
padding-bottom: 40px;
}
.tab-in {
@ -773,6 +795,14 @@ textarea:focus
transform: translate3d(-100%, 0, 0) !important;
}
.animated.slideInRight,
.animated.slideInLeft,
.animated.slideInUp,
.animated.slideInDown {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
}
/* removes 300ms in IE */
-ms-touch-action: manipulation; /* IE10 /
touch-action: manipulation; /* IE11+ */

1
src/js/app.js
View file

@ -6,7 +6,6 @@ var modules = [
'mm.foundation',
'monospaced.qrcode',
'gettext',
'ngAnimate',
'ngLodash',
'uiSwitch',
'bwcModule',

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

@ -652,19 +652,28 @@ angular.module('copayApp.controllers').controller('indexController', function($r
$rootScope.$on('Animation/Disable', function(event) {
$timeout(function() {
self.swipeLeft = false;
self.swipeRight = false;
}, 370);
self.slideLeft = false;
self.slideRight = false;
self.slideUp = false;
self.slideDown = false;
}, 400);
});
$rootScope.$on('Animation/SwipeLeft', function(event) {
self.swipeLeft = true;
$rootScope.$on('Animation/SlideLeft', function(event) {
self.slideLeft = true;
});
$rootScope.$on('Animation/SwipeRight', function(event) {
self.swipeRight = true;
$rootScope.$on('Animation/SlideRight', function(event) {
self.slideRight = true;
});
$rootScope.$on('Animation/SlideUp', function(event) {
self.slideUp = true;
});
$rootScope.$on('Animation/SlideDown', function(event) {
self.slideDown = true;
});
$rootScope.$on('NewIncomingTx', function() {
self.updateBalance();

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

@ -91,6 +91,7 @@ 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;
@ -99,15 +100,19 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$modalInstance.dismiss('cancel');
};
};
$modal.open({
animation: false,
var modalInstance = $modal.open({
templateUrl: 'views/modals/copayers.html',
windowClass: 'full',
windowClass: 'full animated slideInUp',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
});
};
$scope.openTxModal = function(tx, copayers) {
this.openTxpModal = function(tx, copayers) {
var fc = profileService.focusedClient;
var ModalInstanceCtrl = function($scope, $modalInstance) {
$scope.error = null;
@ -277,12 +282,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
};
var modalInstance = $modal.open({
animation: false,
templateUrl: 'views/modals/txp-details.html',
windowClass: 'full',
windowClass: 'full animated slideInUp',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
});
modalInstance.result.then(function(txp) {
$scope.$emit('Local/TxProposalAction');
if (txp) {
@ -675,11 +684,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
$modalInstance.dismiss('cancel');
};
};
$modal.open({
var modalInstance = $modal.open({
templateUrl: 'views/modals/paypro.html',
windowClass: 'full',
windowClass: 'full animated slideInUp',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
});
};
this.setFromPayPro = function(uri) {
@ -829,12 +843,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
};
};
$modal.open({
animation: false,
var modalInstance = $modal.open({
templateUrl: 'views/modals/tx-details.html',
windowClass: 'full',
windowClass: 'full animated slideInUp',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('slideOutDown');
});
};
this.hasAction = function(actions, action) {

23
src/js/routes.js
View file

@ -16,11 +16,9 @@ if (window && window.navigator) {
//Setting up route
angular
.module('copayApp')
.config(function(historicLogProvider, $provide, $logProvider, $stateProvider, $urlRouterProvider, $animateProvider) {
.config(function(historicLogProvider, $provide, $logProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
$logProvider.debugEnabled(true);
$provide.decorator('$log', ['$delegate',
function($delegate) {
@ -506,7 +504,7 @@ angular
receive: 0,
send: 0,
history: 0,
preferences: 0,
preferences: 11,
preferencesColor: 12,
backup: 12,
preferencesAdvanced: 12,
@ -517,7 +515,7 @@ angular
preferencesBwsUrl: 12,
about: 12,
logs: 13,
add: 0,
add: 11,
create: 12,
join: 12,
import: 12,
@ -530,10 +528,21 @@ angular
});
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (pageWeight[fromState.name] > pageWeight[toState.name]) {
$rootScope.$emit('Animation/SwipeRight');
if (pageWeight[fromState.name] == 11) {
$rootScope.$emit('Animation/SlideDown');
}
else {
$rootScope.$emit('Animation/SlideRight');
}
} else if (pageWeight[fromState.name] < pageWeight[toState.name]) {
$rootScope.$emit('Animation/SwipeLeft');
if (pageWeight[toState.name] < 12) {
$rootScope.$emit('Animation/SlideUp');
}
else {
$rootScope.$emit('Animation/SlideLeft');
}
}
if (!profileService.profile && toState.needProfile) {

9
src/js/services/txStatus.js
View file

@ -35,11 +35,16 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
};
if (cb) $timeout(cb, 100);
};
$modal.open({
var modalInstance = $modal.open({
templateUrl: 'views/modals/tx-status.html',
windowClass: 'full popup-tx-status',
windowClass: 'full popup-tx-status closeModalAnimation',
controller: ModalInstanceCtrl,
});
modalInstance.result.finally(function() {
var m = angular.element(document.getElementsByClassName('reveal-modal'));
m.addClass('animated fadeOutUp');
});
};
return root;