mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #993 from yemel/feature/action-icons-tx
Feature/action icons tx
This commit is contained in:
Matias Alejo Garcia
commit
1f691d8a2f
119
css/main.css
119
css/main.css
|
|
@ -78,10 +78,13 @@
|
|||
font-family: 'Ubuntu', Helvetica, sans-serif !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 100;
|
||||
font-size: 24px;
|
||||
color: #2C3E50;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -93,7 +96,6 @@ h2 {
|
|||
h3 {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -103,6 +105,7 @@ h4 {
|
|||
body, html{
|
||||
height:100%;
|
||||
width:100%;
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
.off-canvas-wrap, .inner-wrap{
|
||||
|
|
@ -256,62 +259,56 @@ a:hover {
|
|||
}
|
||||
|
||||
.last-transactions {
|
||||
border: 1px solid #eee;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 1.25rem;
|
||||
background-color: #fff;
|
||||
margin-bottom: 2rem;
|
||||
background-color: #E8EAEF;
|
||||
}
|
||||
|
||||
.last-transactions-header {
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
padding: 1rem 0;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.last-transactions-footer {
|
||||
padding: 10px 0;
|
||||
padding: 1rem 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.last-transactions-content {
|
||||
background-color: #FDFCFC;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
padding: 1rem;
|
||||
background: #CED3DB;
|
||||
}
|
||||
|
||||
.last-transactions-content .box-status {
|
||||
text-align: center;
|
||||
font-size: 14;
|
||||
font-size: 13px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.last-transactions-content .box-copayer {
|
||||
width: 60px;
|
||||
width: 100px;
|
||||
margin-right: 20px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.last-transactions-content .copayer-ico {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.last-transactions-content .box-copayer .icon-inactive {
|
||||
color: #4C5B69;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border: 2px solid #7A8C9B;
|
||||
}
|
||||
|
||||
.last-transactions-content .box-copayer .icon-active {
|
||||
color: #ccc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.last-transactions-content .box-copayer .icon-active-check {
|
||||
color: #3FBC9C;
|
||||
background-color: #3FBC9C;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.last-transactions-content .box-copayer .icon-active-x {
|
||||
color: #C0392B;
|
||||
background-color: #C0392B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input-note {
|
||||
|
|
@ -630,17 +627,27 @@ input[type=number]::-webkit-outer-spin-button {
|
|||
}
|
||||
|
||||
.dr-notification-image.dr-notification-type-success {
|
||||
color: #B4D455;
|
||||
color: #1ABC9C;
|
||||
}
|
||||
|
||||
.dr-notification-image.success {
|
||||
color: #B4D455;
|
||||
color: #1ABC9C;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #1ABC9C;
|
||||
}
|
||||
|
||||
.label.success {
|
||||
background-color: #1ABC9C;
|
||||
}
|
||||
|
||||
.label.alert {
|
||||
background-color: #C0392A;
|
||||
padding: 0.3rem 0.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dr-notification-text {
|
||||
font-size: 12px;
|
||||
line-height: 120%;
|
||||
|
|
@ -662,7 +669,7 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
|
|||
}
|
||||
|
||||
.tooltip {
|
||||
background: #16A085;
|
||||
background: #1ABC9C;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
|
|
@ -670,7 +677,7 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
|
|||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #16A085;
|
||||
border: 1px solid #1ABC9C;
|
||||
text-overflow: ellipsis;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
|
@ -860,6 +867,10 @@ button.gray:focus,
|
|||
color: #2C3E50;
|
||||
}
|
||||
|
||||
button, .button, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.side-nav {padding: 0;}
|
||||
|
||||
.side-nav li {
|
||||
|
|
@ -932,6 +943,19 @@ button.gray:focus,
|
|||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.box-status {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.icon-status {
|
||||
background-color: #34495E;
|
||||
color: #7A8C9E;
|
||||
border-radius: 100%;
|
||||
padding: 0.17rem 0.3rem;
|
||||
float: left;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.has-error {
|
||||
color: #C0392A;
|
||||
}
|
||||
|
|
@ -964,8 +988,13 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
|
||||
.text-light {font-weight: 100;}
|
||||
.text-gray {color: #8597A7;}
|
||||
.text-black {color: #2C3E50;}
|
||||
.text-primary {color: #1ABC9C;}
|
||||
.text-secondary {color: #3498DB;}
|
||||
.text-white {color: #fff;}
|
||||
|
|
@ -973,6 +1002,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
|
||||
.footer-setup a.text-gray:hover {color: #fff;}
|
||||
a.text-gray:hover {color: #2C3E50;}
|
||||
a.text-black:hover {color: #213140;}
|
||||
a.text-primary:hover {color: #50E3C2;}
|
||||
a.text-secondary:hover {color: #4A90E2;}
|
||||
a.text-white:hover {color: #ccc;}
|
||||
|
|
@ -1003,6 +1033,35 @@ a.text-white:hover {color: #ccc;}
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.box-setup h3 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.joyride-tip-guide {
|
||||
width: 150px;
|
||||
background: #213140;
|
||||
top: -20px !important;
|
||||
left: 50px !important;
|
||||
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.40);
|
||||
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.40);
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.left {
|
||||
border-color: #213140 !important;
|
||||
border-top-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.joyride-content-wrapper {
|
||||
padding: 0.8rem
|
||||
}
|
||||
|
||||
.joyride-tip-guide p {
|
||||
margin: 0;
|
||||
color: #8597A7;
|
||||
}
|
||||
|
||||
.panel qrcode {
|
||||
float: left;
|
||||
width: 160px;
|
||||
|
|
|
|||
|
|
@ -166,6 +166,10 @@ angular.module('copayApp.controllers').controller('TransactionsController',
|
|||
}
|
||||
};
|
||||
|
||||
$scope.hasAction = function(actions, action) {
|
||||
return actions.hasOwnProperty('create');
|
||||
}
|
||||
|
||||
$scope.getShortNetworkName = function() {
|
||||
return config.networkName.substring(0, 4);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@
|
|||
<li data-ng-repeat="item in menu" ui-route="{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
|
||||
<a href="#!/{{item.link}}" ng-click="toggleCollapse()" class="db p20h">
|
||||
<i class="size-21 m20r {{item.icon}}"></i> {{item.title}}
|
||||
<span class="label alert round" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
|
||||
<span class="right">
|
||||
<span class="label alert" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
<div class="large-8 columns line-dashed-setup-v">
|
||||
<div class="box-setup">
|
||||
<h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
|
||||
<h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
|
||||
<form name="joinForm" ng-submit="join(joinForm)" novalidate>
|
||||
<label for="connectionId"> Wallet Setting </label>
|
||||
<input id="connectionId" type="text" class="small-9 columns" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required style="width:85%;">
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<label for="joinPassword"> User info</label>
|
||||
<label for="joinPassword"> User info </label>
|
||||
<input id="joinPassword" type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
|
||||
<input type="password" class="form-control"
|
||||
placeholder="Choose your password" name="joinPassword"
|
||||
|
|
|
|||
|
|
@ -8,76 +8,107 @@
|
|||
</ul>
|
||||
<div class="last-transactions" ng-repeat="tx in txs | paged">
|
||||
<div class="last-transactions-header">
|
||||
<div class="large-8 medium-8 small-12 columns">
|
||||
<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}} -
|
||||
{{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="large-8 medium-8 small-8 columns">
|
||||
<div ng-repeat="out in tx.outs">
|
||||
<div class="large-3 medium-3 small-3 columns">
|
||||
{{out.value | noFractionNumber}} {{$root.unitName}}</div>
|
||||
<p class="size-14 hide-for-small-only">{{out.value | noFractionNumber}} {{$root.unitName}}</p>
|
||||
<p class="size-12 show-for-small-only">{{out.value | noFractionNumber}} {{$root.unitName}}</p>
|
||||
</div>
|
||||
<div class="large-1 medium-1 small-2 columns fi-arrow-right"> </div>
|
||||
<div class="large-8 medium-8 small-7 columns ellipsis">
|
||||
<contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 small-12 columns text-right">
|
||||
{{tx.createdTs | amCalendar}}
|
||||
<div class="large-3 medium-3 small-4 columns text-right">
|
||||
<p class="size-12">{{tx.createdTs | amCalendar}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-transactions-content">
|
||||
<div class="box-note large-12" ng-show="tx.comment">
|
||||
"{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
|
||||
</div>
|
||||
|
||||
<div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
|
||||
<a href="#!/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
|
||||
<img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{cId}}">
|
||||
</a>
|
||||
<div class="box-status">
|
||||
<span ng-repeat="(action, ts) in actions">
|
||||
<a ng-if="action == 'create'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
|
||||
<a ng-if="actions.create" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
|
||||
<i class="fi-crown icon-status icon-active"></i>
|
||||
</a>
|
||||
<a ng-if="action == 'seen'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
|
||||
</a>
|
||||
<a ng-if="!actions.create"><i class="fi-crown icon-status"></i></a>
|
||||
|
||||
<a ng-if="actions.seen" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
|
||||
<i class="fi-eye icon-status icon-active"></i>
|
||||
</a>
|
||||
<a ng-if="action == 'sign'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
|
||||
<i class="fi-check icon-status icon-active-check"></i>
|
||||
</a>
|
||||
<a ng-if="action == 'rejected'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
|
||||
</a>
|
||||
<a ng-if="!actions.seen"><i class="fi-eye icon-status"></i></a>
|
||||
|
||||
<a ng-if="actions.rejected" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
|
||||
<i class="fi-x icon-status icon-active-x"></i>
|
||||
</a>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a ng-if="actions.sign" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
|
||||
<i class="fi-check icon-status icon-active-check"></i>
|
||||
</a>
|
||||
|
||||
<a ng-if="!actions.sign && !actions.rejected" href="#!/transactions" class="icon-status">
|
||||
<i class="fi-loop icon-rotate"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
{{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
|
||||
<p class="size-12 text-gray ellipsis">
|
||||
{{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-transactions-footer">
|
||||
<div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
|
||||
<div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
|
||||
<div ng-show="!tx.signedByUs && !tx.rejectedByUs && !tx.finallyRejected && tx.missingSignatures">
|
||||
<button class="secondary radius m10r" ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
|
||||
<i class="fi-check"></i> Sign
|
||||
</button>
|
||||
<button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
|
||||
<i class="fi-x" ></i> Reject
|
||||
</button>
|
||||
<div class="hide-for-small-only">
|
||||
<button class="primary m15r" ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
|
||||
<i class="fi-check"></i> Sign
|
||||
</button>
|
||||
<button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
|
||||
<i class="fi-x" ></i> Reject
|
||||
</button>
|
||||
</div>
|
||||
<div class="show-for-small-only row m10b">
|
||||
<button class="primary small-5 columns" ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
|
||||
<i class="fi-check"></i> Sign
|
||||
</button>
|
||||
<button class="warning small-5 columns" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
|
||||
<i class="fi-x" ></i> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="!tx.missingSignatures && !tx.sentTs">
|
||||
<button class="primary radius" ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
|
||||
<button class="primary" ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
|
||||
Broadcast Transaction
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="large-7 medium-7 columns text-right">
|
||||
<div ng-show="tx.finallyRejected" class="text-warning m10b">
|
||||
<div class="large-7 medium-5 small-12 columns text-right">
|
||||
<div ng-show="tx.finallyRejected" class="has-error m10b">
|
||||
Transaction finally rejected
|
||||
</div>
|
||||
<div ng-show="!tx.missingSignatures && tx.sentTs">
|
||||
<div class="success m10b">
|
||||
<div class="is-valid m10b">
|
||||
<strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
|
||||
</div>
|
||||
<div class="ellipsis small">
|
||||
|
|
|
|||
Loading…
Reference in New Issue