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

Merge pull request #1729 from cmgustavo/bug/06-ui

Browse source 
Bug/06 ui
This commit is contained in:
Matias Alejo Garcia 2014-11-05 19:43:55 -03:00
commit 8a13fb84f4
12 changed files with 293 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

7
css/src/main.css
View file

@ -630,7 +630,6 @@ a.button-setup {
width: 100%; width: 100%;
padding: 0.3rem 0.7rem; padding: 0.3rem 0.7rem;
color: white; color: white;
border-bottom: 1px solid #374756;
} }
.hidden { .hidden {
@ -808,6 +807,12 @@ input[type=number]::-webkit-outer-spin-button {
background-color: #1ABC9C; background-color: #1ABC9C;
} }
.addresses .label {
font-weight: normal;
padding: .2rem .3rem;
font-size: 8px;
}
.label.success { .label.success {
background-color: #1ABC9C; background-color: #1ABC9C;
} }

21
css/src/mobile.css
View file

@ -39,7 +39,7 @@
margin-top: 40px; margin-top: 40px;
margin-left: 0; margin-left: 0;
margin-bottom: -40px; margin-bottom: -40px;
padding: 20px 10px 60px 10px; padding: 20px 0 60px 0;
} }
.tab-bar { .tab-bar {
@ -116,8 +116,8 @@
color: white; color: white;
} }
.addresses .panel { .panel {
padding: 1rem 0.8rem; padding: 0.5rem;
} }
.btn-copy { .btn-copy {
@ -184,3 +184,18 @@
} }
@media (max-width: 640px) {
.tx-date {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.tx-comment {
border-top: 1px solid #eee;
padding-top: 10px;
margin-top: 10px;
}
}

3
js/models/Wallet.js
View file

@ -2823,7 +2823,7 @@ Wallet.prototype.getTransactionHistory = function(cb) {
return { return {
type: 'out', type: 'out',
address: addr ? addr : itemAddr, address: addr ? addr.addressStr : itemAddr,
isMine: !_.isUndefined(addr), isMine: !_.isUndefined(addr),
isChange: addr ? !!addr.isChange : false, isChange: addr ? !!addr.isChange : false,
label: self.addressBook[itemAddr] ? self.addressBook[itemAddr].label : undefined, label: self.addressBook[itemAddr] ? self.addressBook[itemAddr].label : undefined,
@ -2880,6 +2880,7 @@ Wallet.prototype.getTransactionHistory = function(cb) {
}); });
tx.comment = proposal ? proposal.comment : undefined; tx.comment = proposal ? proposal.comment : undefined;
tx.labelTo = firstOut ? firstOut.label : undefined; tx.labelTo = firstOut ? firstOut.label : undefined;
tx.addressTo = firstOut ? firstOut.address : undefined;
tx.amountSat = Math.abs(amount); tx.amountSat = Math.abs(amount);
tx.amount = tx.amountSat * satToUnit; tx.amount = tx.amountSat * satToUnit;
tx.sentTs = proposal ? proposal.sentTs : undefined; tx.sentTs = proposal ? proposal.sentTs : undefined;

11
views/create.html
View file

@ -4,11 +4,11 @@
<span translate>Creating wallet...</span> <span translate>Creating wallet...</span>
</div> </div>
<div class="setup" ng-show="!loading"> <div class="setup" ng-show="!loading">
<form name="setupForm" ng-submit="create(setupForm)" novalidate>
<h1 class="hide-for-large-up">{{$root.title}}</h1> <h1 class="hide-for-large-up">{{$root.title}}</h1>
<div class="large-12 columns panel"> <form name="setupForm" ng-submit="create(setupForm)" novalidate>
<div class="row collapse"> <div class="row">
<div class="large-12 columns">
<div class="panel">
<label><span translate>Wallet name</span> <label><span translate>Wallet name</span>
<input type="text" placeholder="{{'Family vacation funds'|translate}}" class="form-control" ng-model="walletName"> <input type="text" placeholder="{{'Family vacation funds'|translate}}" class="form-control" ng-model="walletName">
</label> </label>
@ -43,6 +43,8 @@
<span translate ng-hide="!hideAdv">Show</span> <span translate ng-hide="!hideAdv">Show</span>
<span translate ng-hide="hideAdv">Hide</span> <span translate ng-hide="hideAdv">Hide</span>
<span translate>advanced options</span> <span translate>advanced options</span>
<i ng-if="hideAdv" class="icon-arrow-down4"></i>
<i ng-if="!hideAdv" class="icon-arrow-up4"></i>
</a> </a>
</div> </div>
<div ng-hide="hideAdv" class="row"> <div ng-hide="hideAdv" class="row">
@ -67,6 +69,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>

10
views/errors/404.html
View file

@ -1,9 +1,11 @@
<div class="wide-page"> <div ng-init="$root.title = 'Page not found'"
ng-class="{'wide-page':!$root.wallet}">
<div class="text-center"> <div class="text-center">
<img src="img/logo-negative-beta.svg" alt="Copay"> <img ng-show="$root.wallet" src="img/logo.svg" alt="Copay">
<img ng-show="!$root.wallet" src="img/logo-negative.svg" alt="Copay">
</div> </div>
<h1 class="text-center text-white">404</h1> <h1 class="text-center" ng-class="{'text-white': !$root.wallet}">404</h1>
<h3 translate class="text-center text-white">Page not found</h3> <h3 translate class="text-center" ng-class="{'text-white': !$root.wallet}">Page not found</h3>
<p class="text-center"><a href="#!/">&laquo; <span translate>Back</span></a></p> <p class="text-center"><a href="#!/">&laquo; <span translate>Back</span></a></p>
</div> </div>

28
views/history.html
View file

@ -1,5 +1,6 @@
<div class="transactions" data-ng-controller="HistoryController" data-ng-init="update()"> <div class="transactions" data-ng-controller="HistoryController" data-ng-init="update()">
<div ng-show='$root.wallet.isReady()'> <div ng-show='$root.wallet.isReady()'>
<h1 class="hide-for-large-up">{{$root.title}}</h1>
<div ng-if="loading" class="m20b"> <div ng-if="loading" class="m20b">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> <i class="fi-bitcoin-circle icon-rotate spinner"></i>
<span translate>Loading...</span> <span translate>Loading...</span>
@ -15,20 +16,29 @@
<div class="panel oh" <div class="panel oh"
ng-repeat="btx in blockchain_txs | orderBy: 'time':true" ng-click="btx.showDetails = !btx.showDetails"> ng-repeat="btx in blockchain_txs | orderBy: 'time':true" ng-click="btx.showDetails = !btx.showDetails">
<div class="row size-14"> <div class="row size-14">
<div class="large-2 medium-3 small-12 columns"> <div class="large-2 medium-2 small-12 columns">
<span ng-hide="btx.ts">&nbsp;</span> <div class="tx-date">
<time ng-if="btx.ts">{{btx.ts | amCalendar}}</time> <time ng-if="btx.ts">{{btx.ts | amCalendar}}</time>
<span class="label alert" ng-show="!btx.ts && (!btx.confirmations || btx.confirmations == 0)"> <span class="label alert" ng-show="!btx.ts && (!btx.confirmations || btx.confirmations == 0)">
<span translate>Unconfirmed</span> <span translate>Unconfirmed</span>
</span> </span>
</div> </div>
</div>
<div class="large-2 medium-3 small-6 columns text-right"> <div class="large-2 medium-3 small-5 columns text-right">
<div ng-class="{ <div class="tx-amount" ng-class="{
'text-primary' : btx.action == 'received', 'text-primary' : btx.action == 'received',
'text-warning': btx.action == 'sent', 'text-warning': btx.action == 'sent',
'text-gray': btx.action == 'moved'}"> 'text-gray': btx.action == 'moved'}">
<b>{{btx.amount| noFractionNumber}} {{$root.wallet.settings.unitName}}</b> <b>{{btx.amount| noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
</div>
</div>
<div class="large-1 medium-1 small-2 columns text-center">
<div ng-class="{
'text-primary' : btx.action == 'received',
'text-warning': btx.action == 'sent',
'text-gray': btx.action == 'moved'}">
<i class="m15h" <i class="m15h"
ng-class="{ ng-class="{
'fi-arrow-left' : btx.action == 'received', 'fi-arrow-left' : btx.action == 'received',
@ -37,13 +47,13 @@
</div> </div>
</div> </div>
<div class="large-3 medium-3 small-6 columns text-gray"> <div class="large-3 medium-3 small-5 columns text-gray">
<span ng-hide="btx.labelTo">&nbsp;</span> <span class="ellipsis">{{btx.labelTo || btx.addressTo}}</span>
<span ng-show="btx.labelTo">{{btx.labelTo}}</span>
</div> </div>
<div class="large-4 medium-3 small-12 columns text-gray"> <div class="large-3 medium-3 small-12 columns text-gray">
<span ng-show="btx.comment"><i class="fi-comment-quotes"></i> {{btx.comment}} </span> <div class="tx-comment" ng-show="btx.comment">
<i class="fi-comment-quotes"></i> {{btx.comment}}</div>
</div> </div>
<div class="large-1 columns show-for-large-up text-gray text-right" ng-init="btx.showDetails = false"> <div class="large-1 columns show-for-large-up text-gray text-right" ng-init="btx.showDetails = false">

11
views/import.html
View file

@ -4,10 +4,11 @@
{{ importStatus|translate }} {{ importStatus|translate }}
</div> </div>
<div class="row" ng-show="!loading"> <div ng-show="!loading">
<div class="large-12 columns panel">
<h1 class="hide-for-large-up">{{$root.title}}</h1> <h1 class="hide-for-large-up">{{$root.title}}</h1>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<form name="importForm" ng-submit="import(importForm)" novalidate> <form name="importForm" ng-submit="import(importForm)" novalidate>
<div ng-show="!is_iOS && !backupOldWallet"> <div ng-show="!is_iOS && !backupOldWallet">
<legend for="backupFile" class="m10b"> <legend for="backupFile" class="m10b">
@ -49,6 +50,8 @@
<span translate ng-hide="!hideAdv">Show</span> <span translate ng-hide="!hideAdv">Show</span>
<span translate ng-hide="hideAdv">Hide</span> <span translate ng-hide="hideAdv">Hide</span>
<span translate>advanced options</span> <span translate>advanced options</span>
<i ng-if="hideAdv" class="icon-arrow-down4"></i>
<i ng-if="!hideAdv" class="icon-arrow-up4"></i>
</a> </a>
<div ng-hide="hideAdv" class="m10t"> <div ng-hide="hideAdv" class="m10t">
@ -85,4 +88,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>

2
views/includes/sidebar.html
View file

@ -31,7 +31,7 @@
</a> </a>
</div> </div>
</header> </header>
<div class="locked" ng-show="lockedBalance"> <div class="locked" ng-show="lockedBalance && !walletSelection">
<span class="text-gray"> <span class="text-gray">
<i class="fi-lock"></i> {{'Locked'|translate}} &nbsp; <i class="fi-lock"></i> {{'Locked'|translate}} &nbsp;
</span> </span>

9
views/join.html
View file

@ -6,10 +6,10 @@
<div ng-show="!loading"> <div ng-show="!loading">
<h1 class="hide-for-large-up">{{$root.title}}</h1> <h1 class="hide-for-large-up">{{$root.title}}</h1>
<div class="large-12 columns panel"> <div class="row">
<div class="row collapse"> <div class="large-12 columns">
<form name="joinForm" ng-submit="join(joinForm)" novalidate> <form name="joinForm" ng-submit="join(joinForm)" novalidate>
<div class="panel">
<label for="connectionId"><span translate>Wallet Secret</span> <label for="connectionId"><span translate>Wallet Secret</span>
<small translate class="has-error" ng-show="joinForm.connectionId.$invalid <small translate class="has-error" ng-show="joinForm.connectionId.$invalid
&& !joinForm.connectionId.$pristine">Wallet Secret is not valid!</small> && !joinForm.connectionId.$pristine">Wallet Secret is not valid!</small>
@ -60,6 +60,8 @@
<span translate ng-hide="!hideAdv">Show</span> <span translate ng-hide="!hideAdv">Show</span>
<span translate ng-hide="hideAdv">Hide</span> <span translate ng-hide="hideAdv">Hide</span>
<span translate>advanced options</span> <span translate>advanced options</span>
<i ng-if="hideAdv" class="icon-arrow-down4"></i>
<i ng-if="!hideAdv" class="icon-arrow-up4"></i>
</a> </a>
</div> </div>
<div ng-hide="hideAdv"> <div ng-hide="hideAdv">
@ -74,6 +76,7 @@
</a> </a>
<button translate type="submit" class="button secondary m0" ng-disabled="joinForm.$invalid">Join</button> <button translate type="submit" class="button secondary m0" ng-disabled="joinForm.$invalid">Join</button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>

20
views/manage.html
View file

@ -1,7 +1,6 @@
<div class="backup" ng-controller="ManageController"> <div class="backup" ng-controller="ManageController">
<h1 class="hide-for-large-up">{{$root.title}}</h1> <h1 class="hide-for-large-up">{{$root.title}}</h1>
<div class="row collapse"> <div class="row">
<div class="large-12 columns">
<div class="large-4 columns" > <div class="large-4 columns" >
<div class="panel text-center" ui-route="{{create}}"> <div class="panel text-center" ui-route="{{create}}">
<div><i class="size-72 fi-plus text-gray"></i></div> <div><i class="size-72 fi-plus text-gray"></i></div>
@ -24,21 +23,20 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="line-dashed-h m30v"></div>
<div class="large-12 columns line-dashed-h m30v"></div> <div class="row">
<div class="oh large-12 columns panel"> <div class="large-12 columns">
<h3><i class="fi-download m10r"></i> <span translate>Backup Profile</span> </h3> <div class="panel">
<p translate class="large-8 columns text-gray">It's important to backup your profile so that you can recover it in case of disaster. The backup will include all your profile's wallets</p> <h2><i class="fi-download m10r"></i> <span translate>Backup Profile</span></h2>
<div class="large-4 columns"> <p translate class="text-gray">It's important to backup your profile so that you can recover it in case of disaster. The backup will include all your profile's wallets</p>
<a translate class="button primary m0" ng-click="downloadBackup()" <a translate class="button primary m0" ng-click="downloadBackup()"
ng-show="!isSafari">Backup profile</a> ng-show="!isSafari">Backup profile</a>
<a translate class="button primary m0" ng-click="viewBackup()" <a translate class="button primary m0" ng-click="viewBackup()"
ng-show="isSafari && !hideViewBackup">View profile backup</a> ng-show="isSafari && !hideViewBackup">View profile backup</a>
</div>
<div ng-show="backupPlainText"> <div ng-show="backupPlainText">
<textarea readonly rows="5">{{backupPlainText}}</textarea> <textarea rows="5">{{backupPlainText}}</textarea>
<div class="show-for-large-up"> <div class="show-for-large-up">
<span translate class="size-12">Copy to clipboard</span> <span class="btn-copy" clip-copy="backupPlainText"> </span> <span translate class="size-12">Copy to clipboard</span> <span class="btn-copy" clip-copy="backupPlainText"> </span>
</div> </div>
@ -48,3 +46,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>

56
views/receive.html
View file

@ -1,15 +1,15 @@
<div class="addresses" ng-controller="ReceiveController"> <div class="addresses" ng-controller="ReceiveController">
<div ng-show='$root.wallet.isReady()'> <div ng-show='$root.wallet.isReady()'>
<h1 translate class="hide-for-large-up">Receive</h1> <h1 class="hide-for-large-up">{{$root.title}}</h1>
<div ng-show="!addresses[0]"> <div ng-show="!addresses[0]">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> <i class="fi-bitcoin-circle icon-rotate spinner"></i>
</div> </div>
<div class="large-12 medium-12" ng-if="!!(addresses|removeEmpty).length"> <div class="row">
<div class="large-12 medium-12"> <div class="large-12 columns" ng-if="!!(addresses|removeEmpty).length">
<div class="oh" ng-repeat="addr in addresses|removeEmpty|orderBy:'-index':true"> <div ng-repeat="addr in addresses|removeEmpty|orderBy:'-index':true">
<div class="panel radius show-for-large-up"> <div class="panel">
<div class="row collapse"> <div class="row show-for-large-up">
<div class="large-7 medium-9 column"> <div class="large-7 medium-9 columns">
<div class="list-addr"> <div class="list-addr">
<span> <span>
<contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right" /> <contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right" />
@ -18,44 +18,50 @@
<small translate class="label" ng-if="addr.isChange">change</small> <small translate class="label" ng-if="addr.isChange">change</small>
</div> </div>
</div> </div>
<div class="large-3 medium-3 column text-right"> <div class="large-3 medium-3 columns text-right">
<span ng-if="$root.updatingBalance"> <span ng-show="$root.updatingBalance">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> <i class="fi-bitcoin-circle icon-rotate spinner"></i>
</span> </span>
<span class="size-14" ng-if="!$root.updatingBalance"> <span class="size-14" ng-show="!$root.updatingBalance">
<b>{{addr.balance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}</b> <b>{{addr.balance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
</span> </span>
</div> </div>
<div class="large-1 columns show-for-large-up" ng-click="openAddressModal(addr)"> <div class="large-2 columns show-for-large-up text-right">
<a class="size-12" href=""> Show QR</a> <a class="size-12" ng-click="openAddressModal(addr)"> Show QR</a>
</div> </div>
</div> </div>
</div> <!-- end of panel large screen --> <div class="row hide-for-large-up" ng-click="openAddressModal(addr)">
<a class="db text-black panel radius row hide-for-large-up list-addr" ng-click="openAddressModal(addr)"> <div class="small-12 columns">
<div class="ellipsis m5b"> <div class="list-addr">
<div class="ellipsis">
<span><contact address="{{addr.address}}"></span> <span><contact address="{{addr.address}}"></span>
<small translate class="m0 label" ng-if="addr.isChange">change</small> <small translate class="label" ng-if="addr.isChange">change</small>
</div> </div>
<div class="text-left"> <div class="text-right m10t">
<span class="small-12 columns m15t" ng-if="$root.updatingBalance"> <span class="size-14" ng-show="$root.updatingBalance">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> <i class="fi-bitcoin-circle icon-rotate spinner"></i>
</span> </span>
<span class="size-14" ng-if="!$root.updatingBalance"> <span class="size-14" ng-show="!$root.updatingBalance">
<b>{{addr.balance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}</b> <b>{{addr.balance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
</span> </span>
</div> </div>
</a> <!-- end of panel mobile --> </div>
</div>
</div> <!-- end of panel mobile -->
</div> </div>
</div> </div>
</div> </div>
<div class="large-12 columns">
<a class="secondary radius size-12 right" ng-click="toggleShowAll()" ng-show="addrLength > 3"> <div class="m20b text-right">
<a class="size-12" ng-click="toggleShowAll()" ng-show="addrLength > 3">
<span translate ng-if="!showAll">Show all</span> <span translate ng-if="!showAll">Show all</span>
<span translate ng-if="showAll">Show less</span> <span translate ng-if="showAll">Show less</span>
</a> </a>
</div>
<div class="m10t"> <a class="button tiny primary text-center" ng-click="newAddr()" ng-disabled="loading">
<a class="button tiny primary text-center" ng-click="newAddr()" ng-disabled="loading"><i class="fi-plus m5r"></i> Add </a> <i class="fi-plus m5r"></i> Add
</a>
</div>
</div> </div>
</div> </div>
</div> </div>