machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support inner links in truncated string component

Browse Source
This commit is contained in:
Mononaut 2023-01-16 16:47:05 -06:00
parent 2a0aecff82
commit c7e51090e4
12 changed files with 56 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/bisq/bisq-address/bisq-address.component.html
View File

@ -1,11 +1,9 @@
<div class="container-xl">
<h1 i18n="shared.address">Address</h1>
<span class="address-link">
<a [routerLink]="['/address/' | relativeUrl, addressString]">
<app-truncate [text]="addressString" [lastChars]="8">
<app-clipboard [text]="addressString"></app-clipboard>
</app-truncate>
</a>
<app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
<app-clipboard [text]="addressString"></app-clipboard>
</app-truncate>
</span>
<br>

6
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
View File

@ -7,11 +7,11 @@
</div>
<span class="tx-link">
<a [routerLink]="['/tx/' | relativeUrl, bisqTx.id]" class="txid">
<app-truncate [text]="bisqTx.id" [lastChars]="12">
<span class="txid">
<app-truncate [text]="bisqTx.id" [lastChars]="12" [link]="['/tx/' | relativeUrl, bisqTx.id]">
<app-clipboard [text]="bisqTx.id"></app-clipboard>
</app-truncate>
</a>
</span>
</span>
<span class="grow"></span>
<div class="container-buttons">

4
frontend/src/app/components/address/address-preview.component.html
View File

@ -14,9 +14,7 @@
<tr *ngIf="addressInfo && addressInfo.unconfidential">
<td i18n="address.unconfidential">Unconfidential</td>
<td>
<a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
<app-truncate [text]="addressInfo.unconfidential" [lastChars]="7"></app-truncate>
</a>
<app-truncate [text]="addressInfo.unconfidential" [lastChars]="7" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]"></app-truncate>
</td>
</tr>
<ng-template [ngIf]="!address.electrum">

16
frontend/src/app/components/address/address.component.html
View File

@ -2,11 +2,9 @@
<div class="title-address">
<h1 i18n="shared.address">Address</h1>
<div class="tx-link">
<a [routerLink]="['/address/' | relativeUrl, addressString]" >
<app-truncate [text]="addressString" [lastChars]="8">
<app-clipboard [text]="addressString"></app-clipboard>
</app-truncate>
</a>
<app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
<app-clipboard [text]="addressString"></app-clipboard>
</app-truncate>
</div>
</div>
@ -22,11 +20,9 @@
<tr *ngIf="addressInfo && addressInfo.unconfidential">
<td i18n="address.unconfidential">Unconfidential</td>
<td>
<a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
<app-truncate [text]="addressInfo.unconfidential" [lastChars]="8">
<app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
</app-truncate>
</a>
<app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
<app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
</app-truncate>
</td>
</tr>
<ng-template [ngIf]="!address.electrum">

8
frontend/src/app/components/asset/asset.component.html
View File

@ -2,11 +2,9 @@
<div class="title-asset">
<h1 i18n="asset|Liquid Asset page title">Asset</h1>
<div class="tx-link">
<a [routerLink]="['/assets/asset/' | relativeUrl, assetString]">
<app-truncate [text]="assetString" [lastChars]="8">
<app-clipboard [text]="assetString"></app-clipboard>
</app-truncate>
</a>
<app-truncate [text]="assetString" [lastChars]="8" [link]="['/assets/asset/' | relativeUrl, assetString]">
<app-clipboard [text]="assetString"></app-clipboard>
</app-truncate>
</div>
</div>

23
frontend/src/app/components/transaction/transaction.component.html
View File

