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

Acc timeline: More similar color logic with RBF

Browse Source
This commit is contained in:
natsoni 2024-07-09 21:51:59 +09:00
parent b38bf0f7b6
commit da0df70ad2
No known key found for this signature in database
GPG Key ID: C65917583181743B
2 changed files with 48 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,9 +45,9 @@
<div class="interval-spacer"> <div class="interval-spacer">
<div class="acc-to-confirmed"></div> <div class="acc-to-confirmed"></div>
</div> </div>
<div class="node mined" [id]="'confirmed'" > <div class="node selected" [id]="'confirmed'">
<div class="acc-to-confirmed left" ></div> <div class="acc-to-confirmed left" ></div>
<div class="shape-border mined-selected"> <div class="shape-border">
<div class="shape"></div> <div class="shape"></div>
</div> </div>
<div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div> <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
@ -61,7 +61,7 @@
</div> </div>
} @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout --> } @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
} @else if (standardETA) { <!-- Accelerated --> } @else if (standardETA) { <!-- Accelerated -->
<div class="acceleration-timeline box"> <div class="acceleration-timeline box lower-padding">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline"> <div class="timeline">
<div class="intervals"> <div class="intervals">
@ -125,12 +125,12 @@
<div class="interval-spacer"> <div class="interval-spacer">
<div class="seen-to-acc"></div> <div class="seen-to-acc"></div>
</div> </div>
<div class="node" [id]="'accelerated'"> <div class="node accelerated" [id]="'accelerated'">
<div class="seen-to-acc left"></div> <div class="seen-to-acc left"></div>
<div class="seen-to-acc right"></div> <div class="seen-to-acc right"></div>
<div class="shape-border accelerated-selected"> <div class="shape-border">
<div class="shape"></div>
<div class="connector down loading"></div> <div class="connector down loading"></div>
<div class="shape accelerating position-relative"></div>
</div> </div>
<div class="time" style="margin-top: 3px;"> <div class="time" style="margin-top: 3px;">
<span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time> <span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>

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

@ -1,7 +1,10 @@
.acceleration-timeline { .acceleration-timeline {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 1em 0;
&.lower-padding {
padding: 0.5em 0 1em; padding: 0.5em 0 1em;
}
&::after, &::before { &::after, &::before {
content: ''; content: '';
@ -135,9 +138,42 @@
left: 50%; left: 50%;
} }
} }
}
.nodes {
position: relative;
margin-top: 1em;
.node {
.shape-border {
display: block;
margin: auto;
height: calc(1em + 8px);
width: calc(1em + 8px);
margin-bottom: -8px;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
padding: 4px;
background: transparent;
.shape {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: white;
z-index: 1;
}
&.waiting {
.shape {
background: var(--grey);
}
}
.connector { .connector {
position: absolute; position: absolute;
z-index: 0;
height: 88px; height: 88px;
width: 10px; width: 10px;
left: -5px; left: -5px;
@ -160,46 +196,15 @@
} }
} }
.nodes { &.accelerated {
position: relative;
margin-top: 1em;
.node {
.shape-border { .shape-border {
display: block;
margin: auto;
height: calc(1em + 8px);
width: calc(1em + 8px);
margin-bottom: -8px;
transform: translateY(-50%);
border-radius: 50%;
padding: 2px;
.shape {
width: 100%;
height: 100%;
border-radius: 50%;
background: white;
&.accelerating {
animation: acceleratePulse 0.4s infinite; animation: acceleratePulse 0.4s infinite;
} }
} }
&.waiting { &.selected {
.shape { .shape-border {
background: var(--grey); background: var(--mainnet-alt);
}
}
&.accelerated-selected {
.shape {
background: var(--tertiary);
}
}
&.mined-selected {
.shape {
background: var(--success);
}
} }
} }