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

New design for modals. Fix notification errors

Browse source
This commit is contained in:
Gustavo Maximiliano Cortez 2015-12-03 13:43:59 -03:00
commit 93b935ee0a
No known key found for this signature in database
GPG key ID: 15EDAD8D9F2EB1AF
11 changed files with 185 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/views/backup.html
View file

@ -20,8 +20,8 @@
<div class="content preferences">
<div class="box-notification" ng-show="wordsC.error">
<span class="text-warning" translate>
{{wordsC.error}}
<span class="text-warning">
{{wordsC.error|translate}}
</span>
</div>

8
public/views/buyGlidera.html
View file

@ -35,8 +35,8 @@
<div class="row m20t">
<div class="columns">
<div class="box-notification" ng-show="index.glideraLimits.transactDisabledPendingFirstTransaction">
<span class="text-warning size-14">
<div class="box-notification m20b" ng-show="index.glideraLimits.transactDisabledPendingFirstTransaction">
<span class="text-warning">
This operation was disabled because you have a pending first transaction
</span>
</div>
@ -117,8 +117,8 @@
</p>
</div>
</div>
<div class="box-notification" ng-show="buy.error && !buy.success">
<span class="text-warning size-14">
<div class="box-notification m20b" ng-show="buy.error && !buy.success">
<span class="text-warning">
{{buy.error}}
</span>
</div>

12
public/views/create.html
View file

@ -49,13 +49,13 @@
</div>
<form name="setupForm" ng-submit="create.create(setupForm)" novalidate>
<div class="box-notification m20b" ng-show="create.error">
<span class="text-warning">
{{create.error|translate}}
</span>
</div>
<div class="row">
<div class="large-12 columns">
<div class="box-notification" ng-show="create.error">
<span class="text-warning size-14">
{{create.error|translate}}
</span>
</div>
<div class="large-12 columns">
<div ng-hide="create.hideWalletName">
<label><span translate>Wallet name</span>

46
public/views/import.html
View file

@ -44,14 +44,14 @@
</div>
</div>
<div class="row" ng-show="type == '12' ">
<div class="large-12 columns">
<form name="importForm12" ng-submit="import.importMnemonic(importForm12)" novalidate>
<div class="box-notification" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<div ng-show="type == '12' ">
<div class="box-notification m20b" ng-show="import.error">
<span class="text-warning">
{{import.error|translate}}
</span>
</div>
<div class="row large-12 columns">
<form name="importForm12" ng-submit="import.importMnemonic(importForm12)" novalidate>
<div >
<label for="words">
@ -100,14 +100,14 @@
</div>
</div>
<div class="row" ng-show="type == 'file' ">
<div class="large-12 columns">
<form name="importForm" ng-submit="import.importBlob(importForm)" novalidate>
<div class="box-notification" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<div ng-show="type == 'file' ">
<div class="box-notification m20b" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<div class="row large-12 columns">
<form name="importForm" ng-submit="import.importBlob(importForm)" novalidate>
<div ng-show="!index.isSafari && !index.isCordova" class="line-b m10b">
<label for="backupFile">
@ -166,13 +166,13 @@
</div>
</div>
<div class="row" ng-show="type == 'hwWallet'">
<div class="large-12 columns">
<div class="box-notification" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<div ng-show="type == 'hwWallet'">
<div class="box-notification m20b" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<div class="row large-12 columns">
<form name="importForm3" ng-submit="import.importHW(importForm3)" novalidate>
<div class="large-12 columns">

12
public/views/join.html
View file

@ -34,13 +34,13 @@
</div>
<form name="joinForm" ng-submit="join.join(joinForm)" novalidate>
<div class="box-notification m20b" ng-show="join.error ">
<span class="text-warning">
{{join.error|translate}}
</span>
</div>
<div class="row">
<div class="large-12 columns">
<div class="box-notification" ng-show="join.error ">
<span class="text-warning size-14">
{{join.error|translate}}
</span>
</div>
<div class="large-12 columns">
<div>
<label><span translate>Your nickname</span>

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

