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

Merge pull request #426 from msalcala11/sendStyling

Browse source 
Send view styling and wallet switcher
This commit is contained in:
Matias Alejo Garcia 2016-10-13 10:45:22 -03:00 • committed by GitHub
commit 89d207d364
14 changed files with 359 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

18
www/img/icon-back-arrow.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>controls-ico-back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Header/Controls/Back-(Dark)" transform="translate(-20.000000, -35.000000)" stroke-width="2" stroke="#4D4D4D">
<g id="controls-ico-back" transform="translate(21.000000, 36.000000)">
<g id="Icons/Back-Arrow/Light">
<g id="Back-arrow-(White)">
<path d="M12.1129878,12.8087726 L19.6825617,6.27049696 M11.9604103,0.0270404646 L19.7044837,6.19072819 M0.25515308,6.21111111 L19.5439223,6.21111111" id="Line" transform="translate(9.979818, 6.417907) scale(-1, 1) translate(-9.979818, -6.417907) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

24
www/img/icon-check-selected.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="17px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>Icons/Check/Green</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Views/Select-Wallet" transform="translate(-325.000000, -344.000000)" stroke="#12E5B6">
<g id="Componets/Select-Wallet">
<g id="Items/Activity-Cards/Recent-Activity" transform="translate(15.000000, 256.000000)">
<g id="Group-3" transform="translate(0.000000, 60.000000)">
<g id="Icons/Check/Green" transform="translate(311.000000, 29.000000)">
<g id="ui-24px-outline-1_check">
<g id="Group" transform="translate(0.500000, 0.500000)" stroke-width="2">
<polyline id="Shape" points="0 7 7 14 17.5 0"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

110
www/views/confirm.html
View file

@ -7,62 +7,55 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content ng-class="{'slide-to-pay': isCordova}">
<div class="list card">
<div class="item item-text-wrap">
<i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
<div class="text-bold size-28 m15t">{{amountStr}} </div>
<div class="text-light size-20 m5t">{{alternativeAmountStr}} </div>
</div>
</div>
<div class="list card">
<div class="item">Fee: {{feeLevel}}
<span class="item-note">
{{fee || '...'}}
</span>
</div>
<div class="item item-icon-left">
<i ng-if="isWallet" class="icon ion-briefcase size-21"></i>
<div ng-if="!isWallet">
<gravatar ng-if="!isCard" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
<i ng-if="isCard" class="icon big-icon-svg">
<div class="bg icon-bitpay-card"></div>
</i>
<ion-content ng-class="{'slide-to-pay': !hasClick && !insuffientFunds}">
<div class="list">
<div class="item head">
<div class="sending-label">
<img src="img/sending-icon.svg">
<span translate>Sending</span>
</div>
<div ng-class="{'m10l':isCard}">
<span translate>To</span>: {{toAddress}}
<p ng-show="toName">{{toName}}</p>
<div ng-show="_paypro" ng-click="openPPModal(_paypro)">
<i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
<i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
{{_paypro.domain}}
<div class="amount-label">
<div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
<div class="alternative">{{alternativeAmountStr}}</div>
</div>
</div>
<div class="info">
<div class="item">
<span class="label" translate>To</span>
<span class="payment-proposal-to" copy-to-clipboard="toAddress">
<img src="img/icon-bitcoin-small.svg">
<contact class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
<!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
<span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
</span>
</div>
<div class="text-center" ng-show="insuffientFunds">
<span class="badge badge-energized" translate>Insufficient funds</span>
</div>
<a class="item item-icon-right" ng-hide="insuffientFunds" ng-click="showWalletSelector()">
<span class="label" translate>From</span>
<div class="wallet">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
</i>
<div>{{wallet.name}}</div>
</div>
</div>
</div>
</div>
<div class="text-center" ng-show="noMatchingWallet">
<span class="badge badge-assertive" translate>No appropiate wallet to make this payment</span>
</div>
<div class="text-center" ng-show="insuffientFunds">
<span class="badge badge-assertive" translate>Insufficient funds</span>
</div>
<wallets ng-if="wallets[0]" wallets="wallets"></wallets>
<div ng-show="wallets[0]" class="list card">
<div class="item item-icon-left item-icon-right" ng-click="showDescriptionPopup()">
<i class="icon ion-ios-chatbubble-outline size-21"></i>
<span ng-show="!description" translate>Add description</span>
<span ng-show="description">{{description}}</span>
<i ng-show="!description" class="icon ion-ios-plus-empty size-21"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item single-line item-icon-right" ng-hide="insuffientFunds">
<span class="label" translate>{{'Add Memo'|translate}}</span>
<span class="item-note">
{{description}}
</span>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item single-line item-icon-right" ng-hide="insuffientFunds">
<span class="label" translate>Fee</span>
<span class="item-note">
{{fee}}
</span>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</div>
<click-to-accept
@ -86,4 +79,13 @@
<span ng-hide="wallet.m > 1">Payment Sent</span>
<span ng-show="wallet.m > 1">Proposal Created</span>
</slide-to-accept-success>
<wallet-selector
wallet-selector-wallets="wallets"
wallet-selector-selected-wallet="wallet"
wallet-selector-show="showWallets"
wallet-selector-on-select="onWalletSelect"
>
</wallet-selector>
</ion-view>

10
www/views/includes/actionSheet.html Normal file
View file

@ -0,0 +1,10 @@
<div
class="bp-action-sheet__backdrop"
ng-class="{'fade-in': show}"
ng-click="hide()">
</div>
<div class="bp-action-sheet__sheet" ng-class="{'slide-up': show}">
<img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
<div class="header">Send from</div>
<ng-transclude></ng-transclude>
</div>

30
www/views/includes/walletSelector.html Normal file
View file

@ -0,0 +1,30 @@
<action-sheet action-sheet-show="show" class="wallet-selector">
<a
ng-repeat="w in wallets track by $index"
class="item item-icon-left item-big-icon-left item-icon-right wallet"
ng-click="selectWallet(w)"
>
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
</i>
<div class="wallet-inner">
<div class="wallet-details">
<div class="wallet-name">
{{w.name}}
</div>
<p class="wallet-balance">
<span ng-if="!w.isComplete()" class="assertive" translate>
Incomplete
</span>
<span ng-if="w.isComplete()">
<span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
<span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
</span>
</span>
&nbsp;
</p>
</div>
<img class="check" src="img/icon-check-selected.svg" ng-show="selectedWallet === w">
</div>
</a>
</action-sheet>