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

16
src/sass/directives/gravatar.scss
View file

@ -1,18 +1,4 @@
.gravatar { .gravatar {
border-radius: 50%; border-radius: 50%;
} display: inline-block;
.gravatar-content {
position: relative;
height: 70px;
border-color: #172565;
background-color: #1e3186;
background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
color: #fff;
margin-bottom: 50px;
.gravatar {
position: absolute;
bottom: -30px;
left: 41%;
}
} }

18
src/sass/ionic.scss
View file

@ -15,19 +15,6 @@ ion-tabs.ion-tabs-transparent {
background: none transparent; background: none transparent;
} }
// Some overrides for the card class which can't be set by variable
.card, .list {
.icon {
color: $light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
}
}
}
// .placeholder-icon padding cannot be modified by a variable // .placeholder-icon padding cannot be modified by a variable
$placeholder-icon-padding: 10px; $placeholder-icon-padding: 10px;
.placeholder-icon { .placeholder-icon {
@ -38,3 +25,8 @@ $placeholder-icon-padding: 10px;
padding-left: $placeholder-icon-padding; padding-left: $placeholder-icon-padding;
} }
} }
// .item-input-wrapper background cannot be modified by a variable
.item-input-wrapper {
background: none transparent;
}

37
src/sass/variables.scss
View file

@ -2,7 +2,7 @@
$royal: #1e3186; $royal: #1e3186;
$soft-blue: #647ce8; $soft-blue: #647ce8;
$fill-blue: #D5DFFF; $fill-blue: #D5DFFF;
$subtle-gray: #f7f7f7; $subtle-gray: darken(#fff, 5%);
$roboto: "Roboto", sans-serif; $roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light; $roboto-light: "Roboto-Light", sans-serif-light;
$success-green: #17ae8c; $success-green: #17ae8c;
@ -18,21 +18,34 @@ $unmistakable-radius: 12px;
/* Set ionic variables */ /* Set ionic variables */
$positive: $soft-blue; $positive: $soft-blue;
$font-size-base: 16px; $font-size-base: 16px;
$font-size-small: 12px; $font-size-small: 12px;
$font-family-sans-serif: $roboto; $font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light; $font-family-light-sans-serif: $roboto-light;
$button-border-radius: $visible-radius; $button-border-radius: $visible-radius;
$button-height: 52px; $button-height: 52px;
$button-padding: 16px; $button-padding: 16px;
$base-background-color: $subtle-gray; $base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray; $item-default-active-bg: $subtle-gray;
$item-icon-font-size: 24px; $item-icon-font-size: 24px;
$input-color: $dark-gray;
$input-border: $light-gray;
$input-label-color: $mid-gray;
$input-color-placeholder: lighten($dark-gray, 40%);
$item-default-bg: #ffffff;
$item-default-border: $subtle-gray;
$item-default-text: $dark-gray;
$item-default-active-bg: darken(#ffffff, 7%);
$item-default-active-border: darken($subtle-gray, 7%);
$bar-default-border: $subtle-gray;
$tabs-icon-size: 22px; $tabs-icon-size: 22px;

43
src/sass/views/address-book.scss
View file

@ -1,22 +1,15 @@
#add-address{ #add-address {
.list{ .zero-state-cta {
background: #ffffff; padding-bottom: 3vh;
}
.list {
background-color: #fff;
} }
} }
#view-address-book { #view-address-book {
.scroll{ .scroll {
height:100%; height:100%;
} }
#add-contact{
min-width: 300px;
img{
width: 10rem;
display: inline-block;
}
a{
text-decoration: none;
}
}
.list { .list {
.item { .item {
color: #444; color: #444;
@ -68,3 +61,25 @@
} }
} }
} }
#address-book-view {
.bar.bar-royal {
border: 0 transparent;
}
.gravatar-content {
position: relative;
height: 70px;
border-color: $royal;
background-color: $royal;
padding-top: 20px;
margin-bottom: 50px;
text-align: center;
}
.address-book-field-label {
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
display: block;
color: $mid-gray;
}
}

14
src/sass/views/tabs.scss
View file

@ -35,3 +35,17 @@
} }
} }
} }
#tab-home, #tab-send {
.card, .list {
.icon {
color: $light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
}
}
}
}

1
src/sass/views/views.scss
View file

@ -14,7 +14,6 @@
@import "bitpayCard"; @import "bitpayCard";
@import "address-book"; @import "address-book";
@import "wallet-backup-phrase"; @import "wallet-backup-phrase";
@import "address-book";
@import "zero-state"; @import "zero-state";
@import "onboarding/onboarding"; @import "onboarding/onboarding";
@import "includes/walletActivity"; @import "includes/walletActivity";

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

