mirror of https://github.com/BTCPrivate/copay.git
feat(walletDetails): implement preliminary design improvements for walletDetails view
This commit is contained in:
parent
debff3e8b9
commit
f7effa435d
|
@ -1,3 +1,30 @@
|
||||||
|
.wallet-details {
|
||||||
|
&__tx-amount {
|
||||||
|
font-size: 16px;
|
||||||
|
&--recent {
|
||||||
|
color: $mid-gray;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
&--received {
|
||||||
|
color: #30af6c;
|
||||||
|
}
|
||||||
|
&--sent {
|
||||||
|
color: $dark-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__tx-time {
|
||||||
|
color: $light-gray;
|
||||||
|
}
|
||||||
|
&__tx-title {
|
||||||
|
padding-top: 10px;
|
||||||
|
color: $dark-gray;
|
||||||
|
}
|
||||||
|
&__tx-icon {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#walletDetails {
|
#walletDetails {
|
||||||
.bar-header {
|
.bar-header {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -31,23 +58,8 @@
|
||||||
.item.item-footer {
|
.item.item-footer {
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
}
|
.tx-search:before {
|
||||||
|
font-size: 22px !important;
|
||||||
.wallet-details-release {
|
|
||||||
cursor: pointer;
|
|
||||||
cursor: hand;
|
|
||||||
background-color: #E9E9EC;
|
|
||||||
margin-top: -30px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding-top: 30px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
text-align: center;
|
|
||||||
text-color: #444;
|
|
||||||
span {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{opacity:0.8;fill:#F2F2F2;enable-background:new ;}
|
||||||
|
.st1{fill:none;stroke:#BEBEBE;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
|
||||||
|
</style>
|
||||||
|
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0416 17)" class="st0" cx="17" cy="17" rx="16.5" ry="16.5"/>
|
||||||
|
<path class="st1" d="M22.7,16.9H11.1 M18,21.9l4.9-5l-4.8-4.9"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 707 B |
|
@ -0,0 +1,11 @@
|
||||||
|
<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{opacity:0.8;fill:#EFFEF6;enable-background:new ;}
|
||||||
|
.st1{fill:none;stroke:#7FB197;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
|
||||||
|
</style>
|
||||||
|
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0416 17)" class="st0" cx="17" cy="17" rx="16.5" ry="16.5"/>
|
||||||
|
<path class="st1" d="M17.2,25.6V8.1 M9.6,18.5l7.4,7.4l7.3-7.1"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 708 B |
|
@ -0,0 +1,11 @@
|
||||||
|
<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{opacity:0.8;fill:#F2F2F2;enable-background:new ;}
|
||||||
|
.st1{fill:none;stroke:#BEBEBE;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M5.3,28.7c-6.4-6.4-6.4-16.9,0-23.3s16.9-6.4,23.3,0s6.4,16.9,0,23.3S11.8,35.1,5.3,28.7z"/>
|
||||||
|
<path class="st1" d="M17.2,9.4v16.5 M9.6,15.5l7.4-7.4l7.3,7.1"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 700 B |
|
@ -5,7 +5,7 @@
|
||||||
</ion-nav-back-button>
|
</ion-nav-back-button>
|
||||||
<ion-nav-buttons side="secondary">
|
<ion-nav-buttons side="secondary">
|
||||||
<button class="button back-button" ng-click="startSearch(); openSearchModal()">
|
<button class="button back-button" ng-click="startSearch(); openSearchModal()">
|
||||||
<i class="icon ion-ios-search-strong"></i>
|
<i class="icon ion-ios-search tx-search"></i>
|
||||||
</button>
|
</button>
|
||||||
</ion-nav-buttons>
|
</ion-nav-buttons>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
|
@ -128,9 +128,8 @@
|
||||||
<div class="list" ng-show="txHistory[0]">
|
<div class="list" ng-show="txHistory[0]">
|
||||||
<div class="item" ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
|
<div class="item" ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
|
||||||
<span class="item-note text-right">
|
<span class="item-note text-right">
|
||||||
<span class="size-16" ng-class="{'text-bold': btx.recent}">
|
<span class="wallet-details__tx-amount" ng-class="{'wallet-details__tx-amount--recent': btx.recent, 'wallet-details__tx-amount--received': btx.action == 'received', 'wallet-details__tx-amount--sent': btx.action == 'sent'}">
|
||||||
<span ng-if="btx.action == 'received'">+</span>
|
<span ng-if="btx.action == 'sent'">–</span>
|
||||||
<span ng-if="btx.action == 'sent'">-</span>
|
|
||||||
<span class="size-12" ng-if="btx.action == 'invalid'" translate>
|
<span class="size-12" ng-if="btx.action == 'invalid'" translate>
|
||||||
(possible double spend)
|
(possible double spend)
|
||||||
</span>
|
</span>
|
||||||
|
@ -139,42 +138,42 @@
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<p>
|
<p>
|
||||||
<time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
|
<time class="wallet-details__tx-time" ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
|
||||||
<span translate class="text-warning"
|
<span translate class="text-warning"
|
||||||
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
|
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
|
||||||
Unconfirmed
|
Unconfirmed
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
<img class="left m10r" src="img/icon-receive-history.svg" alt="sync" width="40" ng-if="btx.action == 'received'">
|
<img class="wallet-details__tx-icon" src="img/icon-tx-received.svg" alt="sync" width="40" ng-if="btx.action == 'received'">
|
||||||
<img class="left m10r" src="img/icon-sent-history.svg" alt="sync" width="40" ng-if="btx.action == 'sent'">
|
<img class="wallet-details__tx-icon" src="img/icon-tx-sent.svg" alt="sync" width="40" ng-if="btx.action == 'sent'">
|
||||||
<img class="left m10r" src="img/icon-moved.svg" alt="sync" width="40" ng-if="btx.action == 'moved'">
|
<img class="wallet-details__tx-icon" src="img/icon-tx-moved.svg" alt="sync" width="40" ng-if="btx.action == 'moved'">
|
||||||
|
|
||||||
<h2 class="p10t">
|
<div class="wallet-details__tx-title">
|
||||||
<div ng-if="btx.action == 'received'">
|
<div ng-if="btx.action == 'received'">
|
||||||
<span class="ellipsis">
|
<span class="ellipsis">
|
||||||
<h2 ng-if="btx.note.body">{{btx.note.body}}</h2>
|
<div ng-if="btx.note.body">{{btx.note.body}}</div>
|
||||||
<h2 ng-if="!btx.note.body" translate> Received</h2>
|
<div ng-if="!btx.note.body" translate> Received</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-if="btx.action == 'sent'">
|
<div ng-if="btx.action == 'sent'">
|
||||||
<span class="ellipsis">
|
<span class="ellipsis">
|
||||||
<h2 ng-if="btx.message">{{btx.message}}</h2>
|
<div ng-if="btx.message">{{btx.message}}</div>
|
||||||
<h2 ng-if="!btx.message && btx.note.body">{{btx.note.body}}</h2>
|
<div ng-if="!btx.message && btx.note.body">{{btx.note.body}}</div>
|
||||||
<h2 ng-if="!btx.message && !btx.note.body && wallet.addressbook[btx.addressTo]">{{wallet.addressbook[btx.addressTo]}}</h2>
|
<div ng-if="!btx.message && !btx.note.body && wallet.addressbook[btx.addressTo]">{{wallet.addressbook[btx.addressTo]}}</div>
|
||||||
<h2 ng-if="!btx.message && !btx.note.body && !wallet.addressbook[btx.addressTo]" translate> Sent</h2>
|
<div ng-if="!btx.message && !btx.note.body && !wallet.addressbook[btx.addressTo]" translate> Sent</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-if="btx.action == 'moved'">
|
<div ng-if="btx.action == 'moved'">
|
||||||
<span class="ellipsis">
|
<span class="ellipsis">
|
||||||
<h2 ng-if="btx.note.body">{{btx.note.body}}</h2>
|
<div ng-if="btx.note.body">{{btx.note.body}}</div>
|
||||||
<h2 ng-if="!btx.note.body" translate>Moved</h2>
|
<div ng-if="!btx.note.body" translate>Moved</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="label tu warning radius" ng-if="btx.action == 'invalid'" translate>Invalid</span>
|
<span class="label tu warning radius" ng-if="btx.action == 'invalid'" translate>Invalid</span>
|
||||||
</h2>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ion-infinite-scroll
|
<ion-infinite-scroll
|
||||||
|
|
Loading…
Reference in New Issue