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

Fix timeline tooltip on mobile

Browse Source
This commit is contained in:
natsoni 2024-09-27 18:51:08 +02:00
parent 676abf58fd
commit 0928d64e1e
No known key found for this signature in database
GPG Key ID: C65917583181743B
4 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
View File

@ -1,11 +1,11 @@
<div
#tooltip
*ngIf="accelerationInfo && tooltipPosition !== null"
class="acceleration-tooltip"
[style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'"
[style.visibility]="accelerationInfo ? 'visible' : 'hidden'"
[style.left]="tooltipPosition?.x + 'px'"
[style.top]="tooltipPosition?.y + 'px'"
>
<table>
<table *ngIf="accelerationInfo">
<tbody>
<tr>
<td class="label" i18n="transaction.status|Transaction Status">Status</td>
@ -52,8 +52,7 @@
class="pool-logo"
[style.opacity]="accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1'"
[src]="'/resources/mining-pools/' + accelerationInfo.poolsData[pool].slug + '.svg'"
onError="this.src = '/resources/mining-pools/default.svg'"
[alt]="'Logo of ' + pool.name + ' mining pool'">
onError="this.src = '/resources/mining-pools/default.svg'">
<br *ngIf="i % 6 === 5">
</ng-container>
</td>

14
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
import { Component, ElementRef, ViewChild, Input, OnChanges, HostListener } from '@angular/core';
@Component({
selector: 'app-acceleration-timeline-tooltip',
@ -10,6 +10,7 @@ export class AccelerationTimelineTooltipComponent implements OnChanges {
@Input() cursorPosition: { x: number, y: number };
tooltipPosition: any = null;
yScroll = window.scrollY;
@ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
@ -21,6 +22,9 @@ export class AccelerationTimelineTooltipComponent implements OnChanges {
let y = changes.cursorPosition.currentValue.y + 20;
if (this.tooltipElement) {
const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
if (this.accelerationInfo?.status !== 'seen') {
elementBounds.width = 370; // ugly hack to handle varying width due to pools logo loading
}
if ((x + elementBounds.width) > (window.innerWidth - 10)) {
x = Math.max(0, window.innerWidth - elementBounds.width - 10);
}
@ -35,4 +39,12 @@ export class AccelerationTimelineTooltipComponent implements OnChanges {
hasPoolsData(): boolean {
return Object.keys(this.accelerationInfo.poolsData).length > 0;
}
@HostListener('window:scroll', ['$event'])
onWindowScroll(): void {
if (this.tooltipPosition) {
this.tooltipPosition.y = this.tooltipPosition.y - (window.scrollY - this.yScroll);
}
this.yScroll = window.scrollY;
}
}

15
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
View File

@ -58,8 +58,8 @@
<div class="nodes">
<div class="node" [id]="'first-seen'">
<div class="seen-to-acc right"></div>
<div class="shape-border hovering" (pointerover)="onHover($event, 'seen');" (pointerout)="onBlur($event);">
<div class="shape"></div>
<div class="shape-border hovering">
<div id="step" class="shape" (pointerover)="onHover($event, 'seen');"></div>
</div>
<div class="status"><span class="badge badge-primary" i18n="transaction.first-seen|Transaction first seen">First seen</span></div>
<div class="time">
@ -80,8 +80,8 @@
} @else {
<div class="seen-to-acc right"></div>
}
<div class="shape-border hovering" (pointerover)="onHover($event, 'accelerated');" (pointerout)="onBlur($event);">
<div class="shape"></div>
<div class="shape-border hovering">
<div id="step" class="shape" (pointerover)="onHover($event, 'accelerated');"></div>
@if (!tx.status.confirmed) {
<div class="connector down loading"></div>
}
@ -113,11 +113,8 @@
} @else {
<div class="seen-to-acc left"></div>
}
<div class="shape-border"
[ngClass]="{'waiting': !tx.status.confirmed, 'hovering': tx.status.confirmed}"
(pointerover)="onHover($event, tx.status.confirmed ? 'mined' : null)"
(pointerout)="onBlur($event);">
<div class="shape"></div>
<div class="shape-border" [ngClass]="{'waiting': !tx.status.confirmed, 'hovering': tx.status.confirmed}">
<div id="step" class="shape" (pointerover)="onHover($event, tx.status.confirmed ? 'mined' : null)" ></div>
</div>
@if (tx.status.confirmed) {
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>

18
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
View File

@ -74,6 +74,7 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
}
onHover(event, status: string): void {
this.tooltipPosition = { x: event.clientX, y: event.clientY };
if (status === 'seen') {
this.hoverInfo = {
status,
@ -102,12 +103,19 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
}
}
onBlur(event): void {
this.hoverInfo = null;
}
@HostListener('pointermove', ['$event'])
onPointerMove(event) {
this.tooltipPosition = { x: event.clientX, y: event.clientY };
if (event.target.id === 'step') {
this.tooltipPosition = { x: event.clientX, y: event.clientY };
} else {
this.hoverInfo = null;
}
}
@HostListener('document:click', ['$event'])
clickAway(event) {
if (event.target.id !== 'step') {
this.hoverInfo = null;
}
}
}