@ -1,27 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<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: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch --> <svg version="1.1" id="Add_Contact" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
<title>CF22B02A-463B-4798-B448-F6A878730EDC</title> y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<desc>Created with sketchtool.</desc> <style type="text/css">
<defs> .st0{fill:none;stroke:#647CE8;stroke-width:2;}
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"> </style>
<stop stop-color="#EFF2FF" offset="0%"></stop> <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"/>
<stop stop-color="#F7F7F7" offset="100%"></stop> <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
</linearGradient> 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"/>
</defs> <path class="st0" d="M106.3,90.4v35.2"/>
<g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path class="st0" d="M90.1,106.3h35.5"/>
<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> </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-back-button> </ion-nav-back-button>
<ion-nav-title> <ion-nav-title>
<span translate>Addressbook</span> <span translate>Address Book</span>
</ion-nav-title> </ion-nav-title>
<ion-nav-buttons side="secondary"> <ion-nav-buttons side="secondary">
<button class="button button-back button-clear" ng-show="!isEmptyList" ui-sref="tabs.addressbook.add"> <button class="button button-back button-clear" ng-show="!isEmptyList" ui-sref="tabs.addressbook.add">
@ -11,9 +11,19 @@
</button> </button>
</ion-nav-buttons> </ion-nav-buttons>
</ion-nav-bar> </ion-nav-bar>
<ion-content scroll="false" id="add-address" class="ng-hide" ng-show="isEmptyList">
<ion-content> <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"> <div class="bar bar-header item-input-inset" ng-show="!isEmptyList">
<label class="item-input-wrapper"> <label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i> <i class="icon ion-ios-search placeholder-icon"></i>
@ -23,7 +33,6 @@
ng-change="findAddressbook(addrSearch)" ng-model-onblur> ng-change="findAddressbook(addrSearch)" ng-model-onblur>
</label> </label>
</div> </div>
<ion-list> <ion-list>
<ion-item ng-repeat="addrEntry in addressbook" <ion-item ng-repeat="addrEntry in addressbook"
class="item-icon-right item-avatar" class="item-icon-right item-avatar"
@ -32,28 +41,10 @@
<h2>{{addrEntry.name}}</h2> <h2>{{addrEntry.name}}</h2>
<p>{{addrEntry.address}}</p> <p>{{addrEntry.address}}</p>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
<ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)"> <ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
<i class="icon ion-minus-circled"></i> <i class="icon ion-minus-circled"></i>
</ion-option-button> </ion-option-button>
</ion-item> </ion-item>
</ion-list> </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-content>
</ion-view> </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-bar class="bar-royal">
<ion-nav-back-button> <ion-nav-back-button>
</ion-nav-back-button> </ion-nav-back-button>
<ion-nav-title> <ion-nav-title>
<span translate>Addressbook</span> <span>{{addressbookEntry.name}}</span>
</ion-nav-title> </ion-nav-title>
</ion-nav-bar> </ion-nav-bar>
<ion-content scroll="false">
<ion-content>
<div class="gravatar-content"> <div class="gravatar-content">
<gravatar name="{{addressbookEntry.name}}" width="80" email="{{addressbookEntry.email}}"></gravatar> <gravatar name="{{addressbookEntry.name}}" width="80" email="{{addressbookEntry.email}}"></gravatar>
</div> </div>
<div class="list">
<div class="card">
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<h3 translate>Name</h3> <span class="address-book-field-label" translate>Name</span>
<strong>{{addressbookEntry.name}}</strong> <span>{{addressbookEntry.name}}</span>
</div> </div>
<div class="item item-text-wrap" ng-show="addressbookEntry.email"> <div class="item item-text-wrap" ng-show="addressbookEntry.email">
<h3 translate>Email</h3> <span class="address-book-field-label" translate>Email</span>
<strong>{{addressbookEntry.email}}</strong> <span>{{addressbookEntry.email}}</span>
</div> </div>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<h3 translate>Address</h3> <span class="address-book-field-label" translate>Address</span>
<strong>{{addressbookEntry.address}}</strong> <span>{{addressbookEntry.address}}</span>
</div> </div>
</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 Send Money
</button> </button>
</ion-content> </ion-content>
</ion-view> </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, 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-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"> <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="buyBitcoin()" ng-show="hasWallets" translate>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-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">Show bitcoin address</button> <button class="button button-standard button-secondary" ui-sref="tabs.receive" ng-show="hasWallets" translate>Show bitcoin address</button>
</div> </div>
</div> </div>
</ion-content> </ion-content>