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

Merge pull request #6209 from ajp8164/feat/send-search-design 

Feat/send search design
This commit is contained in:
Gustavo Maximiliano Cortez 2017-06-12 16:16:00 -03:00 committed by GitHub
parent a62d92ae3b fe12b3ae63
commit 879b59afa6
3 changed files with 63 additions and 6 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)) {

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

@ -35,7 +35,50 @@
.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;

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

@ -5,11 +5,15 @@
<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"><span translate>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>