From da51557960cfd1ba7a01dd1bab29de25018da885 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 26 Jan 2023 11:55:26 -0600
Subject: [PATCH] Add button to scroll back to tip of blockchain

---
 .../app/components/start/start.component.html | 17 ++++++---
 .../app/components/start/start.component.scss | 37 +++++++++++++++++++
 .../app/components/start/start.component.ts   |  4 ++
 frontend/src/app/shared/shared.module.ts      |  3 +-
 4 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index c3277cb9a..621cd959d 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@@ -8,12 +8,17 @@
 
 <div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
 
-<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
-  (mousedown)="onMouseDown($event)"
-  (dragstart)="onDragStart($event)"
-  (scroll)="onScroll($event)"
->
-  <app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
+<div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr">
+  <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
+    (mousedown)="onMouseDown($event)"
+    (dragstart)="onDragStart($event)"
+    (scroll)="onScroll($event)"
+  >
+    <app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
+  </div>
+  <div class="reset-scroll" [class.hidden]="pageIndex === 0" (click)="resetScroll()">
+    <fa-icon [icon]="['fas', 'circle-left']" [fixedWidth]="true" i18n-title="blocks.return-to-tip" title="Return to tip"></fa-icon>
+  </div>
 </div>
 
 <router-outlet></router-outlet>
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss
index 9a55855b1..f23235035 100644
--- a/frontend/src/app/components/start/start.component.scss
+++ b/frontend/src/app/components/start/start.component.scss
@@ -12,6 +12,43 @@
   display: none;
 }
 
+.blockchain-wrapper {
+  position: relative;
+
+  .reset-scroll {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 50px;
+    z-index: 10;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 500ms;
+    background: radial-gradient(#1d1f31 0%, transparent 50%);
+
+    &:hover {
+      opacity: 1;
+      transition: opacity 300ms;
+    }
+
+    &.hidden {
+      opacity: 0;
+      cursor: inherit;
+      pointer-events: none;
+      transition: opacity 500ms;
+    }
+  }
+
+  &.time-ltr .reset-scroll{
+    right: 10px;
+    transform: translateY(-50%) rotateZ(180deg);
+  }
+
+  &.time-rtl .reset-scroll {
+    left: 10px;
+  }
+}
+
 .warning-label {
   position: relative;
   text-align: center;
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index 558e6f909..f61a780a5 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -250,6 +250,10 @@ export class StartComponent implements OnInit, OnDestroy {
     };
   }
 
+  resetScroll(): void {
+    this.scrollToBlock(this.chainTip);
+  }
+
   getPageIndexOf(height: number): number {
     const delta = this.chainTip - 8 - height;
     return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 458eb2c8c..d82f03493 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 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, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft } 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';
@@ -290,6 +290,7 @@ export class SharedModule {
     library.addIcons(faRedoAlt);
     library.addIcons(faArrowAltCircleRight);
     library.addIcons(faArrowsRotate);
+    library.addIcons(faCircleLeft);
     library.addIcons(faExternalLinkAlt);
     library.addIcons(faSortUp);
     library.addIcons(faCaretUp);