@ -3,20 +3,18 @@
<div class="title-block">
<div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
<span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
<a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]">
<app-truncate [text]="rbfTransaction.txid" [lastChars]="12"></app-truncate>
</a>
<app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
</div>
<ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
<h1 i18n="shared.transaction">Transaction</h1>
<span class="tx-link">
<a [routerLink]="['/tx/' | relativeUrl, txId]" class="txid">
<app-truncate [text]="txId" [lastChars]="12">
<span class="txid">
<app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
<app-clipboard [text]="txId"></app-clipboard>
</app-truncate>
</a>
</span>
</span>
<div class="container-buttons">
@ -158,9 +156,8 @@
<ng-template [ngIf]="cpfpInfo?.descendants?.length">
<tr *ngFor="let cpfpTx of cpfpInfo.descendants">
<td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
<td><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
<app-truncate [text]="cpfpTx.txid"></app-truncate>
</a>
<td>
<app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@ -171,9 +168,7 @@
<tr>
<td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
<td class="txids">
<a [routerLink]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]">
<app-truncate [text]="cpfpInfo.bestDescendant.txid"></app-truncate>
</a>
<app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
<td>{{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@ -184,9 +179,7 @@
<tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
<td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
<td class="txids">
<a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
<app-truncate [text]="cpfpTx.txid"></app-truncate>
</a>
<app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
</td>
<td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
<td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>

8
frontend/src/app/lightning/channel/channel-box/channel-box.component.html
View File

@ -1,11 +1,9 @@
<div class="mb-2 box-top">
<div class="box-left text-truncate">
<h3 class="mb-0 text-truncate">{{ channel.alias || '?' }}</h3>
<a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
<app-truncate [text]="channel.public_key" [lastChars]="6">
<app-clipboard [text]="channel.public_key"></app-clipboard>
</app-truncate>
</a>
<app-truncate [text]="channel.public_key" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, channel.public_key]">
<app-clipboard [text]="channel.public_key"></app-clipboard>
</app-truncate>
</div>
<div class="box-right">
<div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: channel.channels }"></ng-container></div>

8
frontend/src/app/lightning/channels-list/channels-list.component.html
View File

@ -46,11 +46,9 @@
<td class="alias text-left">
<div>{{ node.alias || '?' }}</div>
<div class="second-line">
<a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
<app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6">
<app-clipboard [text]="node.public_key" size="small"></app-clipboard>
</app-truncate>
</a>
<app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, node.public_key]">
<app-clipboard [text]="node.public_key" size="small"></app-clipboard>
</app-truncate>
</div>
</td>
<td class="alias text-left d-none d-md-table-cell">

6
frontend/src/app/lightning/node/node.component.html
View File

@ -3,11 +3,11 @@
<div class="title-container mb-2" *ngIf="!error">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<span class="tx-link">
<a class="node-id" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
<app-truncate [text]="node.public_key" [lastChars]="8">
<span class="node-id">
<app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
<app-clipboard [text]="node.public_key"></app-clipboard>
</app-truncate>
</a>
</span>
</span>
</div>

18
frontend/src/app/shared/components/truncate/truncate.component.html
View File

@ -1,9 +1,19 @@
<span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
<ng-container *ngIf="!rtl">
<span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
<ng-container *ngIf="link">
<a [routerLink]="link" class="truncate-link">
<ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
</a>
</ng-container>
<ng-container *ngIf="rtl">
<span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
<ng-container *ngIf="!link">
<ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
</ng-container>
<ng-content></ng-content>
</span>
<ng-template #ltrTruncated>
<span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
</ng-template>
<ng-template #rtlTruncated>
<span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
</ng-template>

8
frontend/src/app/shared/components/truncate/truncate.component.scss
View File

@ -4,6 +4,14 @@
flex-direction: row;
align-items: baseline;
.truncate-link {
display: flex;
flex-direction: row;
align-items: baseline;
flex-shrink: 1;
overflow: hidden;
}
.first {
flex-grow: 0;
flex-shrink: 1;

1
frontend/src/app/shared/components/truncate/truncate.component.ts
View File

@ -7,6 +7,7 @@ import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
})
export class TruncateComponent {
@Input() text: string;
@Input() link: any = null;
@Input() lastChars: number = 4;
@Input() maxWidth: number = null;
rtl: boolean;