Jason Dreyzehner
parent
04672a779d
commit
08d49001f1
10 changed files with 116 additions and 126 deletions
|
|
@ -1,18 +1,4 @@
|
|||
.gravatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,19 +15,6 @@ ion-tabs.ion-tabs-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: 10px;
|
||||
.placeholder-icon {
|
||||
|
|
@ -38,3 +25,8 @@ $placeholder-icon-padding: 10px;
|
|||
padding-left: $placeholder-icon-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// .item-input-wrapper background cannot be modified by a variable
|
||||
.item-input-wrapper {
|
||||
background: none transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
$royal: #1e3186;
|
||||
$soft-blue: #647ce8;
|
||||
$fill-blue: #D5DFFF;
|
||||
$subtle-gray: #f7f7f7;
|
||||
$subtle-gray: darken(#fff, 5%);
|
||||
$roboto: "Roboto", sans-serif;
|
||||
$roboto-light: "Roboto-Light", sans-serif-light;
|
||||
$success-green: #17ae8c;
|
||||
|
|
@ -18,21 +18,34 @@ $unmistakable-radius: 12px;
|
|||
|
||||
/* Set ionic variables */
|
||||
|
||||
$positive: $soft-blue;
|
||||
$positive: $soft-blue;
|
||||
|
||||
$font-size-base: 16px;
|
||||
$font-size-small: 12px;
|
||||
$font-family-sans-serif: $roboto;
|
||||
$font-family-light-sans-serif: $roboto-light;
|
||||
$font-size-base: 16px;
|
||||
$font-size-small: 12px;
|
||||
$font-family-sans-serif: $roboto;
|
||||
$font-family-light-sans-serif: $roboto-light;
|
||||
|
||||
$button-border-radius: $visible-radius;
|
||||
$button-height: 52px;
|
||||
$button-padding: 16px;
|
||||
$button-border-radius: $visible-radius;
|
||||
$button-height: 52px;
|
||||
$button-padding: 16px;
|
||||
|
||||
$base-background-color: $subtle-gray;
|
||||
$base-background-color: $subtle-gray;
|
||||
|
||||
$item-default-active-bg: $subtle-gray;
|
||||
$item-icon-font-size: 24px;
|
||||
$item-default-active-bg: $subtle-gray;
|
||||
$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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,15 @@
|
|||
#add-address{
|
||||
.list{
|
||||
background: #ffffff;
|
||||
#add-address {
|
||||
.zero-state-cta {
|
||||
padding-bottom: 3vh;
|
||||
}
|
||||
.list {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
#view-address-book {
|
||||
.scroll{
|
||||
.scroll {
|
||||
height:100%;
|
||||
}
|
||||
#add-contact{
|
||||
min-width: 300px;
|
||||
img{
|
||||
width: 10rem;
|
||||
display: inline-block;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,3 +35,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tab-home, #tab-send {
|
||||
.card, .list {
|
||||
.icon {
|
||||
color: $light-gray;
|
||||
}
|
||||
& > .item-heading {
|
||||
font-weight: 700;
|
||||
.icon {
|
||||
color: $mid-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
@import "bitpayCard";
|
||||
@import "address-book";
|
||||
@import "wallet-backup-phrase";
|
||||
@import "address-book";
|
||||
@import "zero-state";
|
||||
@import "onboarding/onboarding";
|
||||
@import "includes/walletActivity";
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 797 B |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue