anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1494 from cmgustavo/bug/04-ux

Browse source 
Bug/04 ux
This commit is contained in:
Ivan Socolsky 2014-10-01 09:39:57 -03:00
commit 70446c5ee7
3 changed files with 123 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

42
css/src/main.css
View file

@ -279,11 +279,11 @@ a:hover {
}
.last-transactions-header {
padding: 1rem;
padding: 0.5rem;
}
.last-transactions-footer {
padding: 1rem;
padding: 0.5rem;
overflow: hidden;
}
@ -293,6 +293,13 @@ a:hover {
background: #CED3DB;
}
table.last-transactions-content {
padding: 0;
border: 0;
background-color: #fff;
margin: 0;
}
.last-transactions-content .box-status {
font-size: 13px;
width: 30px;
@ -311,24 +318,41 @@ a:hover {
border: 2px solid #7A8C9B;
}
.last-transactions-content .box-copayer .icon-active {
.last-transactions-content .icon-active {
color: #fff;
}
.last-transactions-content .box-copayer .icon-active-check {
.last-transactions-content .icon-active-check {
background-color: #3FBC9C;
color: #fff;
}
.last-transactions-content .box-copayer .icon-active-x {
.last-transactions-content .icon-active-x {
background-color: #C0392B;
color: #fff;
}
.last-transactions-header .label, .last-transactions-footer .label {
white-space: normal;
text-align: left;
line-height: 1.2rem;
.private-message {
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #fff;
line-height: 20px;
}
.header-message {
background-color: #F8F8FB;
height: 18px;
}
.date-message {
background-color: #3C4E60;
color: #fff;
font-size: 12px;
padding: 2px 5px;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-ms-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
.input-note {

14
css/src/mobile.css
View file

@ -157,5 +157,19 @@
padding: 0 5px;
}
table.last-transactions-content td {
text-align: center;
}
table.last-transactions-content td.copayer-name {
text-align: left;
}
table.last-transactions-content .icon-status {
border-radius: 0;
padding: 0.1rem 0.3rem;
margin-bottom: 0;
}
}

135
views/includes/transaction.html
View file

@ -1,19 +1,13 @@
<div class="show-for-small-only header-message">
<span class="date-message">{{tx.createdTs | amCalendar}}</span>
</div>
<div class="last-transactions-header" ng-init="txIndex = $index">
<div class="private-message" ng-show="tx.comment">
<i class="fi-comment-quotes"></i>
<span class="text-light">{{tx.comment}}</span>
</div>
<div class="row collapse">
<div class="hide-for-small-only large-1 medium-1 columns">
<a class="text-black" ng-show="tx.comment">
<i class="fi-comment-quotes size-24" popover-animation="true" popover="{{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}" popover-title="{{tx.comment}}" popover-placement="right" popover-trigger="mouseenter"></i>
</a>
<a class="disable" ng-show="!tx.comment">
<i class="fi-comment-quotes size-24 text-gray"></i>
</a>
</div>
<div class="show-for-small-only small-12 columns m10b" ng-show="tx.comment">
<p class="size-14 label ">
{{tx.comment}} Created by <strong>{{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}</strong>
</p>
</div>
<div class="large-8 medium-8 small-9 columns">
<div class="large-9 medium-8 small-12 columns">
<div class="row collapse" ng-repeat="out in tx.outs">
<div class="large-3 medium-3 small-4 columns">
<div class="size-14 hide-for-small-only">
@ -39,13 +33,33 @@
</div>
</div>
<div class="large-3 medium-3 small-3 columns text-right">
<div class="large-3 medium-4 columns text-right hide-for-small-only">
<p class="size-12">{{tx.createdTs | amCalendar}}</p>
</div>
</div>
</div>
<div class="last-transactions-content">
<table class="last-transactions-content show-for-small-only">
<tbody>
<tr ng-repeat="c in tx.actionList">
<td class="copayer-name" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</td>
<td>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
<i ng-if="!c.actions.create" class="fi-crown icon-status"></i>
</td>
<td>
<i ng-if="c.actions.seen" class="fi-eye icon-status icon-active"></i>
<i ng-if="!c.actions.seen" class="fi-eye icon-status"></i>
</td>
<td>
<i ng-if="c.actions.rejected" class="fi-x icon-status icon-active-x"></i>
<i ng-if="c.actions.sign" class="fi-check icon-status icon-active-check"></i>
<i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="fi-loop icon-rotate"></i>
</td>
</tr>
</tbody>
</table>
<div class="last-transactions-content show-for-medium-up">
<div class="box-copayer" ng-repeat="c in tx.actionList">
<a class="has-tip">
<img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{c.cId}}">
@ -83,55 +97,58 @@
</div>
<div class="last-transactions-footer">
<div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
<div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures">
<div class="hide-for-small-only">
<button class="primary m15r" ng-click="sign(tx.ntxid)" ng-disabled="loading">
<i class="fi-check"></i> <span translate>Sign</span>
</button>
<button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading">
<i class="fi-x" ></i> <span translate>Reject</span>
</button>
<div class="row collapse">
<div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
<div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures">
<div class="hide-for-small-only">
<button class="primary m15r" ng-click="sign(tx.ntxid)" ng-disabled="loading">
<i class="fi-check"></i> <span translate>Sign</span>
</button>
<button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading">
<i class="fi-x" ></i> <span translate>Reject</span>
</button>
</div>
<div class="show-for-small-only row">
<button class="primary small-5 columns m10b" ng-click="sign(tx.ntxid)" ng-disabled="loading">
<i class="fi-check"></i> <span translate>Sign</span>
</button>
<button class="warning small-5 columns m10b" ng-click="reject(tx.ntxid)" ng-disabled="loading">
<i class="fi-x" ></i> <span translate>Reject</span>
</button>
</div>
</div>
<div class="show-for-small-only row m10b">
<button class="primary small-5 columns" ng-click="sign(tx.ntxid)" ng-disabled="loading">
<i class="fi-check"></i> <span translate>Sign</span>
</button>
<button class="warning small-5 columns" ng-click="reject(tx.ntxid)" ng-disabled="loading">
<i class="fi-x" ></i> <span translate>Reject</span>
<div ng-show="!tx.missingSignatures && !tx.sentTs">
<button class="primary" ng-click="send(tx.ntxid)" ng-disabled="loading"> <i class=".fi-upload-cloud"></i>
<span translate>Broadcast Transaction</span>
</button>
</div>
</div>
<div ng-show="!tx.missingSignatures && !tx.sentTs">
<button class="primary" ng-click="send(tx.ntxid)" ng-disabled="loading"> <i class=".fi-upload-cloud"></i>
<span translate>Broadcast Transaction</span>
</button>
</div>
</div>
<div class="large-7 medium-5 small-12 columns text-right">
<div translate ng-show="tx.finallyRejected" class="has-error m10b">
Transaction finally rejected
</div>
<div ng-show="!tx.missingSignatures && tx.sentTs">
<div class="is-valid m10b">
<strong translate>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
<div class="large-7 medium-5 small-12 columns text-right">
<div translate ng-show="tx.finallyRejected" class="has-error">
Transaction finally rejected
</div>
<div class="ellipsis small">
<span translate>Transaction ID</span>:
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="_blank">
{{tx.sentTxid}}
</a>
<div ng-show="!tx.missingSignatures && tx.sentTs">
<div class="is-valid">
<strong translate>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
</div>
<div class="ellipsis small m10t">
<span translate>Transaction ID</span>:
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="_blank">
{{tx.sentTxid}}
</a>
</div>
</div>
<div translate class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
One signature missing
</div>
<div translate class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
{{tx.missingSignatures}} signatures missing
</div>
<div class="ellipsis small text-gray show-for-large-up m5t">
<strong translate>Fee</strong>: {{tx.fee|noFractionNumber}} {{$root.wallet.settings.unitName}}
<strong translate>Proposal ID</strong>: {{tx.ntxid}}
</div>
</div>
<p translate class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
One signature missing
</p>
<p translate class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
{{tx.missingSignatures}} signatures missing</p>
<div class="ellipsis small text-gray">
<strong translate>Fee</strong>: {{tx.fee|noFractionNumber}} {{$root.wallet.settings.unitName}}
<strong translate>Proposal ID</strong>: {{tx.ntxid}}
</div>
</div>
</div>