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

ion refresher, ion infinite scroll and balance collapse

Browse source
This commit is contained in:
Gabriel Bazán 2016-05-17 11:10:16 -03:00 • committed by Javier
commit dae55abceb
9 changed files with 213 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

20
public/views/backup.html
View file

@ -19,7 +19,7 @@
</section>
</nav>
<div class="content preferences">
<div class="content preferences text-center">
<div class="box-notification" ng-show="wordsC.error">
<span class="text-warning">
{{wordsC.error|translate}}
@ -37,21 +37,21 @@
<span translate>
To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
</span>:
<ol class="m10t columns size-14 text-gray">
<li translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
<li translate><b>OR</b> the wallet recovery phrase of <b>all</b> copayers in the wallet</li>
<li translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet recovery phrases (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet recovery phrases of any of the other copayers).</li>
</ol>
<div class="m10t columns size-14 text-gray">
<span translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</span>
<span translate><b>OR</b> the wallet recovery phrase of <b>all</b> copayers in the wallet</span>
<span translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet recovery phrases (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet recovery phrases of any of the other copayers).</span>
</div>
</span>
</div>
<div class="size-14 text-gray columns" ng-show="(index.n>1 && index.m == index.n )">
<span translate>
To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
</span>:
<ol class="m10t columns size-14 text-gray">
<li translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
<li translate><b>OR</b> the wallet recovery phrases of <b>all</b> copayers in the wallet</li>
</ol>
<div class="m10t columns size-14 text-gray">
<span translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</span>
<span translate><b>OR</b> the wallet recovery phrases of <b>all</b> copayers in the wallet</span>
</div>
</span>
</div>
</div>

4
public/views/includes/menu.html
View file

@ -1,6 +1,6 @@
<div class="bottom-bar row collapse" ng-show="!index.notAuthorized">
<div class="bottom-bar row collapse p0i" ng-show="!index.notAuthorized">
<div>
<div class="row collapse">
<div class="row collapse p0i">
<div class="medium-4 small-4 columns text-center bottombar-item"
ng-repeat="item in index.menu">
<span ng-include="'views/includes/menu-item.html'"></span>

1
public/views/includes/walletInfo.html
View file

@ -18,3 +18,4 @@ src="img/icon-ledger-white.svg">
<img style="height:0.6em" class="animated flash infinite" ng-show="index.loadingWallet ||
index.updatingTxHistory" src="img/icon-sync-white.svg">
<span class="size-12">{{index.txHistory.length + '/' + index.completeHistory.length}}</span>

6
public/views/modals/searchTransactions.html
View file

@ -1,9 +1,9 @@
<ion-modal-view>
<ion-header-bar>
<h1 class="title" translate>Search Transactions</h1>
<ion-header-bar align-title="center" class="bar-stable">
<a class="m5t" ng-click="modal.hide(); index.cancelSearch()">
<span class="text-close">{{'Close'|translate}}</span>
</a>
<h1 class="title" translate>Search Transactions</h1>
</ion-header-bar>
<ion-content>
@ -65,4 +65,4 @@
</div>
</div>
</ion-content>
</ion-modal-view>
</ion-modal-view>

331
public/views/walletHome.html
View file

