BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement proper send search design.

This commit is contained in:
Andy Phillipson 2017-06-08 17:43:06 -04:00
parent 3f5a8307e3
commit e5c6e5a2d2
No known key found for this signature in database
GPG Key ID: D813A67D567D6C88
3 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/controllers/tab-send.js
View File

@ -128,6 +128,16 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
updateWalletsList();
};
$scope.searchInFocus = function() {
$scope.searchFocus = true;
};
$scope.searchBlurred = function() {
if ($scope.formData.search == null) {
$scope.searchFocus = false;
}
};
$scope.findContact = function(search) {
if (incomingData.redir(search)) {

54
src/sass/views/tab-send.scss
View File

@ -35,8 +35,60 @@
.send-heading {
font-size: 14px;
font-weight: bold;
padding-bottom: 0;
padding: 0 0 16px 0;
border: none;
}
.send-header-wrapper {
padding: 10px;
background-color: white;
box-shadow: 0px 5px 10px 0px #cccccc;
}
.search-wrapper {
background-color: #f2f2f2;
border-radius: 3px;
border: none;
.svg#Bitcoin_Symbol {
width: 14px;
.st0 {
fill: #cccccc;
}
}
&.focus {
background: none;
.svg#Bitcoin_Symbol {
display: none;
}
.search-input {
padding-left: 0;
&:focus::-webkit-input-placeholder {
opacity: 0;
}
}
}
}
.abs-v-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.search-input {
background-color: transparent;
padding-left: 30px;
}
.separator-left {
border-left: 1px solid #d9d9df;
padding-left: 10px;
height: 70%;
}
.bitcoin-address {
border-top: none;
padding-bottom: .5rem;

16
www/views/tab-send.html
View File

@ -1,15 +1,19 @@
<ion-view id="tab-send">
c<ion-view id="tab-send">
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Send' | translate}}</ion-nav-title>
</ion-nav-bar>
<ion-content>
<div ng-if="hasFunds">
<div class="item item-heading send-heading" translate>Recipient</div>
<div class="item item-icon-left item-icon-right input">
<i class="icon icon-svg left"><img src="img/icon-bitcoin-symbol.svg"></i>
<input type="text" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur>
<i class="icon icon-svg qr" on-tap="openScanner()"><img src="img/scan-ico.svg"/></i>
<div class="send-header-wrapper">
<div class="item item-heading send-heading" translate><span>Recipient</span></div>
<div class="item input search-wrapper" ng-class="{'focus': searchFocus}">
<i class="icon icon-svg abs-v-center"><img class="svg" src="img/icon-bitcoin-symbol.svg"></i>
<div class="item-icon-right">
<input type="text" class="search-input" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur ng-focus="searchInFocus()" ng-blur="searchBlurred()">
<i class="icon icon-svg qr abs-v-center separator-left" on-tap="openScanner()"><img src="img/scan-ico.svg"></i>
</div>
</div>
</div>
</div>