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

feat(design): polish address book

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

40
www/img/address-book-add.svg
View file

@ -1,27 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>CF22B02A-463B-4798-B448-F6A878730EDC</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#EFF2FF" offset="0%"></stop>
<stop stop-color="#F7F7F7" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.7.4---Address-book-(Empty)" transform="translate(-122.000000, -125.000000)">
<g id="Header/Jumbo-W-Text/Light" transform="translate(0.000000, 70.000000)">
<g id="users-24px-outline-2_a-add" transform="translate(64.000000, 41.000000)">
<g id="Group" transform="translate(58.000000, 14.000000)">
<circle id="Oval-2" fill="url(#linearGradient-1)" cx="64" cy="64" r="64"></circle>
<path d="M59.8058824,65.8235294 C51.3947922,65.8235294 43.9338216,67.7071485 39.0313235,69.3457199 C35.4125294,70.5591485 33,73.9396246 33,77.7275294 L33,89.442577 L62.7843137,89.442577" id="Shape" stroke="#647CE8" stroke-width="2"></path>
<path d="M65.8843137,68.4285714 L65.8843137,68.4285714 C57.6608647,68.4285714 50.9921569,58.8658095 50.9921569,50.7142857 L50.9921569,47.7619048 C50.9921569,39.610381 57.6608647,33 65.8843137,33 L65.8843137,33 C74.1077627,33 80.7764706,39.610381 80.7764706,47.7619048 L80.7764706,50.7142857 C80.7764706,58.8658095 74.1077627,68.4285714 65.8843137,68.4285714 L65.8843137,68.4285714 Z" id="Shape" stroke="#647CE8" stroke-width="2"></path>
<path d="M85.2745098,77.2857143 L85.2745098,95" id="Shape" stroke="#647CE8" stroke-width="2"></path>
<path d="M77.1294118,85.2745098 L95,85.2745098" id="Shape" stroke="#647CE8" stroke-width="2"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Add_Contact" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#647CE8;stroke-width:2;}
</style>
<path class="st0" d="M53.3,67.7c-16.7,0-29.2,3.7-38.9,7c-7.2,2.4-12,9.1-12,16.7v23.3h59.2"/>
<path class="st0" d="M67.7,72.8L67.7,72.8c-16.4,0-29.6-19-29.6-35.2v-5.9c0-16.2,13.3-29.4,29.6-29.4l0,0
c16.4,0,29.6,13.1,29.6,29.4v5.9C97.4,53.8,84.1,72.8,67.7,72.8L67.7,72.8z"/>
<path class="st0" d="M106.3,90.4v35.2"/>
<path class="st0" d="M90.1,106.3h35.5"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 797 B

Before After
Before After

37
www/views/addressbook.html
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 haven’t 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 haven’t 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>

28
www/views/addressbook.view.html
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>

6
www/views/tab-send.html
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>