From adde1a86e4f357fc88bc13c974c78ab1f96f8c13 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 9 Jul 2024 08:57:09 +0000 Subject: [PATCH 1/6] [accelerator] fast track chevrons animation --- .../acceleration-timeline.component.html | 8 ++-- .../acceleration-timeline.component.scss | 48 +++++++++++++++++-- 2 files changed, 49 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html index 23462f8f7..f2eaad6bd 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html @@ -81,13 +81,13 @@
-
+
-
+
-
+
@@ -129,8 +129,8 @@
-
+
Accelerated  diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index 8648052f4..f3728ce99 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -52,7 +52,7 @@ .interval, .interval-spacer { width: 8em; - min-width: 5em; + min-width: 8em; max-width: 8em; height: 32px; display: flex; @@ -112,6 +112,28 @@ background: var(--tertiary); border-radius: 5px; + &.go-faster { + // background: + // linear-gradient(-135deg, var(--tertiary) 34%, transparent 34%), + // linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) 0 5px, + // linear-gradient(-225deg, var(--tertiary) 16%, transparent 16%) 0 -5px, + // linear-gradient(-225deg, var(--mainnet-alt) 66%, transparent 66%), + // var(--tertiary); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px; + border-radius: 0; + + &.right { + left: calc(50% + 5px); + margin-right: calc(-4em + 5px); + animation: goFasterRight 1s infinite linear; + } + &.left { + right: calc(50% + 5px); + margin-left: calc(-4em + 5px); + animation: goFasterLeft 1s infinite linear; + } + } + &.loading { animation: acceleratePulse 1s infinite; } @@ -131,7 +153,12 @@ left: -5px; top: -73px; transform: translateX(120%); - background: var(--tertiary); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), + // linear-gradient(315deg, var(--tertiary) 16%, transparent 16%) 5px 0, + // linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) -5px 0, + // linear-gradient(45deg, var(--mainnet-alt) 66%, transparent 66%), + // var(--tertiary); + background-size: 10px 20px; &.down { border-top-left-radius: 10px; @@ -142,7 +169,7 @@ } &.loading { - animation: acceleratePulse 1s infinite; + animation: goFasterUp 1s infinite linear; } } } @@ -220,3 +247,18 @@ 50% { background-color: var(--mainnet-alt) } 100% { background-color: var(--tertiary) } } + +@keyframes goFasterUp { + 0% { background-position-y: 0; } + 100% { background-position-y: -40px; } +} + +@keyframes goFasterLeft { + 0% { background-position: left 0px bottom 0px } + 100% { background-position: left 40px bottom 0px; } +} + +@keyframes goFasterRight { + 0% { background-position: right 0 bottom 0px; } + 100% { background-position: right -40px bottom 0px; } +} From 9416fd25f4b72ed25639106c125c04005fc4b326 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 9 Jul 2024 08:58:03 +0000 Subject: [PATCH 2/6] [accelerator] tidy up chevron animation --- .../acceleration-timeline.component.html | 1 - .../acceleration-timeline.component.scss | 10 ---------- 2 files changed, 11 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html index f2eaad6bd..151181506 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html @@ -84,7 +84,6 @@
-
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index f3728ce99..dcc3b25fd 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -113,12 +113,6 @@ border-radius: 5px; &.go-faster { - // background: - // linear-gradient(-135deg, var(--tertiary) 34%, transparent 34%), - // linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) 0 5px, - // linear-gradient(-225deg, var(--tertiary) 16%, transparent 16%) 0 -5px, - // linear-gradient(-225deg, var(--mainnet-alt) 66%, transparent 66%), - // var(--tertiary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px; border-radius: 0; @@ -154,10 +148,6 @@ top: -73px; transform: translateX(120%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), - // linear-gradient(315deg, var(--tertiary) 16%, transparent 16%) 5px 0, - // linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) -5px 0, - // linear-gradient(45deg, var(--mainnet-alt) 66%, transparent 66%), - // var(--tertiary); background-size: 10px 20px; &.down { From 53da6549e2746e4815292f40bd1fe92016ecd764 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 9 Jul 2024 18:48:33 +0900 Subject: [PATCH 3/6] Remove unused CSS --- .../acceleration-timeline.component.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index dcc3b25fd..c784b7c6d 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -128,10 +128,6 @@ } } - &.loading { - animation: acceleratePulse 1s infinite; - } - &.left { right: 50%; } From 58f316971215db95213d8153f39724d8a61fd6c4 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 9 Jul 2024 18:48:58 +0900 Subject: [PATCH 4/6] Faster, synced chevron animation --- .../acceleration-timeline.component.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index c784b7c6d..e2138483c 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -113,18 +113,18 @@ border-radius: 5px; &.go-faster { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%239339f4;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px; border-radius: 0; &.right { left: calc(50% + 5px); margin-right: calc(-4em + 5px); - animation: goFasterRight 1s infinite linear; + animation: goFasterRight 0.8s infinite linear; } &.left { right: calc(50% + 5px); margin-left: calc(-4em + 5px); - animation: goFasterLeft 1s infinite linear; + animation: goFasterLeft 0.8s infinite linear; } } @@ -143,7 +143,7 @@ left: -5px; top: -73px; transform: translateX(120%); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), background-size: 10px 20px; &.down { @@ -155,7 +155,7 @@ } &.loading { - animation: goFasterUp 1s infinite linear; + animation: goFasterUp 0.8s infinite linear; } } } @@ -180,7 +180,7 @@ border-radius: 50%; background: white; &.accelerating { - animation: acceleratePulse 1s infinite; + animation: acceleratePulse 0.4s infinite; } } From b38bf0f7b675c034173e68a36a791864daa988d0 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 9 Jul 2024 01:17:38 +0900 Subject: [PATCH 5/6] Hide standard ETA data until proper ETA calculation gets implemented --- .../acceleration-timeline.component.html | 5 +++-- .../acceleration-timeline.component.ts | 20 ++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html index 151181506..b17b7511d 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html @@ -71,7 +71,7 @@
@if (eta) { - ~ ({{ accelerateRatio }}x faster) + ~ }
@@ -105,7 +105,8 @@
- ~ + + -
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts index ba687e093..38d48dd05 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts @@ -28,14 +28,16 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges { ngOnChanges(changes): void { this.now = Math.floor(new Date().getTime() / 1000); - if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) { - if (changes?.eta?.currentValue) { - if (changes?.acceleratedETA?.currentValue) { - this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now)); - } else if (changes?.standardETA?.currentValue) { - this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now)); - } - } - } + // Hide standard ETA while we don't have a proper standard ETA calculation, see https://github.com/mempool/mempool/issues/65 + + // if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) { + // if (changes?.eta?.currentValue) { + // if (changes?.acceleratedETA?.currentValue) { + // this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now)); + // } else if (changes?.standardETA?.currentValue) { + // this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now)); + // } + // } + // } } } From da0df70ad2a889cc05ee697f8c663870a0e1983c Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 9 Jul 2024 21:51:59 +0900 Subject: [PATCH 6/6] Acc timeline: More similar color logic with RBF --- .../acceleration-timeline.component.html | 12 +-- .../acceleration-timeline.component.scss | 79 ++++++++++--------- 2 files changed, 48 insertions(+), 43 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html index b17b7511d..1cf14a54d 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html @@ -45,9 +45,9 @@
-
+
-
+
Mined
@@ -61,7 +61,7 @@
} @else if (acceleratedETA) { } @else if (standardETA) { -
+
@@ -125,12 +125,12 @@
-
+
-
+
+
-
Accelerated  diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index e2138483c..dd815ba45 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -1,7 +1,10 @@ .acceleration-timeline { position: relative; width: 100%; - padding: 0.5em 0 1em; + padding: 1em 0; + &.lower-padding { + padding: 0.5em 0 1em; + } &::after, &::before { content: ''; @@ -135,29 +138,6 @@ left: 50%; } } - - .connector { - position: absolute; - height: 88px; - width: 10px; - left: -5px; - top: -73px; - transform: translateX(120%); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), - background-size: 10px 20px; - - &.down { - border-top-left-radius: 10px; - } - - &.up { - border-top-right-radius: 10px; - } - - &.loading { - animation: goFasterUp 0.8s infinite linear; - } - } } .nodes { @@ -172,16 +152,17 @@ margin-bottom: -8px; transform: translateY(-50%); border-radius: 50%; - padding: 2px; - + cursor: pointer; + padding: 4px; + background: transparent; + .shape { + position: relative; width: 100%; height: 100%; border-radius: 50%; background: white; - &.accelerating { - animation: acceleratePulse 0.4s infinite; - } + z-index: 1; } &.waiting { @@ -189,17 +170,41 @@ background: var(--grey); } } - - &.accelerated-selected { - .shape { - background: var(--tertiary); + + .connector { + position: absolute; + z-index: 0; + height: 88px; + width: 10px; + left: -5px; + top: -73px; + transform: translateX(120%); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), + background-size: 10px 20px; + + &.down { + border-top-left-radius: 10px; + } + + &.up { + border-top-right-radius: 10px; + } + + &.loading { + animation: goFasterUp 0.8s infinite linear; } } + } + + &.accelerated { + .shape-border { + animation: acceleratePulse 0.4s infinite; + } + } - &.mined-selected { - .shape { - background: var(--success); - } + &.selected { + .shape-border { + background: var(--mainnet-alt); } }