add expand toggle; add expanded output attributes
This commit is contained in:
parent
3b873f4841
commit
269bbfe549
@ -1,7 +1,7 @@
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col col-8>
|
||||
<span><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></span>
|
||||
<ion-icon name="add-circle" [hidden]="expanded" (click)="toggleExpanded()"></ion-icon><ion-icon name="remove-circle" [hidden]="!expanded" (click)="toggleExpanded()"></ion-icon> <span class="ellipsis"><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></span>
|
||||
</ion-col>
|
||||
<ion-col col-4 text-right>
|
||||
<div [hidden]="!tx.firstSeenTs">
|
||||
@ -33,17 +33,22 @@
|
||||
|
||||
</ion-col>
|
||||
<ion-col col-2 text-center>
|
||||
<div>
|
||||
>
|
||||
</div>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</ion-col>
|
||||
<ion-col col-5>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let vout of tx.vout">
|
||||
<a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a>
|
||||
<div item-end>
|
||||
{{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span>
|
||||
<div>
|
||||
<p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a></p>
|
||||
<div [hidden]="!expanded">
|
||||
<p><b>Type</b> {{vout.scriptPubKey.type}}</p>
|
||||
<p><b>scriptPubKey</b><br><span class="ellipsis">{{vout.scriptPubKey.asm}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div item-end>
|
||||
{{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-col>
|
||||
@ -51,7 +56,7 @@
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-6>
|
||||
<span [hidden]="tx.isCoinBase">Fee {{ tx.fees + 'BTC' }}</span>
|
||||
<span [hidden]="tx.isCoinBase">Fee {{ tx.fees + ' BTC' }}</span>
|
||||
</ion-col>
|
||||
<ion-col col-6 text-right>
|
||||
{{ tx.confirmations }} Confirmations
|
||||
|
||||
@ -1,3 +1,18 @@
|
||||
transaction {
|
||||
ion-grid {
|
||||
background-color: #F4F4F4;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
|
||||
ion-row {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@ import { NavController } from 'ionic-angular';
|
||||
})
|
||||
export class TransactionComponent {
|
||||
|
||||
public expanded: boolean = false;
|
||||
@Input() public tx: any = {};
|
||||
|
||||
constructor(private navCtrl: NavController) {
|
||||
@ -38,4 +39,8 @@ export class TransactionComponent {
|
||||
'addrStr': addrStr
|
||||
});
|
||||
}
|
||||
|
||||
public toggleExpanded(): void {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user