Merge pull request #2957 from mempool/mononaut/improve-truncated-links

Support inner links in truncated string component
2024-11-20 10:21:52 +01:00 · 2023-01-17 03:22:30 +04:00 · 2023-01-17 03:22:30 +04:00 · 47d2a6d5c7
commit 47d2a6d5c7
parent 92b0b23765 8e954d59db
12 changed files with 59 additions and 60 deletions
--- a/frontend/src/app/bisq/bisq-address/bisq-address.component.html
+++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.html
@ -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>

--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
@ -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">
--- a/frontend/src/app/components/address/address-preview.component.html
+++ b/frontend/src/app/components/address/address-preview.component.html
@ -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">
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@ -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">
--- a/frontend/src/app/components/asset/asset.component.html
+++ b/frontend/src/app/components/asset/asset.component.html
@ -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>

--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@ -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>
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
+++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
@ -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>
--- a/frontend/src/app/lightning/channels-list/channels-list.component.html
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.html
@ -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">
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@ -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>

--- a/frontend/src/app/shared/components/truncate/truncate.component.html
+++ b/frontend/src/app/shared/components/truncate/truncate.component.html
@ -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>
--- a/frontend/src/app/shared/components/truncate/truncate.component.scss
+++ b/frontend/src/app/shared/components/truncate/truncate.component.scss
@ -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;
--- a/frontend/src/app/shared/components/truncate/truncate.component.ts
+++ b/frontend/src/app/shared/components/truncate/truncate.component.ts
@ -1,12 +1,14 @@
-import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
+import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-truncate',
  templateUrl: './truncate.component.html',
-  styleUrls: ['./truncate.component.scss']
+  styleUrls: ['./truncate.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TruncateComponent {
  @Input() text: string;
+  @Input() link: any = null;
  @Input() lastChars: number = 4;
  @Input() maxWidth: number = null;
  rtl: boolean;