mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

Reverse tx flow diagram for RTL locales

Browse source
This commit is contained in:
Mononaut 2022-11-21 11:59:45 +09:00
parent 7e01a22265
commit 6c1457e257
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
3 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
View file

@ -1,5 +1,5 @@
<div class="bowtie-graph">
<svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
<svg *ngIf="inputs && outputs" class="bowtie" [class.rtl]="dir === 'rtl'" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
<defs>
<marker id="input-arrow" viewBox="-5 -5 10 10"
refX="0" refY="0"

4
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
View file

@ -1,4 +1,8 @@
.bowtie {
&.rtl {
transform: scale(-1, 1);
}
.line {
fill: none;

17
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnInit, Input, OnChanges, HostListener } from '@angular/core';
import { Component, OnInit, Input, OnChanges, HostListener, Inject, LOCALE_ID } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Outspend, Transaction } from '../../interfaces/electrs.interface';
import { Router } from '@angular/router';
@ -50,6 +50,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
@Input() inputIndex: number;
@Input() outputIndex: number;
dir: 'rtl' | 'ltr' = 'ltr';
inputData: Xput[];
outputData: Xput[];
inputs: SvgLine[];
@ -90,7 +92,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
private relativeUrlPipe: RelativeUrlPipe,
private stateService: StateService,
private apiService: ApiService,
) { }
@Inject(LOCALE_ID) private locale: string,
) {
if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
this.dir = 'rtl';
}
}
ngOnInit(): void {
this.initGraph();
@ -420,7 +427,11 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
@HostListener('pointermove', ['$event'])
onPointerMove(event) {
this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
if (this.dir === 'rtl') {
this.tooltipPosition = { x: this.width - event.offsetX, y: event.offsetY };
} else {
this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
}
}
onHover(event, side, index): void {