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

Expand toggle for RBF history view

Browse source
This commit is contained in:
natsee 2023-12-17 19:15:23 +01:00
parent f915ff3f91
commit 75b3bc6249
No known key found for this signature in database
GPG key ID: 233CF3150A89BED8
3 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
View file

@ -1,7 +1,7 @@
<div class="rbf-timeline box" [class.mined]="replacements.mined"> <div class="rbf-timeline box" [class.mined]="replacements.mined">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline" *ngFor="let timeline of rows"> <div class="timeline" *ngFor="let timeline of rows; let j = index">
<div class="intervals"> <div class="intervals" *ngIf="j < rowLimit || timelineExpanded">
<ng-container *ngFor="let cell of timeline; let i = index;"> <ng-container *ngFor="let cell of timeline; let i = index;">
<div class="node-spacer"></div> <div class="node-spacer"></div>
<ng-container *ngIf="i < timeline.length - 1"> <ng-container *ngIf="i < timeline.length - 1">
@ -13,7 +13,7 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>
<div class="nodes"> <div class="nodes" *ngIf="j < rowLimit || timelineExpanded">
<ng-container *ngFor="let cell of timeline; let i = index;"> <ng-container *ngFor="let cell of timeline; let i = index;">
<ng-container *ngIf="cell.replacement?.tx; else nonNode"> <ng-container *ngIf="cell.replacement?.tx; else nonNode">
<div class="node" <div class="node"
@ -50,6 +50,15 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
<button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
<span i18n="show-all">Show all</span>
(<ng-container *ngTemplateOutlet="xRemaining; context: {$implicit: rows.length - rowLimit}"></ng-container>)
</button>
<ng-template #collapseBtn>
<button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
</ng-template>
</div>
</div> </div>
<ng-template #nodeSpacer> <ng-template #nodeSpacer>
@ -72,3 +81,5 @@
[isConnector]="hoverConnector" [isConnector]="hoverConnector"
></app-rbf-timeline-tooltip> --> ></app-rbf-timeline-tooltip> -->
</div> </div>
<ng-template #xRemaining let-x i18n="x-remaining">{{ x }} remaining</ng-template>

6
frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
View file

@ -34,6 +34,12 @@
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
.toggle-wrapper {
width: 100%;
text-align: center;
margin: 1.25em 0 0;
}
} }
.intervals, .nodes { .intervals, .nodes {

6
frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
View file

@ -25,7 +25,9 @@ function isTimelineCell(val: RbfTree | TimelineCell): boolean {
export class RbfTimelineComponent implements OnInit, OnChanges { export class RbfTimelineComponent implements OnInit, OnChanges {
@Input() replacements: RbfTree; @Input() replacements: RbfTree;
@Input() txid: string; @Input() txid: string;
@Input() rowLimit: number = 5; // If explicitly set to 0, all timelines rows will be displayed by default
rows: TimelineCell[][] = []; rows: TimelineCell[][] = [];
timelineExpanded: boolean = this.rowLimit === 0;
hoverInfo: RbfTree | null = null; hoverInfo: RbfTree | null = null;
tooltipPosition = null; tooltipPosition = null;
@ -191,6 +193,10 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
return rows; return rows;
} }
toggleTimeline(expand: boolean): void {
this.timelineExpanded = expand;
}
scrollToSelected() { scrollToSelected() {
const node = document.getElementById('node-' + this.txid); const node = document.getElementById('node-' + this.txid);
if (node) { if (node) {