-
+
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 569f464a5..3b1347cea 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -15,6 +15,10 @@
text-decoration: none;
}
+.blockLink.disabled {
+ pointer-events: none;
+}
+
.mined-block {
position: absolute;
top: 0px;
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 3dcac5b78..281081876 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -41,7 +41,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
};
constructor(
- private stateService: StateService,
+ public stateService: StateService,
private router: Router,
private cd: ChangeDetectorRef,
) { }
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index efbdb31ef..fc71bd202 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -18,6 +18,11 @@
.blockchain-wrapper {
overflow: hidden;
height: 250px;
+
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* Standard */
}
.position-container {
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 680563b4c..ca3a7270f 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -3,7 +3,8 @@
-
+
~{{ projectedBlock.medianFee | number:feeRounding }}
sat/vB
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 92c40c73b..68ed1e26c 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -117,6 +117,10 @@
z-index: 10;
}
+.blockLink.disabled {
+ pointer-events: none;
+}
+
.blockLink:hover {
text-decoration: none;
}
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index cf8eb80ad..9d7f39ba2 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@@ -8,8 +8,11 @@
0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!
-
-
+
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index ec2b41472..9fe4e44e0 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -1,8 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
import { WebsocketService } from 'src/app/services/websocket.service';
import { StateService } from 'src/app/services/state.service';
import { specialBlocks } from 'src/app/app.constants';
-import { takeLast } from 'rxjs/operators';
@Component({
selector: 'app-start',
@@ -16,6 +15,9 @@ export class StartComponent implements OnInit {
countdown = 0;
specialEvent = false;
eventName = '';
+ mouseDragStartX: number;
+ blockchainScrollLeftInit: number;
+ @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
constructor(
private websocketService: WebsocketService,
@@ -50,4 +52,27 @@ export class StartComponent implements OnInit {
});
}
+ onMouseDown(event: MouseEvent) {
+ this.mouseDragStartX = event.clientX;
+ this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
+ }
+ onDragStart(event: MouseEvent) { // Ignore Firefox annoying default drag behavior
+ event.preventDefault();
+ }
+
+ // We're catching the whole page event here because we still want to scroll blocks
+ // even if the mouse leave the blockchain blocks container. Same idea for mouseup below.
+ @HostListener('document:mousemove', ['$event'])
+ onMouseMove(event: MouseEvent): void {
+ if (this.mouseDragStartX != null) {
+ this.stateService.setBlockScrollingInProgress(true);
+ this.blockchainContainer.nativeElement.scrollLeft =
+ this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX
+ }
+ }
+ @HostListener('document:mouseup', [])
+ onMouseUp() {
+ this.mouseDragStartX = null;
+ this.stateService.setBlockScrollingInProgress(false);
+ }
}
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 20b28f2e5..604bb6a87 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -89,6 +89,8 @@ export class StateService {
markBlock$ = new ReplaySubject
();
keyNavigation$ = new Subject();
+ blockScrolling$: Subject = new Subject();
+
constructor(
@Inject(PLATFORM_ID) private platformId: any,
private router: Router,
@@ -176,4 +178,8 @@ export class StateService {
if (!prop) { return false; }
return document[prop];
}
+
+ setBlockScrollingInProgress(value: boolean) {
+ this.blockScrolling$.next(value);
+ }
}