@ -15,29 +15,86 @@
ng-swipe-disable-mouse
ng-swipe-right="cancel()"
ng-init="updateCopayerList()">
<div class="payment-proposal-head"
ng-style="{'background-color':color}">
<div class="size-36">{{tx.amountStr}}</div>
<div class="size-14 text-light" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
<i class="db fi-arrow-down size-24 m10v"></i>
<span class="payment-proposal-to"
ng-click="copyAddress(tx.toAddress)">
<i class="fi-bitcoin"></i>
<contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select" address="{{tx.toAddress}}"></contact>
<span ng-if="tx.hasMultiplesOutputs" translate>
Multiple recipients
</span>
</span>
</div>
<div class="oh">
<div class="box-notification m20t" ng-show="error">
<span class="text-warning size-14">
{{error|translate}}
</span>
</div>
<div class="row column m20t text-center text-warning size-12" ng-if="tx.removed" translate>
The payment was removed by creator
</div>
<div class="row p20t white" ng-if="tx.pendingForUs">
<div class="large-5 medium-5 small-6 columns">
<button class="button outline round dark-gray expand" ng-click="reject(tx);"
ng-disabled="loading">
<i class="fi-x"></i>
<span translate>Reject</span>
</button>
</div>
<div class="large-5 medium-5 small-6 columns text-right" ng-show="canSign">
<button class="button primary round expand" ng-click="sign(tx)"
ng-style="{'background-color':color}"
ng-disabled="loading">
<i class="fi-check"></i>
<span translate>Accept</span>
</button>
</div>
</div>
<div class="text-center text-gray size-12 m20t" ng-show="tx.status != 'pending'">
<div ng-show="tx.status=='accepted' && !tx.isGlidera">
<div class="m10b" translate>Payment accepted, but not yet broadcasted</div>
<button class="primary round m0"
ng-style="{'background-color':color}"
ng-click="broadcast(tx)"
ng-disabled="loading"
> <i class="fi-upload-cloud"></i>
<span translate>Broadcast Payment</span>
</button>
</div>
<div ng-show="tx.status=='accepted' && tx.isGlidera" >
<div class="m10h" translate>Payment accepted. It will be broadcasted by Glidera. In case there is a problem, it can be deleted 6 hours after it was created.</div>
</div>
<div class="text-success"
ng-show="tx.status=='broadcasted'" translate>
Payment Sent
</div>
<div class="text-warning"
ng-show="tx.status=='rejected'" translate>
Payment Rejected
</div>
</div>
</div>
<h4 class="title m0" translate>Details</h4>
<ul class="no-bullet size-14 m0">
<li ng-if="!tx.hasMultiplesOutputs"
class="line-b p10 oh"
ng-click="copyAddress(tx.toAddress)">
<span class="text-gray" translate>To</span>:
<contact class="right enable_text_select" address="{{tx.toAddress}}"></contact>
</li>
<li class="line-b p10">
<span ng-show="tx.hasMultiplesOutputs" class="text-gray" translate>Total</span>
<span ng-show="!tx.hasMultiplesOutputs" class="text-gray" translate>Amount</span>:
<span class="right">{{tx.amountStr}}
<span ng-show="tx.alternativeAmountStr" class="label gray radius">{{tx.alternativeAmountStr}}</span>
</span>
</li>
<li class="line-b p10 oh">
<span class="text-gray" translate>Note</span>:
<span class="text-gray" translate>Note</span>
<span class="right">{{tx.message}}</span>
</li>
<li ng-show="tx.hasMultiplesOutputs" class="line-b p10 oh"
ng-click="showMultiplesOutputs = !showMultiplesOutputs">
<span class="text-gray" translate>Recipients</span>:
<span class="text-gray" translate>Recipients</span>
<span class="right">{{tx.recipientCount}}
<i ng-show="showMultiplesOutputs" class="icon-arrow-up3 size-24"></i>
<i ng-show="!showMultiplesOutputs" class="icon-arrow-down3 size-24"></i>
@ -50,28 +107,29 @@
</div>
<li class="line-b p10">
<span class="text-gray" translate>Fee</span>:
<span class="text-gray" translate>Fee</span>
<span class="right">{{tx.feeStr}}</span>
</li>
<li class="line-b p10">
<span class="text-gray" translate>Time</span>:
<span class="text-gray" translate>Time</span>
<span class="right">
<time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
</span>
</li>
<li class="line-b p10 oh">
<span class="text-gray" translate>Created by</span>:
<span class="text-gray" translate>Created by</span>
<span class="right">{{tx.creatorName}}</span>
</li>
</ul>
<div class="p10 text-center size-12" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
<span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
</div>
<div ng-if="tx.paypro">
<h4 class="title m0" translate>Payment details</h4>
<ul class="no-bullet size-14 m0">
<li class="line-b p10">
<span class="text-gray" translate>To</span>:
<span class="text-gray" translate>To</span>
<span class="right">
<span>
<span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.paypro.domain}}</span>
@ -81,83 +139,36 @@
</span>
</li>
<li class="line-b p10">
<span class="text-gray" translate>Expires</span>:
<span class="text-gray" translate>Expires</span>
<span class="right">
<time>{{tx.paypro.expirationDate | amTimeAgo }}</time>
</span>
</li>
<li class="line-b p10">
<span class="text-gray">Merchant Message:</span>
<span class="text-gray">Merchant Message</span>
<span class="db">{{tx.paypro.pr.pd.memo}}</span>
</li>
</ul>
</div>
<div ng-if="tx.actions[0] && !txRejected && !txBroadcasted">
<h4 class="title m0" translate>Participants</h4>
<h4 class="title m0" translate>
<div class="right size-12 text-gray m10r">
{{tx.requiredSignatures}}/{{tx.walletN}}
</div>
<span translate>Participants</span>
</h4>
<ul class="no-bullet size-14 m0">
<li class="line-b p10 text-gray" ng-repeat="ac in tx.actions">
<i class="icon-contact size-24"></i>
{{ac.copayerName}} <span ng-if="ac.copayerId == copayerId">({{'Me'|translate}})</span>
<span class="right">
<i ng-if="ac.type == 'reject'" class="fi-x icon-sign x db"></i>
<i ng-if="ac.type == 'accept'" class="fi-check icon-sign check db"></i>
<i ng-if="!ac.type" class="fi-loop"></i>
<span class="right tu">
<span ng-if="ac.type == 'reject'" class="text-warning"><i class="fi-x icon-sign x"></i>Rejected</span>
<span ng-if="ac.type == 'accept'" class="text-success"><i class="fi-check icon-sign check"></i>Signed</span>
</span>
</li>
</ul>
</div>
<div class="box-notification m20t" ng-show="error">
<span class="text-warning size-14">
{{error|translate}}
</span>
</div>
<div class="row column m20t text-center text-warning" ng-if="tx.removed" translate>
The payment was removed by creator
</div>
<div class="row m20t" ng-if="tx.pendingForUs">
<div class="large-5 medium-5 small-6 columns">
<button class="button outline round dark-gray expand" ng-click="reject(tx);"
ng-disabled="loading">
<i class="fi-x"></i>
<span translate>Reject</span>
</button>
</div>
<div class="large-5 medium-5 small-6 columns text-right" ng-show="canSign">
<button class="button primary round expand" ng-click="sign(tx)"
ng-style="{'background-color':color}"
ng-disabled="loading">
<i class="fi-check"></i>
<span translate>Accept</span>
</button>
</div>
</div>
<div class="text-center text-gray m20t" ng-show="tx.status != 'pending'">
<div ng-show="tx.status=='accepted' && !tx.isGlidera" >
<div class="m10b size-12" translate>Payment accepted, but not yet broadcasted</div>
<button class="primary round"
ng-click="broadcast(tx)"
ng-disabled="loading"
> <i class="fi-upload-cloud"></i>
<span translate>Broadcast Payment</span>
</button>
</div>
<div ng-show="tx.status=='accepted' && tx.isGlidera" >
<div class="m10 size-12" translate>Payment accepted. It will be broadcasted by Glidera. In case there is a problem, it can be deleted 6 hours after it was created.</div>
</div>
<div class="text-success m10t"
ng-show="tx.status=='broadcasted'" translate>
Payment Sent
</div>
<div class="text-center text-warning m10t"
ng-show="tx.status=='rejected'" translate>
Payment Rejected
</div>
</div>
</div>
<div class="columns text-center m20t" ng-if="tx.canBeRemoved && isShared">
<div class="text-gray size-12 m20b" ng-if="!tx.isGlidera" translate>

