machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages 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"> <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> <defs>
<marker id="input-arrow" viewBox="-5 -5 10 10" <marker id="input-arrow" viewBox="-5 -5 10 10"
refX="0" refY="0" refX="0" refY="0"

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

@ -1,4 +1,8 @@
.bowtie { .bowtie {
&.rtl {
transform: scale(-1, 1);
}
.line { .line {
fill: none; 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 { StateService } from '../../services/state.service';
import { Outspend, Transaction } from '../../interfaces/electrs.interface'; import { Outspend, Transaction } from '../../interfaces/electrs.interface';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -50,6 +50,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
@Input() inputIndex: number; @Input() inputIndex: number;
@Input() outputIndex: number; @Input() outputIndex: number;
dir: 'rtl' | 'ltr' = 'ltr';
inputData: Xput[]; inputData: Xput[];
outputData: Xput[]; outputData: Xput[];
inputs: SvgLine[]; inputs: SvgLine[];
@ -90,7 +92,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
private relativeUrlPipe: RelativeUrlPipe, private relativeUrlPipe: RelativeUrlPipe,
private stateService: StateService, private stateService: StateService,
private apiService: ApiService, 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 { ngOnInit(): void {
this.initGraph(); this.initGraph();
@ -420,7 +427,11 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
@HostListener('pointermove', ['$event']) @HostListener('pointermove', ['$event'])
onPointerMove(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 { onHover(event, side, index): void {