mirror of https://github.com/BTCPrivate/copay.git
feat(send): design and scaffold zero-state for send tab
This commit is contained in:
parent
73018e062f
commit
7d9a4244c9
|
@ -6,6 +6,8 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
|
||||||
var CONTACTS_SHOW_LIMIT;
|
var CONTACTS_SHOW_LIMIT;
|
||||||
var currentContactsPage;
|
var currentContactsPage;
|
||||||
|
|
||||||
|
$scope.hasFunds = false;
|
||||||
|
|
||||||
var updateList = function() {
|
var updateList = function() {
|
||||||
CONTACTS_SHOW_LIMIT = 10;
|
CONTACTS_SHOW_LIMIT = 10;
|
||||||
currentContactsPage = 0;
|
currentContactsPage = 0;
|
||||||
|
|
|
@ -38,6 +38,9 @@ $button-secondary-active-border: transparent;
|
||||||
&.button-secondary {
|
&.button-secondary {
|
||||||
&.button-standard {
|
&.button-standard {
|
||||||
@extend %button-standard;
|
@extend %button-standard;
|
||||||
|
& + .button-standard {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,51 +7,13 @@ $scannerBackgroundColor: #060d2d;
|
||||||
.bar-header {
|
.bar-header {
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
}
|
}
|
||||||
|
.zero-state-cta {
|
||||||
|
padding-bottom: 6vh;
|
||||||
|
}
|
||||||
&-has-problems,
|
&-has-problems,
|
||||||
&-loading-camera {
|
&-loading-camera {
|
||||||
background-color: $scannerBackgroundColor;
|
background-color: $scannerBackgroundColor;
|
||||||
}
|
}
|
||||||
&-has-problems {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.zero-state {
|
|
||||||
&-icon {
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 13px;
|
|
||||||
box-shadow: $subtle-box-shadow;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
&-heading {
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
&-description {
|
|
||||||
margin: 0 2rem 120px;
|
|
||||||
opacity: .6;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
&-tldr {
|
|
||||||
margin: 1rem auto;
|
|
||||||
}
|
|
||||||
&-description,
|
|
||||||
&-tldr {
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
&-cta {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 6vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-loading-camera {
|
&-loading-camera {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
#tab-send {
|
#tab-send {
|
||||||
|
.zero-state-cta {
|
||||||
|
padding-bottom: 3vh;
|
||||||
|
}
|
||||||
.send-heading {
|
.send-heading {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
@import "address-book";
|
@import "address-book";
|
||||||
@import "wallet-backup-phrase";
|
@import "wallet-backup-phrase";
|
||||||
@import "address-book";
|
@import "address-book";
|
||||||
|
@import "zero-state";
|
||||||
@import "onboarding/onboarding";
|
@import "onboarding/onboarding";
|
||||||
@import "includes/walletActivity";
|
@import "includes/walletActivity";
|
||||||
@import "includes/wallets";
|
@import "includes/wallets";
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
.zero-state {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
&-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 13px;
|
||||||
|
box-shadow: $subtle-box-shadow;
|
||||||
|
background-color: #fff;
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-heading {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
&-description {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 2rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
margin-bottom: 120px;
|
||||||
|
opacity: .6;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
&-tldr {
|
||||||
|
margin: 1rem auto;
|
||||||
|
}
|
||||||
|
&-description,
|
||||||
|
&-tldr {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
&-cta {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,7 +8,7 @@
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content scroll="false">
|
<ion-content scroll="false">
|
||||||
<div class="ng-hide" id="tab-scan-has-problems" ng-show="currentState === scannerStates.unauthorized || currentState === scannerStates.denied || currentState === scannerStates.unavailable">
|
<div class="ng-hide zero-state" id="tab-scan-has-problems" ng-show="currentState === scannerStates.unauthorized || currentState === scannerStates.denied || currentState === scannerStates.unavailable">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon zero-state-icon">
|
||||||
<img src="img/tab-icons/ico-receive.svg"/>
|
<img src="img/tab-icons/ico-receive.svg"/>
|
||||||
</i>
|
</i>
|
||||||
|
|
|
@ -2,25 +2,38 @@
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar class="bar-royal">
|
||||||
<ion-nav-title>{{'Send' | translate}}</ion-nav-title>
|
<ion-nav-title>{{'Send' | translate}}</ion-nav-title>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
|
<ion-content scroll="false">
|
||||||
<ion-content>
|
<div class="ng-hide zero-state" ng-show="!hasFunds">
|
||||||
|
<i class="icon zero-state-icon">
|
||||||
|
<img src="img/tab-icons/ico-send-selected.svg"/>
|
||||||
|
</i>
|
||||||
|
<div class="zero-state-heading" translate>Start sending bitcoin</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-cta">
|
||||||
|
<button class="button button-standard button-primary" ui-sref="tabs.buyandsell.glidera" ng-show="hasWallets">Buy Bitcoin</button>
|
||||||
|
<button class="button button-standard button-primary" ui-sref="tabs.add.create-personal" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
<ion-content class="ng-hide has-funds" ng-show="hasFunds">
|
||||||
<div class="item item-heading send-heading" translate>Recipient</div>
|
<div class="item item-heading send-heading" translate>Recipient</div>
|
||||||
<label class="item item-input bitcoin-address">
|
<label class="item item-input bitcoin-address">
|
||||||
<i class="icon icon-svg placeholder-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
|
<i class="icon icon-svg placeholder-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
|
||||||
<div class="qr-scan-icon" ng-style="{'width': '100%'}">
|
<div class="qr-scan-icon" ng-style="{'width': '100%'}">
|
||||||
<a ui-sref="tabs.scan" ng-style="{'top': '6px'}"><i class="icon ion-qr-scanner"></i></a>
|
<a ui-sref="tabs.scan" ng-style="{'top': '6px'}">
|
||||||
<input type="text"
|
<i class="icon ion-qr-scanner"></i>
|
||||||
placeholder="{{'Search or enter bitcoin address' | translate}}"
|
</a>
|
||||||
ng-model="formData.search"
|
<input type="text" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur>
|
||||||
ng-change="findContact(formData.search)"
|
|
||||||
ng-model-onblur>
|
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="item item-icon-right item-heading">
|
<div class="item item-icon-right item-heading">
|
||||||
<span translate>Contacts</span>
|
<span translate>Contacts</span>
|
||||||
<a ng-if="hasContacts" ui-sref="tabs.send.addressbook"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
|
<a ng-if="hasContacts" ui-sref="tabs.send.addressbook">
|
||||||
|
<i class="icon ion-ios-plus-empty list-add-button"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<a class="item item-icon-left item-icon-right" ng-if="!hasContacts" ui-sref="tabs.send.addressbook">
|
<a class="item item-icon-left item-icon-right" ng-if="!hasContacts" ui-sref="tabs.send.addressbook">
|
||||||
|
|
Loading…
Reference in New Issue