Address book is opened in a modal window

This commit is contained in:
Gustavo Maximiliano Cortez 2014-12-05 05:41:44 -03:00
commit d09dda0455
4 changed files with 186 additions and 129 deletions

View file

@ -1,33 +1,90 @@
<h2 translate>Address Book</h2>
<form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
<div class="row collapse">
<label for="newaddress" class="left"><span translate>Address</span>
<small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
</label>
<span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</span>
<small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
</div>
<div class="input">
<input type="text" id="newaddress" name="newaddress" ng-disabled="loading"
placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
<i class="fi-address-book"></i>
</div>
<label for="newlabel"><span translate>Label</span>
<small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small>
<div class="input">
<input type="text" id="newlabel" name="newlabel" ng-disabled="loading"
placeholder="{{'Label'|translate}}" ng-model="newlabel" required>
<i class="icon-pricetag"></i>
<div>
<h1 ng-show="!showForm">Address Book
<small><a class="text-success" href ng-click="toggleForm()"><i class="fi-plus"></i> Add entry</a></small>
</h1>
<h1 ng-show="showForm">Add a new entry</h1>
<p translate class="text-gray m15b" ng-show="!showForm && !hasEntry()">Empty. Create an alias for your addresses</p>
<div class="box-notification" ng-show="success">
<div class="box-icon success">
<i class="size-24 fi-check"></i>
</div>
</label>
<a translate class="m0 button warning small default" ng-click="cancel()">Cancel</a>
<input type="submit" class="m0 button small primary right"
ng-disabled="addressBookForm.$invalid || loading"
value="{{'Add'|translate}}">
</form>
<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
<span class="size-14 text-success">
{{success}}
</span>
</div>
<table class="addressbook" ng-show="!showForm && hasEntry()">
<thead>
<tr>
<th translate>Entry</th>
<th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th>
<th class="hide-for-small-only" translate>Date</th>
<th class="hide-for-small-only">Visible</th>
</tr>
</thead>
<tbody>
<tr
class="addressbook-entry"
ng-repeat="(addr, info) in addressBook"
ng-class="{'addressbook-disabled': info.hidden}">
<td ng-click="copyToSend(addr)">
<dl>
<dt><b>{{info.label}}</b></dt>
<dd><span class="ellipsis">{{::addr}}</span></dd>
</dl>
</td>
<td ng-click="copyToSend(addr)" ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
<td ng-click="copyToSend(addr)" class="hide-for-small-only"><time>{{::info.createdTs | amCalendar}}</time></td>
<td class="hide-for-small-only text-center">
<a ng-click="toggleAddressBookEntry(addr)" title="{{ info.hidden ? 'Enable' : 'Disable'}} address">
<i class="fi-checkbox size-21"
ng-class="{'text-success':!info.hidden, 'text-gray':info.hidden}"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div class="row" ng-show="showForm">
<div class="large-6 medium-6 columns large-centered medium-centered">
<form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
<div class="box-notification" ng-show="error">
<div class="box-icon error">
<i class="size-24 fi-x"></i>
</div>
<span class="size-14 text-warning">
{{error}}
</span>
</div>
<div class="row collapse">
<label for="newaddress" class="left"><span translate>Address</span>
<small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
</label>
<span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</span>
<small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
</div>
<div class="input">
<input type="text" name="newaddress"
placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
<i class="fi-address-book"></i>
</div>
<label for="newlabel"><span translate>Label</span>
<small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small>
<div class="input">
<input type="text" name="newlabel"
placeholder="{{'Label'|translate}}" ng-model="newlabel" required>
<i class="icon-pricetag"></i>
</div>
</label>
<a translate class="m0 button secondary small default" ng-click="cancel()">Back</a>
<input type="submit" class="m0 button small primary right"
ng-disabled="addressBookForm.$invalid || loading"
value="{{'Add'|translate}}">
</form>
</div>
</div>
<a class="close-reveal-modal" ng-click="close()">&#215;</a>
</div>

View file

@ -43,6 +43,9 @@
<input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant || isPayUri"
placeholder="{{'Bitcoin address'|translate}}" ng-model="address" valid-address required>
<i class="fi-address-book"></i>
<a class="postfix button addressbook" ng-click="openAddressBook()">
<i class="fi-address-book size-24"></i>
</a>
<div ng-hide="showScanner || disableScanner">
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></a>
</div>
@ -186,42 +189,5 @@
1 BTC = {{$root.wallet.balanceInfo.alternativeConversionRate}} {{alternativeIsoCode}}
</div>
</div>
<div class="line-dashed-h m20b"></div>
<div class="row">
<div class="large-12 columns">
<h2 translate>Address Book</h2>
<p translate class="text-gray m15b" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
<table ng-show="showAddressBook()">
<thead>
<tr>
<th translate>Label</th>
<th translate>Address</th>
<th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th>
<th class="hide-for-small-only" translate>Date</th>
<th class="hide-for-small-only">Enable</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="(addr, info) in $root.wallet.addressBook"
ng-class="{'addressbook-disabled': info.hidden}">
<td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
<td class="size-12">{{::addr}}</td>
<td ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
<td class="hide-for-small-only"><time>{{::info.createdTs | amCalendar}}</time></td>
<td class="hide-for-small-only">
<a ng-click="toggleAddressBookEntry(addr)" title="{{ info.hidden ? 'Enable' : 'Disable'}} address">
<i class="fi-checkbox"
ng-class="{'text-success':!info.hidden, 'text-gray':info.hidden}"></i>
</a>
</td>
</tr>
</tbody>
</table>
<button translate class="button tiny primary" ng-click="openAddressBookModal()">
<i class="fi-plus m5r"></i> Add</button>
</div>
</div>
</div>