mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-26 16:24:26 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1893 from mempool/nymkappa/feature/remove-hide-button

Browse Source 
Remove dashboard row collasping feature
This commit is contained in:
wiz 2022-06-23 02:43:30 +09:00 committed by GitHub
commit 816263bd54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 114 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/language-selector/language-selector.component.html
View File

@ -1,4 +1,4 @@
<div [formGroup]="languageForm" class="text-small text-center mt-4"> <div [formGroup]="languageForm" class="text-small text-center">
<select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 130px;" (change)="changeLanguage()"> <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 130px;" (change)="changeLanguage()">
<option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option> <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
</select> </select>

39
frontend/src/app/dashboard/dashboard.component.html
View File

@ -1,34 +1,6 @@
<div class="container-xl dashboard-container"> <div class="container-xl dashboard-container">
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData"> <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card">
<div class="card-body less-padding">
<app-fees-box class="d-block"></app-fees-box>
</div>
</div>
</div>
<div class="col" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
<app-difficulty></app-difficulty>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
</div>
</div>
</div>
</ng-template>
<ng-template #expanded>
<ng-container *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'"> <ng-container *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
<div class="col card-wrapper"> <div class="col card-wrapper">
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div> <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
@ -102,7 +74,6 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template [ngIf]="collapseLevel === 'one'">
<div class="col" style="max-height: 410px"> <div class="col" style="max-height: 410px">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
@ -163,20 +134,12 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="">&nbsp;</div>
</div> </div>
</div> </div>
</div> </div>
</ng-template>
</ng-template>
</div> </div>
<button type="button" class="btn btn-secondary btn-sm d-block mx-auto" (click)="toggleCollapsed()">
<div [ngSwitch]="collapseLevel">
<fa-icon *ngSwitchCase="'three'" [icon]="['fas', 'angle-down']" [fixedWidth]="true" i18n-title="dashboard.expand" title="Expand"></fa-icon>
<fa-icon *ngSwitchDefault [icon]="['fas', 'angle-up']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
</div>
</button>
<app-language-selector></app-language-selector> <app-language-selector></app-language-selector>
<div class="terms-of-service"> <div class="terms-of-service">

13
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -33,7 +33,6 @@ interface MempoolStatsData {
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
collapseLevel: string;
featuredAssets$: Observable<any>; featuredAssets$: Observable<any>;
network$: Observable<string>; network$: Observable<string>;
mempoolBlocksData$: Observable<MempoolBlocksData>; mempoolBlocksData$: Observable<MempoolBlocksData>;
@ -63,7 +62,6 @@ export class DashboardComponent implements OnInit {
this.seoService.resetTitle(); this.seoService.resetTitle();
this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']); this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
this.network$ = merge(of(''), this.stateService.networkChanged$); this.network$ = merge(of(''), this.stateService.networkChanged$);
this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one';
this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$ this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
.pipe( .pipe(
map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100) map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
@ -230,15 +228,4 @@ export class DashboardComponent implements OnInit {
trackByBlock(index: number, block: BlockExtended) { trackByBlock(index: number, block: BlockExtended) {
return block.height; return block.height;
} }
toggleCollapsed() {
if (this.collapseLevel === 'one') {
this.collapseLevel = 'two';
} else if (this.collapseLevel === 'two') {
this.collapseLevel = 'three';
} else {
this.collapseLevel = 'one';
}
this.storageService.setValue('dashboard-collapsed', this.collapseLevel);
}
} }