GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix chunked-address rtl display

Browse source
This commit is contained in:
Mononaut 2026-02-21 06:00:21 +00:00
parent 861e892766
commit 65e1496f54
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
3 changed files with 23 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/app/shared/components/chunked-address/chunked-address.component.html
View file

@ -1,12 +1,12 @@
<div class="address" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
<ng-container *ngIf="link">
<a [routerLink]="link" [queryParams]="queryParams" class="address-link" [target]="external ? '_blank' : '_self'" [class.disabled]="disabled">
<ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
<ng-container *ngTemplateOutlet="truncated"></ng-container>
</a>
</ng-container>
<ng-container *ngIf="!link">
<ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
<ng-container *ngTemplateOutlet="truncated"></ng-container>
</ng-container>
<app-clipboard
@ -27,38 +27,21 @@
<ng-template #plain>{{ chunk.text }}</ng-template>
</ng-template>
<ng-template #ltrTruncated>
<span class="first">
<ng-container *ngIf="headChunks.length; else simpleHead">
<span *ngFor="let chunk of headChunks" [class.partial]="chunk.text.length < chunkSize"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
</ng-container>
<ng-template #simpleHead>{{ address.slice(0, -lastChars) }}</ng-template>
</span>
<span class="last">
<ng-container *ngIf="tailChunks.length; else simpleTail">
<span *ngIf="(address.length - lastChars) % (chunkSize * 2) >= chunkSize" class="hidden"></span>
<span *ngFor="let chunk of tailChunks"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
</ng-container>
<ng-template #simpleTail>{{ address.slice(-lastChars) }}</ng-template>
</span>
<div class="hidden-content">{{ address }}</div>
</ng-template>
<ng-template #rtlTruncated>
<span class="first">
<ng-container *ngIf="tailChunks.length; else simpleTailRTL">
<span *ngFor="let chunk of tailChunks" [class.partial]="chunk.text.length < chunkSize"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
<ng-template #truncated>
<div class="address-content">
<span class="first">
<ng-container *ngIf="headChunks.length; else simpleHead">
<span *ngFor="let chunk of headChunks" [class.partial]="chunk.text.length < chunkSize"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
</ng-container>
<ng-template #simpleTailRTL>{{ address.slice(-lastChars) }}</ng-template>
</span>
<span class="last">
<ng-container *ngIf="headChunks.length; else simpleHeadRTL">
<ng-template #simpleHead>{{ address.slice(0, -lastChars) }}</ng-template>
</span>
<span class="last">
<ng-container *ngIf="tailChunks.length; else simpleTail">
<span *ngIf="(address.length - lastChars) % (chunkSize * 2) >= chunkSize" class="hidden"></span>
<span *ngFor="let chunk of headChunks"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
<span *ngFor="let chunk of tailChunks"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
</ng-container>
<ng-template #simpleHeadRTL>{{ address.slice(0, -lastChars) }}</ng-template>
</span>
<div class="hidden-content">{{ address }}</div>
<ng-template #simpleTail>{{ address.slice(-lastChars) }}</ng-template>
</span>
<div class="hidden-content">{{ address }}</div>
</div>
</ng-template>

10
frontend/src/app/shared/components/chunked-address/chunked-address.component.scss
View file

@ -6,17 +6,18 @@
position: relative;
font-family: monospace;
.address-link {
.address-link, .address-content {
direction: ltr;
display: flex;
flex-direction: row;
align-items: baseline;
flex-shrink: 1;
overflow: hidden;
min-width: 0;
}
&:hover {
filter: brightness(0.85);
}
.address-link:hover {
filter: brightness(0.85);
}
.first {
@ -34,6 +35,7 @@
}
.first, .last {
direction: ltr;
> span {
padding-inline-end: 2px;
&:nth-child(even) {

11
frontend/src/app/shared/components/chunked-address/chunked-address.component.ts
View file

@ -1,4 +1,4 @@
import { Component, Input, ChangeDetectionStrategy, OnChanges, LOCALE_ID, Inject } from '@angular/core';
import { Component, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { AddressMatch } from '@app/shared/address-utils';
interface AddressChunk {
@ -27,7 +27,6 @@ export class ChunkedAddressComponent implements OnChanges {
@Input() disabled: boolean = false;
@Input() showClipboard: boolean = false;
@Input() chunkSize = 4;
rtl: boolean;
headChunks: AddressChunk[] = [];
tailChunks: AddressChunk[] = [];
@ -41,14 +40,6 @@ export class ChunkedAddressComponent implements OnChanges {
matchColor: string = 'var(--primary)';
constructor(
@Inject(LOCALE_ID) private locale: string
) {
if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
this.rtl = true;
}
}
ngOnChanges(): void {
if (this.similarity) {
this.matchColor = this.groupColors[this.similarity.group % (this.groupColors.length)];