machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2973 from mempool/mononaut/back-to-tip

Browse Source 
Add button to scroll back to tip of blockchain
This commit is contained in:
softsimon 2023-01-27 16:25:15 +04:00 committed by GitHub
commit 22cd20bef2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/app/components/start/start.component.html
View File

@ -8,12 +8,17 @@
<div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div> <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 <div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr">
(mousedown)="onMouseDown($event)" <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
(dragstart)="onDragStart($event)" (mousedown)="onMouseDown($event)"
(scroll)="onScroll($event)" (dragstart)="onDragStart($event)"
> (scroll)="onScroll($event)"
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain> >
<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> </div>
<router-outlet></router-outlet> <router-outlet></router-outlet>

37
frontend/src/app/components/start/start.component.scss
View File

@ -12,6 +12,43 @@
display: none; 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 { .warning-label {
position: relative; position: relative;
text-align: center; text-align: center;

4
frontend/src/app/components/start/start.component.ts
View File

@ -250,6 +250,10 @@ export class StartComponent implements OnInit, OnDestroy {
}; };
} }
resetScroll(): void {
this.scrollToBlock(this.chainTip);
}
getPageIndexOf(height: number): number { getPageIndexOf(height: number): number {
const delta = this.chainTip - 8 - height; const delta = this.chainTip - 8 - height;
return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1); return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);

3
frontend/src/app/shared/shared.module.ts
View File

@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle, 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, 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 { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MasterPageComponent } from '../components/master-page/master-page.component'; import { MasterPageComponent } from '../components/master-page/master-page.component';
import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component'; import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@ -290,6 +290,7 @@ export class SharedModule {
library.addIcons(faRedoAlt); library.addIcons(faRedoAlt);
library.addIcons(faArrowAltCircleRight); library.addIcons(faArrowAltCircleRight);
library.addIcons(faArrowsRotate); library.addIcons(faArrowsRotate);
library.addIcons(faCircleLeft);
library.addIcons(faExternalLinkAlt); library.addIcons(faExternalLinkAlt);
library.addIcons(faSortUp); library.addIcons(faSortUp);
library.addIcons(faCaretUp); library.addIcons(faCaretUp);