5
public/views/paperWallet.html
View file

@ -19,9 +19,8 @@
<span ng-show="paperWallet.sending" translate>Sending funds...</span>
</div>
</div>
<div class="box-notification text-warning" ng-show="paperWallet.error">
<i class="fi-alert size-12"></i>
<span>{{paperWallet.error|translate}}</span>
<div class="box-notification m20b" ng-show="paperWallet.error">
<span classs="text-warning">{{paperWallet.error|translate}}</span>
</div>
<form ng-show="!paperWallet.balance" class="oh">
<div class="row">

4
public/views/sellGlidera.html
View file

@ -35,8 +35,8 @@
<div class="row m20t">
<div class="columns">
<div class="box-notification" ng-show="index.glideraLimits.transactDisabledPendingFirstTransaction">
<span class="text-warning size-14">
<div class="box-notification m20b" ng-show="index.glideraLimits.transactDisabledPendingFirstTransaction">
<span class="text-warning">
This operation was disabled because you have a pending first transaction
</span>
</div>

57
public/views/walletHome.html
View file

@ -301,36 +301,33 @@
</button>
</div>
<div ng-show="!index.needsBackup">
<div class="box-notification m20t" ng-show="home.addrError">
<span class="text-warning">
{{home.addrError|translate}}
</span>
</div>
<div class="row">
<!-- Address-->
<div class="large-12 columns">
<h2 class="text-center m10t" translate>My Bitcoin address</h2>
<div>
<div class="box-notification" ng-show="home.addrError">
<span class="text-warning">
{{home.addrError|translate}}
</span>
</div>
<div class="text-center" ng-click="home.copyAddress(home.addr[index.walletId])" ng-show="home.addr[index.walletId] || home.generatingAddress">
<qrcode size="220" data="bitcoin:{{home.addr[index.walletId]}}"></qrcode>
<div ng-show="home.generatingAddress" style="position:relative; top:-226px; height:0px">
<div style="height:220px; width:220px; margin:auto; background: url(img/qr.png) white">
<div class="spinner" style="margin-top:80px">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div class="text-center" ng-click="home.copyAddress(home.addr[index.walletId])" ng-show="home.addr[index.walletId] || home.generatingAddress">
<qrcode size="220" data="bitcoin:{{home.addr[index.walletId]}}"></qrcode>
<div ng-show="home.generatingAddress" style="position:relative; top:-226px; height:0px">
<div style="height:220px; width:220px; margin:auto; background: url(img/qr.png) white">
<div class="spinner" style="margin-top:80px">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div class="m10t" >
<h4 ng-class="{'enable_text_select': !index.isCordova}" class="size-12">
{{home.generatingAddress ? '...' : home.addr[index.walletId]}}
</div>
<div class="m10t" >
<h4 ng-class="{'enable_text_select': !index.isCordova}" class="size-12">
{{home.generatingAddress ? '...' : home.addr[index.walletId]}}
</h4>
</div>
</h4>
</div>
</div>
@ -386,14 +383,14 @@
<qr-scanner on-scan="home.onQrCodeScanned(data)" before-scan="home.openSendScreen()"></qr-scanner>
</div>
</div>
<div class="box-notification m20t" ng-show="home.error" ng-click="home.resetError()">
<span class="text-warning">
{{home.error|translate}}
</span>
</div>
<div class="row m20t">
<div class="large-12 large-centered columns m20t">
<form name="sendForm" ng-submit="home.submitForm(index.feeRateToSendMax)" ng-disabled="home.blockUx || home.onGoingProcess" novalidate>
<div class="box-notification" ng-show="home.error" ng-click="home.resetError()">
<span class="text-warning">
{{home.error|translate}}
</span>
</div>
<div class="large-12 large-centered columns">
<form name="sendForm" ng-submit="home.submitForm(index.feeRateToSendMax)" ng-disabled="home.blockUx || home.onGoingProcess" novalidate>
<div ng-hide="home._paypro || home.hideAddress">
<div class="row collapse">

