diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index d21cea34e..a44abe3a0 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -1,36 +1,24 @@
-
+

- Genesis - - - - - {{ blockHeight }} - - - + Block + Genesis + + + + - - Block - - - - - - - - - {{ blockHeight }} - - - - - - + {{ blockHeight }} + + + - +

diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index f047cbcfa..1a43013ae 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -111,7 +111,8 @@ h1 { .next-previous-blocks { font-size: 28px; - display: inline-block; + display: inline-flex; + flex-direction: row; @media (min-width: 768px) { font-size: 36px; } @@ -125,6 +126,21 @@ h1 { } } +.time-ltr .next-previous-blocks { + .nav-arrow { + transform: rotate(180deg); + } + .nav-arrow.next { + order: 2; + } + .block-link { + order: 1; + } + .nav-arrow.prev { + order: 0; + } +} + .disable { font-size: 28px; color: #393e5c73; diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index ac6d9b21e..2e6a73c62 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -57,6 +57,8 @@ export class BlockComponent implements OnInit, OnDestroy { nextBlockSubscription: Subscription = undefined; nextBlockSummarySubscription: Subscription = undefined; nextBlockTxListSubscription: Subscription = undefined; + timeLtrSubscription: Subscription; + timeLtr: boolean; @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent; @@ -80,6 +82,10 @@ export class BlockComponent implements OnInit, OnDestroy { this.network = this.stateService.network; this.itemsPerPage = this.stateService.env.ITEMS_PER_PAGE; + this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { + this.timeLtr = !!ltr; + }); + this.txsLoadingStatus$ = this.route.paramMap .pipe( switchMap(() => this.stateService.loadingIndicators$), @@ -277,10 +283,12 @@ export class BlockComponent implements OnInit, OnDestroy { }); this.keyNavigationSubscription = this.stateService.keyNavigation$.subscribe((event) => { - if (this.showPreviousBlocklink && event.key === 'ArrowRight' && this.nextBlockHeight - 2 >= 0) { + const prevKey = this.timeLtr ? 'ArrowLeft' : 'ArrowRight'; + const nextKey = this.timeLtr ? 'ArrowRight' : 'ArrowLeft'; + if (this.showPreviousBlocklink && event.key === prevKey && this.nextBlockHeight - 2 >= 0) { this.navigateToPreviousBlock(); } - if (event.key === 'ArrowLeft') { + if (event.key === nextKey) { if (this.showNextBlocklink) { this.navigateToNextBlock(); } else { @@ -298,6 +306,7 @@ export class BlockComponent implements OnInit, OnDestroy { this.blocksSubscription.unsubscribe(); this.networkChangedSubscription.unsubscribe(); this.queryParamsSubscription.unsubscribe(); + this.timeLtrSubscription.unsubscribe(); this.unsubscribeNextBlockSubscriptions(); } @@ -392,8 +401,8 @@ export class BlockComponent implements OnInit, OnDestroy { } setNextAndPreviousBlockLink(){ - if (this.latestBlock && this.blockHeight) { - if (this.blockHeight === 0){ + if (this.latestBlock) { + if (!this.blockHeight){ this.showPreviousBlocklink = false; } else { this.showPreviousBlocklink = true; 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 4202330b0..77313302f 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -36,6 +36,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { now = new Date().getTime(); timeOffset = 0; showMiningInfo = false; + timeLtrSubscription: Subscription; + timeLtr: boolean; blockWidth = 125; blockPadding = 30; @@ -72,6 +74,10 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url)); } + this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { + this.timeLtr = !!ltr; + }); + if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') { this.feeRounding = '1.0-1'; } @@ -160,8 +166,10 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { if (this.markIndex === undefined) { return; } + const prevKey = this.timeLtr ? 'ArrowLeft' : 'ArrowRight'; + const nextKey = this.timeLtr ? 'ArrowRight' : 'ArrowLeft'; - if (event.key === 'ArrowRight') { + if (event.key === prevKey) { if (this.mempoolBlocks[this.markIndex - 1]) { this.router.navigate([this.relativeUrlPipe.transform('mempool-block/'), this.markIndex - 1]); } else { @@ -173,7 +181,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { } }); } - } else if (event.key === 'ArrowLeft') { + } else if (event.key === nextKey) { if (this.mempoolBlocks[this.markIndex + 1]) { this.router.navigate([this.relativeUrlPipe.transform('/mempool-block/'), this.markIndex + 1]); } @@ -185,6 +193,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { this.markBlocksSubscription.unsubscribe(); this.blockSubscription.unsubscribe(); this.networkSubscription.unsubscribe(); + this.timeLtrSubscription.unsubscribe(); clearTimeout(this.resetTransitionTimeout); } diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index b0e018941..920f32dd9 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -6,6 +6,7 @@ import { BlockExtended, DifficultyAdjustment, OptimizedMempoolStats } from '../i import { Router, NavigationStart } from '@angular/router'; import { isPlatformBrowser } from '@angular/common'; import { map, shareReplay } from 'rxjs/operators'; +import { StorageService } from './storage.service'; interface MarkBlockState { blockHeight?: number; @@ -108,10 +109,12 @@ export class StateService { keyNavigation$ = new Subject(); blockScrolling$: Subject = new Subject(); + timeLtr: BehaviorSubject; constructor( @Inject(PLATFORM_ID) private platformId: any, private router: Router, + private storageService: StorageService, ) { const browserWindow = window || {}; // @ts-ignore @@ -147,6 +150,11 @@ export class StateService { } this.blockVSize = this.env.BLOCK_WEIGHT_UNITS / 4; + + this.timeLtr = new BehaviorSubject(this.storageService.getValue('time-preference-ltr') === 'true'); + this.timeLtr.subscribe((ltr) => { + this.storageService.setValue('time-preference-ltr', ltr ? 'true' : 'false'); + }); } setNetworkBasedonUrl(url: string) { diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index c4973d75c..dd06269d2 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -4,7 +4,7 @@ import { NgbCollapse, NgbCollapseModule, NgbRadioGroup, NgbTypeaheadModule } fro import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle, faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, - faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft } from '@fortawesome/free-solid-svg-icons'; + faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { MasterPageComponent } from '../components/master-page/master-page.component'; import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component'; @@ -291,6 +291,7 @@ export class SharedModule { library.addIcons(faFileAlt); library.addIcons(faRedoAlt); library.addIcons(faArrowAltCircleRight); + library.addIcons(faArrowsRotate); library.addIcons(faExternalLinkAlt); library.addIcons(faSortUp); library.addIcons(faCaretUp);