feat(design): polish address book

Closes #420, closes #376
This commit is contained in:
Jason Dreyzehner 2016-10-13 00:02:06 -04:00
commit 08d49001f1
10 changed files with 116 additions and 126 deletions

View file

@ -3,7 +3,7 @@
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>
<span translate>Addressbook</span>
<span translate>Address Book</span>
</ion-nav-title>
<ion-nav-buttons side="secondary">
<button class="button button-back button-clear" ng-show="!isEmptyList" ui-sref="tabs.addressbook.add">
@ -11,9 +11,19 @@
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<ion-content scroll="false" id="add-address" class="ng-hide" ng-show="isEmptyList">
<div class="zero-state">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
</i>
<div class="zero-state-heading" translate>No contacts yet</div>
<div class="zero-state-description" translate>You havent added any contacts to your address book yet. Get started by adding your first one.</div>
<div class="zero-state-cta">
<button class="button button-standard button-primary" ui-sref="tabs.addressbook.add" translate>Add Contact</button>
</div>
</div>
</ion-content>
<ion-content class="ng-hide" ng-show="!isEmptyList">
<div class="bar bar-header item-input-inset" ng-show="!isEmptyList">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
@ -23,7 +33,6 @@
ng-change="findAddressbook(addrSearch)" ng-model-onblur>
</label>
</div>
<ion-list>
<ion-item ng-repeat="addrEntry in addressbook"
class="item-icon-right item-avatar"
@ -32,28 +41,10 @@
<h2>{{addrEntry.name}}</h2>
<p>{{addrEntry.address}}</p>
<i class="icon bp-arrow-right"></i>
<ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
<i class="icon ion-minus-circled"></i>
</ion-option-button>
</ion-item>
</ion-list>
<div class="text-center absolute-center" ng-show="isEmptyList">
<div id="add-contact" class="col col-80 center-block">
<div class="row">
<img class="col col-60 center-block" src="img/address-book-add.svg">
</div>
<div class="row text-center">
<h2 class="col" translate>No contacts yet</h2>
</div>
<div class="row">
<p class="text-center" translate>
You havent added any contacts to your address book yet. Get started by adding your first one.
</p>
</div>
<button class="button button-standard button-primary" ui-sref="tabs.addressbook.add" translate>Add Contact</button>
</div>
</div>
</ion-content>
</ion-view>

View file

@ -1,37 +1,31 @@
<ion-view>
<ion-view id="address-book-view">
<ion-nav-bar class="bar-royal">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>
<span translate>Addressbook</span>
<span>{{addressbookEntry.name}}</span>
</ion-nav-title>
</ion-nav-bar>
<ion-content>
<ion-content scroll="false">
<div class="gravatar-content">
<gravatar name="{{addressbookEntry.name}}" width="80" email="{{addressbookEntry.email}}"></gravatar>
</div>
<div class="card">
<div class="list">
<div class="item item-text-wrap">
<h3 translate>Name</h3>
<strong>{{addressbookEntry.name}}</strong>
<span class="address-book-field-label" translate>Name</span>
<span>{{addressbookEntry.name}}</span>
</div>
<div class="item item-text-wrap" ng-show="addressbookEntry.email">
<h3 translate>Email</h3>
<strong>{{addressbookEntry.email}}</strong>
<span class="address-book-field-label" translate>Email</span>
<span>{{addressbookEntry.email}}</span>
</div>
<div class="item item-text-wrap">
<h3 translate>Address</h3>
<strong>{{addressbookEntry.address}}</strong>
<span class="address-book-field-label" translate>Address</span>
<span>{{addressbookEntry.address}}</span>
</div>
</div>
<button class="button button-standard button-primary"
ng-click="sendTo()" translate>
<button class="button button-standard button-primary" ng-click="sendTo()" translate>
Send Money
</button>
</ion-content>
</ion-view>

View file

@ -11,9 +11,9 @@
<div class="zero-state-description" ng-show="hasWallets" translate>To get started, buy bitcoin or share your address. You can receive bitcoin from any wallet or service.</div>
<div class="zero-state-description" ng-show="!hasWallets" translate>To get started, you'll need to create a bitcoin wallet and get some bitcoin.</div>
<div class="zero-state-cta">
<button class="button button-standard button-primary" ng-click="buyBitcoin()" ng-show="hasWallets">Buy Bitcoin</button>
<button class="button button-standard button-primary" ng-click="createWallet()" ng-show="!hasWallets">Create bitcoin wallet</button>
<button class="button button-standard button-secondary" ui-sref="tabs.receive" ng-show="hasWallets">Show bitcoin address</button>
<button class="button button-standard button-primary" ng-click="buyBitcoin()" ng-show="hasWallets" translate>Buy Bitcoin</button>
<button class="button button-standard button-primary" ng-click="createWallet()" ng-show="!hasWallets" translate>Create bitcoin wallet</button>
<button class="button button-standard button-secondary" ui-sref="tabs.receive" ng-show="hasWallets" translate>Show bitcoin address</button>
</div>
</div>
</ion-content>