feat(walletDetails): implement preliminary design improvements for walletDetails view

This commit is contained in:
Jason Dreyzehner 2016-10-18 21:10:17 -04:00
parent debff3e8b9
commit f7effa435d
5 changed files with 79 additions and 35 deletions

View File

@ -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 {
.bar-header {
border: 0;
@ -31,23 +58,8 @@
.item.item-footer {
font-weight: lighter;
}
}
.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;
.tx-search:before {
font-size: 22px !important;
}
}

11
www/img/icon-tx-moved.svg Normal file
View File

@ -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

View File

@ -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

11
www/img/icon-tx-sent.svg Normal file
View File

@ -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

View File

@ -5,7 +5,7 @@
</ion-nav-back-button>
<ion-nav-buttons side="secondary">
<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>
</ion-nav-buttons>
</ion-nav-bar>
@ -128,9 +128,8 @@
<div class="list" ng-show="txHistory[0]">
<div class="item" ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
<span class="item-note text-right">
<span class="size-16" ng-class="{'text-bold': btx.recent}">
<span ng-if="btx.action == 'received'">+</span>
<span ng-if="btx.action == 'sent'">-</span>
<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 == 'sent'"></span>
<span class="size-12" ng-if="btx.action == 'invalid'" translate>
(possible double spend)
</span>
@ -139,42 +138,42 @@
</span>
</span>
<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"
ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
Unconfirmed
</span>
</p>
</span>
<img class="left m10r" src="img/icon-receive-history.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="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-received.svg" alt="sync" width="40" ng-if="btx.action == 'received'">
<img class="wallet-details__tx-icon" src="img/icon-tx-sent.svg" alt="sync" width="40" ng-if="btx.action == 'sent'">
<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'">
<span class="ellipsis">
<h2 ng-if="btx.note.body">{{btx.note.body}}</h2>
<h2 ng-if="!btx.note.body" translate> Received</h2>
<div ng-if="btx.note.body">{{btx.note.body}}</div>
<div ng-if="!btx.note.body" translate> Received</div>
</span>
</div>
<div ng-if="btx.action == 'sent'">
<span class="ellipsis">
<h2 ng-if="btx.message">{{btx.message}}</h2>
<h2 ng-if="!btx.message && btx.note.body">{{btx.note.body}}</h2>
<h2 ng-if="!btx.message && !btx.note.body && wallet.addressbook[btx.addressTo]">{{wallet.addressbook[btx.addressTo]}}</h2>
<h2 ng-if="!btx.message && !btx.note.body && !wallet.addressbook[btx.addressTo]" translate> Sent</h2>
<div ng-if="btx.message">{{btx.message}}</div>
<div ng-if="!btx.message && btx.note.body">{{btx.note.body}}</div>
<div ng-if="!btx.message && !btx.note.body && wallet.addressbook[btx.addressTo]">{{wallet.addressbook[btx.addressTo]}}</div>
<div ng-if="!btx.message && !btx.note.body && !wallet.addressbook[btx.addressTo]" translate> Sent</div>
</span>
</div>
<div ng-if="btx.action == 'moved'">
<span class="ellipsis">
<h2 ng-if="btx.note.body">{{btx.note.body}}</h2>
<h2 ng-if="!btx.note.body" translate>Moved</h2>
<div ng-if="btx.note.body">{{btx.note.body}}</div>
<div ng-if="!btx.note.body" translate>Moved</div>
</span>
</div>
<span class="label tu warning radius" ng-if="btx.action == 'invalid'" translate>Invalid</span>
</h2>
</div>
</div>
</div>
<ion-infinite-scroll