- Genesis
-
-
-
-
- {{ blockHeight }}
-
-
-
+ 0; else genesis" i18n="shared.block-title">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);