@ -71,9 +71,14 @@
-->
<div id="walletHome" class="walletHome tab-view tab-in">
<div class="oh pr" ng-show="!index.isSearching">
<div class="amount" ng-style="{'background-color':index.backgroundColor}">
<ion-content id="walletHome" class="walletHome tab-view tab-in" scroll="false">
<ion-content>
<ion-refresher
pulling-icon="ion-ios-refresh"
on-refresh="index.updateAll({triggerTxUpdate: true})">
</ion-refresher>
<div class="oh pr">
<div ng-style="{'background-color':index.backgroundColor}" ng-class="{amount: !shouldCollapse, amountcollapsed: shouldCollapse}">
<div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
<div class="m15t" ng-show="index.updateError" ng-click='index.updateAll({triggerTxUpdate: true})'>
<span class="size-12 db m10b">{{index.updateError|translate}}</span>
@ -86,11 +91,9 @@
</div>
<div ng-click='index.updateAll({triggerTxUpdate: true})' ng-show="!index.updateError && index.walletScanStatus != 'error' && !index.shouldHideBalance" on-hold="index.onHold()">
<strong class="size-36">{{index.totalBalanceStr}}</strong>
<div class="size-14"
ng-if="index.totalBalanceAlternative">
{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}
</div>
<strong class="size-36" ng-if="!shouldCollapse">{{index.totalBalanceStr}}</strong>
<strong class="size-24" ng-if="shouldCollapse">{{index.totalBalanceStr}}</strong>
<div class="size-14" ng-if="index.totalBalanceAlternative && !shouldCollapse">{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}</div>
<div class="size-14"
ng-if="index.pendingAmount">
<span translate>Pending Confirmation</span>:
@ -100,7 +103,7 @@
</div>
<div ng-show="index.shouldHideBalance" on-hold="index.onHold()">
<strong class="size-24" translate>[Balance Hidden]</strong>
<div class="size-14" transalate>
<div class="size-14" ng-if="!shouldCollapse" transalate>
Tap and hold to show
</div>
</div>
@ -113,190 +116,182 @@
</div>
</div> <!-- amount -->
<div class="wallet-info">
<div ng-class="{walletinfo: !shouldCollapse, walletinfocollapsed: shouldCollapse}">
<span ng-include="'views/includes/walletInfo.html'"></span>
</div>
<div class="camera-icon" ng-show="index.isComplete">
<div class="camera-icon" ng-show="index.isComplete" ng-if="!shouldCollapse">
<qr-scanner on-scan="home.onQrCodeScanned(data)"></qr-scanner>
</div>
</div> <!-- oh -->
</ion-content>
<div class="oh pr m20t" ng-show="index.incorrectDerivation">
<div class="text-center text-warning">
<i class="fi-alert"></i>
<span translate>
WARNING: Key derivation is not working on this device/wallet. Actions cannot be performed on this wallet.
</span>
</div>
</div>
<ion-content overflow-scroll="true" ng-class="{m150t: !shouldCollapse, m50t: shouldCollapse}" delegate-handle="transactions" on-scroll="getScrollPosition()">
<div class="m50b">
<div class="oh pr m20t" ng-show="index.incorrectDerivation">
<div class="text-center text-warning">
<i class="fi-alert"></i>
<span translate>
WARNING: Key derivation is not working on this device/wallet. Actions cannot be performed on this wallet.
</span>
</div>
</div>
<div class="oh pr m20t" ng-show="index.notAuthorized && !index.anyOnGoingProcess">
<div class="text-center text-warning">
<i class="fi-alert"></i>
<span translate>
WARNING: Wallet not registered
</span>
</div>
<div class="text-center text-gray m15r m15l" translate>
This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
</div>
<div class="text-center m10t ">
<span class="button outline round dark-gray tiny"
ng-click="index.recreate()">
<span translate>Recreate</span>
</span>
</div>
</div>
<div class="oh pr m20t" ng-show="index.notAuthorized && ! index.anyOnGoingProcess">
<div class="text-center text-warning">
<i class="fi-alert"></i>
<span translate>
WARNING: Wallet not registered
</span>
</div>
<div class="text-center text-gray m15r m15l" translate>
This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
</div>
<div class="text-center m10t ">
<span class="button outline round dark-gray tiny"
ng-click="index.recreate()">
<span translate>Recreate</span>
</span>
</div>
</div>
<div class="release size-12" ng-show="newRelease" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/releases/latest')">
<span>{{newRelease}}</span><i class="icon-arrow-right3 right size-18"></i>
</div>
<div class="release size-12" ng-show="newRelease && !index.isSearching" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/releases/latest')">
<span>{{newRelease}}</span><i class="icon-arrow-right3 right size-18"></i>
</div>
<div class="oh pr" ng-if="index.txps[0]" ng-show="!index.isSearching">
<h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
<h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
<div class="last-transactions pr" ng-repeat="tx in index.txps">
<div ng-include="index.txTemplateUrl"></div>
</div>
<div class="text-gray text-center size-12 p10t"
ng-show="index.lockedBalanceSat">
<span translate>Total Locked Balance</span>:
<b>{{index.lockedBalanceStr}} </b>
<span> {{index.lockedBalanceAlternative}}
{{index.alternativeIsoCode}} </span>
</div>
</div>
<!-- Activity -->
<div
class="oh pr m20t text-gray size-12 text-center"
ng-show="!index.loadingWallet && !index.txHistory[0] && !index.updatingTxHistory && !index.txHistoryError && !index.updateError" translate>
No transactions yet
</div>
<div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
<h4 class="title" ng-click="index.startSearch(); openModal()">
<span translate>Activity</span>
<i class="dib m5l size-16 pointer fi-magnifying-glass"></i>
</h4>
<div ng-show="index.updatingTxHistory && index.txProgress > 5">
<div class="row p20 text-center">
<div class="columns large-12 medium-12 small-12 m10b">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<div class="oh pr" ng-if="index.txps[0]">
<h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
<h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
<div ng-repeat="tx in index.txps">
<div ng-include="index.txTemplateUrl">
</div>
</div>
<div class="size-12 text-gray m20t">
<div translate>{{index.txProgress}} transactions downloaded</div>
<div translate>Updating transaction history. Please stand by.</div>
<div class="text-gray text-center size-12 p10t"
ng-show="index.lockedBalanceSat">
<span translate>Total Locked Balance</span>:
<b>{{index.lockedBalanceStr}} </b>
<span> {{index.lockedBalanceAlternative}}
{{index.alternativeIsoCode}} </span>
</div>
</div>
</div>
<div ng-if="index.txHistory[0] && index.updatingTxHistory && index.newTx" class="row collapse last-transactions-content animated fadeInDown">
<div class="large-6 medium-6 small-6 columns size-14">
<div class="m10r left">
<img src="img/icon-new.svg" width="40">
</div>
<div class="m10t" style="background:#eee; width: 8em; margin-left: 52px; line-height:0.6em">
<span>&nbsp;</span>
</div>
<div style="margin-top:5px; background:#eee; width: 6em; margin-left: 52px; line-height:0.6em">
<span>&nbsp;</span>
</div>
<!-- Activity -->
<h4 class="title" ng-click="index.startSearch(); openModal()">
<span translate>Activity</span>
<i class="dib m5l size-16 pointer fi-magnifying-glass"></i>
</h4>
<div
class="oh pr m20t text-gray size-12 text-center"
ng-show="!index.loadingWallet && !index.txHistory[0] && !index.updatingTxHistory && !index.txHistoryError && !index.updateError" translate>
No transactions yet
</div>
</div>
<div class="row"></div>
<div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
<div ng-repeat="btx in index.txHistory track by btx.txid"
ng-click="home.openTxModal(btx)"
class="row collapse last-transactions-content">
<div class="large-6 medium-6 small-6 columns size-14">
<div class="m10r left">
<img src="img/icon-receive-history.svg" alt="sync" width="40" ng-show="btx.action == 'received'">
<img src="img/icon-sent-history.svg" alt="sync" width="40" ng-show="btx.action == 'sent'">
<img src="img/icon-moved.svg" alt="sync" width="40" ng-show="btx.action == 'moved'">
<div ng-show="index.updatingTxHistory && index.txProgress > 5">
<div class="row p20 text-center">
<div class="columns large-12 medium-12 small-12 m10b">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div class="size-12 text-gray m20t">
<div translate>{{index.txProgress}} transactions downloaded</div>
<div translate>Updating transaction history. Please stand by.</div>
</div>
</div>
</div>
<div class="m10t">
<span ng-show="btx.action == 'received'" translate>Received</span>
<span ng-show="btx.action == 'sent'">
{{index.addressbook[btx.addressTo]}}
<span ng-show="!index.addressbook[btx.addressTo] && btx.message">
<span class="ellipsis">{{btx.message}}</span>
<div ng-if="index.txHistory[0] && index.updatingTxHistory && index.newTx" class="row collapse last-transactions-content animated fadeInDown">
<div class="large-6 medium-6 small-6 columns size-14">
<div class="m10r left">
<img src="img/icon-new.svg" width="40">
</div>
<div class="m10t" style="background:#eee; width: 8em; margin-left: 52px; line-height:0.6em">
<span>&nbsp;</span>
</div>
<div style="margin-top:5px; background:#eee; width: 6em; margin-left: 52px; line-height:0.6em">
<span>&nbsp;</span>
</div>
</div>
</div>
<div ng-repeat="btx in index.txHistory track by btx.txid"
ng-click="home.openTxModal(btx)"
class="row collapse last-transactions-content">
<div class="large-6 medium-6 small-6 columns size-14">
<div class="m10r left">
<img src="img/icon-receive-history.svg" alt="sync" width="40" ng-show="btx.action == 'received'">
<img src="img/icon-sent-history.svg" alt="sync" width="40" ng-show="btx.action == 'sent'">
<img src="img/icon-moved.svg" alt="sync" width="40" ng-show="btx.action == 'moved'">
</div>
<div class="m10t">
<span ng-show="btx.action == 'received'" translate>Received</span>
<span ng-show="btx.action == 'sent'">
{{index.addressbook[btx.addressTo]}}
<span ng-show="!index.addressbook[btx.addressTo] && btx.message">
<span class="ellipsis">{{btx.message}}</span>
</span>
<span ng-show="!index.addressbook[btx.addressTo] && !btx.message">
<span translate> Sent</span>
</span>
</span>
<span ng-show="btx.action == 'moved'" translate>Moved</span>
<span class="label tu warning radius" ng-show="btx.action == 'invalid'" translate>Invalid</span>
</div>
</div>
<div class="large-5 medium-5 small-5 columns text-right" >
<span class="size-16" ng-class="{'text-bold': btx.recent}">
<span ng-if="btx.action == 'received'">+</span>
<span ng-if="btx.action == 'sent'">-</span>
<span class="size-12" ng-if="btx.action == 'invalid'" translate>
(possible double spend)
</span>
<span ng-if="btx.action != 'invalid'">
{{btx.amountStr}}
</span>
</span>
<span ng-show="!index.addressbook[btx.addressTo] && !btx.message">
<span translate> Sent</span>
</span>
</span>
<span ng-show="btx.action == 'moved'" translate>Moved</span>
<span class="label tu warning radius" ng-show="btx.action == 'invalid'" translate>Invalid</span>
<div class="size-12 text-gray">
<time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
<span translate class="text-warning"
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
Unconfirmed
</span>
</div>
</div>
<div class="large-1 medium-1 small-1 columns text-right m10t">
<i class="icon-arrow-right3 size-18"></i>
</div>
</div>
</div>
<div class="large-5 medium-5 small-5 columns text-right" >
<span class="size-16" ng-class="{'text-bold': btx.recent}">
<span ng-if="btx.action == 'received'">+</span>
<span ng-if="btx.action == 'sent'">-</span>
<span class="size-12" ng-if="btx.action == 'invalid'" translate>
(possible double spend)
</span>
<span ng-if="btx.action != 'invalid'">
{{btx.amountStr}}
</span>
</span>
<div class="size-12 text-gray">
<time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
<span translate class="text-warning"
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
Unconfirmed
</span>
<div class="row m20t text-center" ng-show="index.historyRendering && !index.ching">
<div class="columns large-12 medium-12 small-12">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
</div>
<div class="large-1 medium-1 small-1 columns text-right m10t">
<i class="icon-arrow-right3 size-18"></i>
<ion-infinite-scroll
ng-if="index.historyShowMore"
on-infinite="index.showMore()"
distance="1%">
</ion-infinite-scroll>
</div>
</div>
<div class="row m20t text-center" ng-show="index.historyRendering && !index.isSearching">
<div class="columns large-12 medium-12 small-12">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div class="m20t text-center">
<a class="text-gray size-12"
ng-show="index.historyShowMore"
ng-click="index.showMore()">
<span translate>Show more</span>
<span ng-if="!index.isSearching">
({{index.completeHistory.length - index.txHistory.length}})
</span>
<span ng-if="index.isSearching">
({{index.result.length - index.txHistorySearchResults.length}})
</span>
<i class="icon-arrow-down4"></i>
</a>
</div>
</div>
</ion-content>
<div class="extra-margin-bottom"></div>
</div> <!-- END WalletHome -->
</ion-content> <!-- END WalletHome -->
<!--