7
src/css/main.css
View file

@ -75,7 +75,7 @@ h4.title a {
.preferences h4, .modal-content h4, .walletHome h4, .glidera h4 {
background: #F6F7F9;
padding: 25px 0px 5px 20px;
padding: 25px 0px 5px 10px;
text-transform: uppercase;
color: #555;
font-size: 12px;
@ -272,9 +272,6 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
padding: 0.5rem;
border-radius: 2px;
background: #FFFFFF;
box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.10);
margin: 0 auto;
margin-bottom: 1.6rem;
}
.box-notification .box-icon {
@ -482,6 +479,7 @@ ul.manage li {
.m0 {margin: 0;}
.p0i {padding: 0 !important;}
.db {display: block;}
.dib {display: inline-block;}
.size-10 { font-size: 10px; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
@ -529,6 +527,7 @@ ul.manage li {
.p25l {padding-left: 25px;}
.p15 {padding:15px;}
.p20 {padding:20px;}
.p20t {padding-top:20px;}
.p10 {padding:10px;}
.p10b {padding-bottom:10px;}
.p45t {padding-top:45px;}

21
src/css/mobile.css
View file

@ -744,6 +744,27 @@ textarea:focus
padding-top: 1rem;
}
.payment-proposal-head {
color: #fff;
padding: 0 10px 20px 10px;
text-align: center;
}
.payment-proposal-to {
display: inline-block;
padding: 3px 15px;
background-color: rgba(0, 0, 0, 0.1);
}
.payment-proposal-to i {
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid;
border-color: rgba(0, 0, 0, 0.1);
font-size: 25px;
vertical-align: middle;
}
::-webkit-input-placeholder {
color: #B7C2CD;
}