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

Improve step colors in timeline

Browse Source
This commit is contained in:
natsoni 2024-07-05 16:30:12 +09:00
parent 4cd70941f7
commit 1710ae0503
No known key found for this signature in database
GPG Key ID: C65917583181743B
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,10 +39,10 @@
<div class="node" [id]="'accelerated'"> <div class="node" [id]="'accelerated'">
<div class="seen-to-acc left" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div> <div class="seen-to-acc left" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
<div class="acc-to-confirmed right" [class.loading]="tx.acceleration && !tx.status.confirmed"></div> <div class="acc-to-confirmed right" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.accelerated-selected]="tx.acceleration && !tx.status.confirmed"> <a class="shape-border" [class.accelerated-selected]="tx.acceleration && !tx.status.confirmed" [class.waiting]="!tx.acceleration && !tx.status.confirmed ? 'waiting' : ''">
<div class="shape"></div> <div class="shape"></div>
</a> </a>
<div class="status" [style]="!tx.acceleration && !tx.status.confirmed ? 'opacity: 0.5' : ''"><span class="badge badge-accelerated">Accelerated</span></div> <div class="status"><span class="badge" [class]="tx.status.confirmed || tx.acceleration ? 'badge-accelerated' : 'badge-waiting'">Accelerated</span></div>
<div class="time"> <div class="time">
<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time> <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
</div> </div>
@ -52,10 +52,10 @@
</div> </div>
<div class="node" [id]="'confirmed'" [class.mined]="tx.status.confirmed"> <div class="node" [id]="'confirmed'" [class.mined]="tx.status.confirmed">
<div class="acc-to-confirmed left" [class.loading]="tx.acceleration && !tx.status.confirmed"></div> <div class="acc-to-confirmed left" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
<a class="shape-border" [class.mined-selected]="tx.status.confirmed"> <a class="shape-border" [class.mined-selected]="tx.status.confirmed" [class.waiting]="!tx.status.confirmed ? 'waiting' : ''">
<div class="shape"></div> <div class="shape"></div>
</a> </a>
<div class="status" [style]="!tx.status.confirmed ? 'opacity: 0.5' : ''"><span class="badge badge-success">Mined</span></div> <div class="status"><span class="badge" [class]="tx.status.confirmed ? 'badge-success' : 'badge-waiting'">Mined</span></div>
<div class="time"> <div class="time">
@if (tx.status.block_time) { @if (tx.status.block_time) {
<app-time kind="since" [time]="tx.status.block_time"></app-time> <app-time kind="since" [time]="tx.status.block_time"></app-time>

12
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
View File

@ -145,6 +145,12 @@
transition: background-color 300ms, border 300ms; transition: background-color 300ms, border 300ms;
} }
&.waiting {
.shape {
background: var(--grey);
}
}
&.sent-selected { &.sent-selected {
.shape { .shape {
background: var(--primary); background: var(--primary);
@ -167,6 +173,12 @@
.status { .status {
margin-top: -64px; margin-top: -64px;
.badge.badge-waiting {
opacity: 0.5;
background-color: var(--grey);
color: white;
}
.badge.badge-accelerated { .badge.badge-accelerated {
background-color: var(--tertiary); background-color: var(--tertiary);
color: white; color: white;