1
src/css/ionic-migration.css
View file

@ -14,7 +14,6 @@
.row {
display: inherit;
padding: 0;
}
button, .button {

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

@ -16,7 +16,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
ret.isWindowsPhoneApp = platformInfo.isWP;
ret.onGoingProcess = {};
ret.historyShowLimit = 10;
ret.historyShowMoreLimit = 100;
ret.historyShowMoreLimit = 10;
ret.isSearching = false;
ret.prevState = 'walletHome';
@ -322,6 +322,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
};
self.updateAll = function(opts, initStatusHash, tries) {
$scope.$broadcast('scroll.refreshComplete');
tries = tries || 0;
opts = opts || {};
var fc = profileService.focusedClient;
@ -985,6 +986,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
self.historyShowMore = false;
}
self.nextTxHistory += self.historyShowMoreLimit;
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 100);
};

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

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $interval, $timeout, $filter, $modal, $log, $ionicModal, notification, txStatus, profileService, lodash, configService, rateService, storageService, bitcore, gettext, gettextCatalog, platformInfo, addressService, ledger, bwsError, confirmDialog, txFormatService, animationService, addressbookService, go, feeService, walletService, fingerprintService, nodeWebkit) {
angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $ionicScrollDelegate, $rootScope, $interval, $timeout, $filter, $modal, $log, $ionicModal, notification, txStatus, profileService, lodash, configService, rateService, storageService, bitcore, gettext, gettextCatalog, platformInfo, addressService, ledger, bwsError, confirmDialog, txFormatService, animationService, addressbookService, go, feeService, walletService, fingerprintService, nodeWebkit) {
var isCordova = platformInfo.isCordova;
var isWP = platformInfo.isWP;
@ -32,6 +32,13 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
ret.sendMaxInfo = {};
var vanillaScope = ret;
$scope.getScrollPosition = function() {
$scope.shouldCollapse = $ionicScrollDelegate.$getByHandle('transactions').getScrollPosition().top > 50;
$timeout(function() {
$scope.$apply();
});
}
var disableScannerListener = $rootScope.$on('dataScanned', function(event, data) {
self.setForm(data);
$rootScope.$emit('Local/SetTab', 'send');

28
src/sass/main.scss
View file

@ -100,7 +100,7 @@ h4.title a {
}
.walletHome h4.title {
padding: 0 0 10px 15px;
padding: 20px 0 10px 15px;
margin: 5px 0 5px 0;
font-size: 16px;
}
@ -620,6 +620,14 @@ ul.manage li {
margin-top: 20px;
}
.m50t {
margin-top: 50px;
}
.m150t {
margin-top: 150px;
}
.m20tp {
margin-top: 20%;
}
@ -1575,6 +1583,13 @@ input.ng-invalid-match {
margin-bottom: 25px;
}
.amountcollapsed {
width: 100%;
text-align: center;
color: #fff;
height: 50px;
}
.alternative-amount {
height: 25px;
text-align: center;
@ -1615,7 +1630,7 @@ input.ng-invalid-match {
text-align: center;
border-radius: 5px;
}
.wallet-info {
.walletinfo {
position: absolute;
top: inherit;
left: 10px;
@ -1623,6 +1638,14 @@ input.ng-invalid-match {
font-size: 20px;
color: #fff;
}
.walletinfocollapsed {
position: absolute;
top: inherit;
left: 10px;
bottom: 0px;
font-size: 20px;
color: #fff;
}
}
.camera-icon a {
@ -2144,4 +2167,3 @@ body.modal-open {
color: #2C3E50;
}
}