add expand toggle; add expanded output attributes

This commit is contained in:
Darren Nelsen 2017-08-08 13:11:36 -04:00
parent 3b873f4841
commit 269bbfe549
3 changed files with 33 additions and 8 deletions

View File

@ -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>
&gt;
</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

View File

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

View File

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