From d07bf307370b1ce6fd9fa7b129acf606a9d6b40d Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 29 Sep 2022 22:45:40 +0000 Subject: [PATCH] Reversible blockchain components --- .../blockchain-blocks.component.html | 4 +- .../blockchain-blocks.component.scss | 9 ++- .../blockchain-blocks.component.ts | 8 +++ .../blockchain/blockchain.component.html | 14 ++-- .../blockchain/blockchain.component.scss | 70 ++++++++++++++++--- .../blockchain/blockchain.component.ts | 20 +++++- .../mempool-blocks.component.html | 4 +- .../mempool-blocks.component.scss | 21 +++++- .../mempool-blocks.component.ts | 5 +- 9 files changed, 130 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index f1d2cca6d..6bd617435 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -1,4 +1,4 @@ -
+
-
+
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 8c108dff7..6b8430e2a 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -22,7 +22,7 @@ .mined-block { position: absolute; top: 0px; - transition: 2s; + transition: background 2s, left 2s, transform 1s; } .block-size { @@ -34,6 +34,7 @@ position: absolute; top: 0px; left: 40px; + transition: left 2s; } .block-body { @@ -145,3 +146,9 @@ opacity: 0; pointer-events : none; } + +.time-ltr { + .bitcoin-block { + transform: scaleX(-1); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 621d3b4b6..8ac925eaf 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -33,6 +33,8 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy { blocksFilled = false; transition = '1s'; showMiningInfo = false; + timeLtrSubscription: Subscription; + timeLtr: boolean; gradientColors = { '': ['#9339f4', '#105fb0'], @@ -61,6 +63,11 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy { this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url)); } + this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { + this.timeLtr = !!ltr; + this.cd.markForCheck(); + }); + if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') { this.feeRounding = '1.0-1'; } @@ -123,6 +130,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy { this.networkSubscription.unsubscribe(); this.tabHiddenSubscription.unsubscribe(); this.markBlockSubscription.unsubscribe(); + this.timeLtrSubscription.unsubscribe(); clearInterval(this.interval); } diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html index c49d08c5a..241f60c8a 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.html +++ b/frontend/src/app/components/blockchain/blockchain.component.html @@ -1,9 +1,13 @@ -
-
+
+
- - -
+
+ + +
+
+ +
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index 990cf9535..1e229e330 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -16,7 +16,7 @@ .blockchain-wrapper { height: 250px; - -webkit-user-select: none; /* Safari */ + -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ @@ -24,23 +24,46 @@ .position-container { position: absolute; - left: 50%; + left: 0; top: 75px; + transform: translateX(50vw); + transition: transform 1s; } .position-container.liquid, .position-container.liquidtestnet { - left: 420px; + transform: translateX(420px); +} + +@media (min-width: 768px) { + .blockchain-wrapper.time-ltr { + .position-container.liquid, .position-container.liquidtestnet { + transform: translateX(calc(100vw - 420px)); + } + } } @media (max-width: 767.98px) { - .position-container { - left: 95%; + .blockchain-wrapper { + .position-container { + transform: translateX(95vw); + } + .position-container.liquid, .position-container.liquidtestnet { + transform: translateX(50vw); + } + .position-container.loading { + transform: translateX(50vw); + } } - .position-container.liquid, .position-container.liquidtestnet { - left: 50%; - } - .position-container.loading { - left: 50%; + .blockchain-wrapper.time-ltr { + .position-container { + transform: translateX(5vw); + } + .position-container.liquid, .position-container.liquidtestnet { + transform: translateX(50vw); + } + .position-container.loading { + transform: translateX(50vw); + } } } @@ -57,4 +80,31 @@ width: 300px; left: -150px; top: 0px; +} + +.time-toggle { + color: white; + font-size: 1rem; + position: absolute; + bottom: -1.5em; + left: 1px; + transform: translateX(-50%); + background: none; + border: none; + outline: none; + margin: 0; + padding: 0; + transition: transform 1s; +} + +.blockchain-wrapper.ltr-transition .blocks-wrapper { + transition: transform 1s; +} + +.blockchain-wrapper.time-ltr .blocks-wrapper { + transform: scaleX(-1); +} + +.blockchain-wrapper.time-ltr .time-toggle { + transform: translateX(-50%) scaleX(-1); } \ No newline at end of file diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts index b8ae8d1d2..e99b3532d 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.ts +++ b/frontend/src/app/components/blockchain/blockchain.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; +import { Subscription } from 'rxjs'; import { StateService } from '../../services/state.service'; @Component({ @@ -7,8 +8,11 @@ import { StateService } from '../../services/state.service'; styleUrls: ['./blockchain.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BlockchainComponent implements OnInit { +export class BlockchainComponent implements OnInit, OnDestroy { network: string; + timeLtrSubscription: Subscription; + timeLtr: boolean = this.stateService.timeLtr.value; + ltrTransitionEnabled = false; constructor( public stateService: StateService, @@ -16,5 +20,17 @@ export class BlockchainComponent implements OnInit { ngOnInit() { this.network = this.stateService.network; + this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { + this.timeLtr = !!ltr; + }); + } + + ngOnDestroy() { + this.timeLtrSubscription.unsubscribe(); + } + + toggleTimeDirection() { + this.ltrTransitionEnabled = true; + this.stateService.timeLtr.next(!this.timeLtr); } } diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 77ca95b2f..9e70c6e74 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -1,5 +1,5 @@ -
+
@@ -45,7 +45,7 @@ -
+
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index c41cde3fc..8032be92f 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -1,7 +1,7 @@ .bitcoin-block { width: 125px; height: 125px; - transition: 2s; + transition: background 2s, right 2s, transform 1s; } .block-size { @@ -33,6 +33,7 @@ .block-body { text-align: center; + transition: transform 1s; } @keyframes opacityPulse { @@ -73,6 +74,7 @@ background-color: #232838; transform:skew(40deg); transform-origin:top; + transition: transform 1s, left 1s; } .bitcoin-block::before { @@ -83,9 +85,11 @@ top: -12px; left: -20px; background-color: #191c27; + z-index: -1; transform: skewY(50deg); transform-origin: top; + transition: transform 1s, left 1s; } .mempool-block.bitcoin-block::after { @@ -128,3 +132,18 @@ .blockLink:hover { text-decoration: none; } + +.time-ltr { + .bitcoin-block::after { + transform: skew(-40deg); + left: 20px; + } + + .bitcoin-block::before { + transform: skewY(-50deg); + left: 125px; + } + .block-body { + transform: scaleX(-1); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 77313302f..17236e2ca 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -46,7 +46,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { feeRounding = '1.0-0'; rightPosition = 0; - transition = '2s'; + transition = 'background 2s, right 2s, transform 1s'; markIndex: number; txFeePerVSize: number; @@ -76,6 +76,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { this.timeLtr = !!ltr; + this.cd.markForCheck(); }); if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') { @@ -278,7 +279,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.arrowVisible = true; this.resetTransitionTimeout = window.setTimeout(() => { - this.transition = '2s'; + this.transition = 'background 2s, right 2s, transform 1s'; this.cd.markForCheck(); }, 100); return;