highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-05-03 16:50:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2655 from mononaut/fix-tv-ltr

Browse Source 
Fix mirrored blocks in TV view in LTR time mode
This commit is contained in:
softsimon 2022-10-23 23:05:33 +04:00 committed by GitHub
commit e14fff45d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/television/television.component.html
View File

@ -11,11 +11,15 @@
[showZoom]="false" [showZoom]="false"
></app-mempool-graph> ></app-mempool-graph>
</div> </div>
<div class="blockchain-wrapper"> <div class="blockchain-wrapper" [dir]="timeLtr ? 'rtl' : 'ltr'" [class.time-ltr]="timeLtr">
<div class="position-container"> <div class="position-container">
<span>
<div class="blocks-wrapper">
<app-mempool-blocks></app-mempool-blocks> <app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks> <app-blockchain-blocks></app-blockchain-blocks>
</div>
<div id="divider"></div> <div id="divider"></div>
</span>
</div> </div>
</div> </div>
</div> </div>

27
frontend/src/app/components/television/television.component.scss
View File

@ -31,8 +31,9 @@
.position-container { .position-container {
position: absolute; position: absolute;
left: 50%; left: 0;
bottom: 170px; bottom: 170px;
transform: translateX(50vw);
} }
#divider { #divider {
@ -47,9 +48,33 @@
top: -28px; top: -28px;
} }
} }
&.time-ltr {
.blocks-wrapper {
transform: scaleX(-1);
} }
}
}
:host-context(.ltr-layout) {
.blockchain-wrapper.time-ltr .blocks-wrapper,
.blockchain-wrapper .blocks-wrapper {
direction: ltr;
}
}
:host-context(.rtl-layout) {
.blockchain-wrapper.time-ltr .blocks-wrapper,
.blockchain-wrapper .blocks-wrapper {
direction: rtl;
}
}
.tv-container { .tv-container {
display: flex; display: flex;
margin-top: 0px; margin-top: 0px;
flex-direction: column; flex-direction: column;
} }

16
frontend/src/app/components/television/television.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebsocketService } from '../../services/websocket.service'; import { WebsocketService } from '../../services/websocket.service';
import { OptimizedMempoolStats } from '../../interfaces/node-api.interface'; import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
@ -6,7 +6,7 @@ import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service'; import { SeoService } from '../../services/seo.service';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { map, scan, startWith, switchMap, tap } from 'rxjs/operators'; import { map, scan, startWith, switchMap, tap } from 'rxjs/operators';
import { interval, merge, Observable } from 'rxjs'; import { interval, merge, Observable, Subscription } from 'rxjs';
import { ChangeDetectionStrategy } from '@angular/core'; import { ChangeDetectionStrategy } from '@angular/core';
@Component({ @Component({
@ -15,11 +15,13 @@ import { ChangeDetectionStrategy } from '@angular/core';
styleUrls: ['./television.component.scss'], styleUrls: ['./television.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class TelevisionComponent implements OnInit { export class TelevisionComponent implements OnInit, OnDestroy {
mempoolStats: OptimizedMempoolStats[] = []; mempoolStats: OptimizedMempoolStats[] = [];
statsSubscription$: Observable<OptimizedMempoolStats[]>; statsSubscription$: Observable<OptimizedMempoolStats[]>;
fragment: string; fragment: string;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
constructor( constructor(
private websocketService: WebsocketService, private websocketService: WebsocketService,
@ -37,6 +39,10 @@ export class TelevisionComponent implements OnInit {
this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`); this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']); this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
});
this.statsSubscription$ = merge( this.statsSubscription$ = merge(
this.stateService.live2Chart$.pipe(map(stats => [stats])), this.stateService.live2Chart$.pipe(map(stats => [stats])),
this.route.fragment this.route.fragment
@ -70,4 +76,8 @@ export class TelevisionComponent implements OnInit {
}) })
); );
} }
ngOnDestroy() {
this.timeLtrSubscription.unsubscribe();
}
} }