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

prelim wallet details header collapse transition

Browse source
This commit is contained in:
Marty Alcala 2016-11-09 12:34:38 -05:00
commit c3ef412383
3 changed files with 83 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/js/controllers/walletDetails.js
View file

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, profileService, lodash, configService, gettextCatalog, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicHistory) {
angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, profileService, lodash, configService, gettextCatalog, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicHistory, $ionicScrollDelegate, $window) {
var HISTORY_SHOW_LIMIT = 10;
var currentTxHistoryPage = 0;
@ -230,6 +230,22 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
//$state.transitionTo('tabs.preferences.backupWarning');
};
$scope.amountHeight = '180px';
$scope.getScrollPosition = function(){
console.log($ionicScrollDelegate.getScrollPosition().top);
var pos = $ionicScrollDelegate.getScrollPosition().top;
var amountHeight = 180 - pos;
if(amountHeight < 80) {
amountHeight = 80;
}
console.log('amountHeight', amountHeight);
$window.requestAnimationFrame(function() {
$scope.amountHeight = amountHeight + 'px';
$scope.$evalAsync(angular.noop);
});
};
$scope.$on("$ionicView.beforeEnter", function(event, data) {
$scope.walletId = data.stateParams.walletId;

17
src/sass/views/walletDetails.scss
View file

@ -104,9 +104,16 @@
.nav-bar-block, .bar {
background-color: inherit !important;
}
ion-content {
margin-top: 180px;
padding-top: 0;
top: 0;
//top: 40px;
}
.amount-wrapper {
position: relative;
overflow: visible;
//margin-top: 40px;
.amount-bg {
content: '';
@ -120,10 +127,14 @@
.amount {
width: 100%;
text-align: center;
padding: 2rem 1rem 1.5rem 1rem;
//padding: 2rem 1rem 1.5rem 1rem;
color: #fff;
height: 140px;
height: 180px;
margin-bottom: 10px;
padding-top: 40px;
display: flex;
align-items: center;
justify-content: center;
&-alternative {
line-height: 36px;
@ -157,7 +168,7 @@
}
.wallet-not-backed-up-warning {
margin-top: -15px;
//margin-top: -15px;
margin-bottom: 1rem;
background: #E15061;
text-align: center;

56
www/views/walletDetails.html
View file

@ -10,14 +10,62 @@
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-style="{'background-color':wallet.color}">
<div class="amount-bg" ng-style="{'background-color':wallet.color}"></div>
<div ng-style="{'background-color':wallet.color, 'height': amountHeight}" class="amount">
<div ng-if="!notAuthorized && !updatingStatus">
<div ng-show="updateStatusError">
<a class="button button-outline button-light button-small" ng-click='update()' translate>Tap to retry</a>
</div>
<div ng-show="walletNotRegistered">
<span class="size-12 db m10b" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
<a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
</div>
<div ng-show="wallet.walletScanStatus == 'error'" ng-click='retryScan()'>
<span translate>Scan status finished with error</span>
<br><span translate>Tap to retry</span>
</div>
<div ng-click='updateAll(true)' ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden" on-hold="hideToggle()">
<strong ng-if="!status.pendingAmount" class="size-36">{{status.totalBalanceStr}}</strong>
<div ng-if="!status.pendingAmount" class="size-14 amount-alternative" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
<div class="size-20" ng-if="status.pendingAmount">
<div style="margin-bottom:.5rem"><span translate>Available</span>: {{status.totalBalanceStr}}</div>
<div><span translate>Confirming</span>: {{status.pendingAmountStr}}</div>
</div>
</div>
<div ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && wallet.balanceHidden" on-hold="hideToggle()">
<strong class="size-24" translate>[Balance Hidden]</strong>
<div class="size-14" translate>
Tap and hold to show
</div>
</div>
</div>
<div ng-if="updatingStatus">
<div class="size-36">
<strong>...</strong>
</div>
</div>
</div> <!-- amount -->
<div class="wallet-details-wallet-info">
<span ng-include="'views/includes/walletInfo.html'"></span>
</div>
</div> <!-- oh -->
<ion-content on-scroll="getScrollPosition()" ng-style="{'margin-top': amountHeight}">
<ion-refresher
ng-if="isAndroid"
pulling-icon="ion-ios-refresh"
spinner="ios-small"
on-refresh="onRefresh()">
</ion-refresher>
<div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-style="{'background-color':wallet.color}">
<!-- <div class="amount-wrapper" ng-show="wallet && wallet.isComplete()" ng-style="{'background-color':wallet.color}">
<div class="amount-bg" ng-style="{'background-color':wallet.color}"></div>
<div ng-style="{'background-color':wallet.color}" class="amount">
<div ng-if="!notAuthorized && !updatingStatus">
@ -58,12 +106,12 @@
<strong>...</strong>
</div>
</div>
</div> <!-- amount -->
</div>
<div class="wallet-details-wallet-info">
<span ng-include="'views/includes/walletInfo.html'"></span>
</div>
</div> <!-- oh -->
</div> -->
<a class="wallet-not-backed-up-warning" ng-show="!isBackedUp" ng-click="backup()">
Wallet not backed up
</a>