mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-13 11:36:07 +01:00
Code Issues Projects Releases Wiki Activity

Adapt block filter UI for small screens

Browse source
This commit is contained in:
Mononaut 2023-12-13 11:29:10 +00:00
parent 5777561744
commit c019355c9f
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
5 changed files with 63 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/app/components/block-filters/block-filters.component.html
View file

@ -1,4 +1,4 @@
<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen">
<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
<div class="filter-bar">
<button class="menu-toggle" (click)="menuOpen = !menuOpen">
<fa-icon [icon]="['fas', 'filter']"></fa-icon>
@ -9,7 +9,7 @@
</ng-container>
</div>
</div>
<div class="filter-menu" *ngIf="menuOpen">
<div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
<ng-container *ngFor="let group of filterGroups;">
<h5>{{ group.label }}</h5>
<div class="filter-group">
@ -19,4 +19,11 @@
</div>
</ng-container>
</div>
<div class="filter-menu" *ngIf="menuOpen && cssWidth <= 280">
<ng-container *ngFor="let group of filterGroups;">
<ng-container *ngFor="let filter of group.filters;">
<button *ngIf="filter.important" class="btn filter-tag" [class.selected]="filterFlags[filter.key]" (click)="toggleFilter(filter.key)">{{ filter.label }}</button>
</ng-container>
</ng-container>
</div>
</div>

24
frontend/src/app/components/block-filters/block-filters.component.scss
View file

@ -101,4 +101,28 @@
pointer-events: all;
background: #181b2d7f;
}
&.small {
.filter-tag {
font-size: 0.8em;
}
}
&.vsmall {
.filter-menu {
margin-top: 0.25em;
h5 {
display: none;
}
}
.filter-tag {
font-size: 0.7em;
}
}
&.tiny {
.filter-tag {
font-size: 0.5em;
}
}
}

15
frontend/src/app/components/block-filters/block-filters.component.ts
View file

@ -1,4 +1,4 @@
import { Component, EventEmitter, Output, HostListener } from '@angular/core';
import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
@ -7,7 +7,8 @@ import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
templateUrl: './block-filters.component.html',
styleUrls: ['./block-filters.component.scss'],
})
export class BlockFiltersComponent {
export class BlockFiltersComponent implements OnChanges {
@Input() cssWidth: number = 800;
@Output() onFilterChanged: EventEmitter<bigint | null> = new EventEmitter();
filters = TransactionFilters;
@ -16,6 +17,16 @@ export class BlockFiltersComponent {
filterFlags: { [key: string]: boolean } = {};
menuOpen: boolean = false;
constructor(
private cd: ChangeDetectorRef,
) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.cssWidth) {
this.cd.markForCheck();
}
}
toggleFilter(key): void {
const filter = this.filters[key];
this.filterFlags[key] = !this.filterFlags[key];

2
frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
View file

@ -13,6 +13,6 @@
[auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion"
></app-block-overview-tooltip>
<app-block-filters (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
<app-block-filters [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
</div>
</div>

31
frontend/src/app/shared/filters.utils.ts
View file

@ -4,6 +4,7 @@ export interface Filter {
flag: bigint,
toggle?: string,
group?: string,
important?: boolean,
}
// binary flags for transaction classification
@ -44,29 +45,29 @@ export const TransactionFlags = {
export const TransactionFilters: { [key: string]: Filter } = {
/* features */
rbf: { key: 'rbf', label: 'RBF enabled', flag: TransactionFlags.rbf, toggle: 'rbf' },
no_rbf: { key: 'no_rbf', label: 'RBF disabled', flag: TransactionFlags.no_rbf, toggle: 'rbf' },
rbf: { key: 'rbf', label: 'RBF enabled', flag: TransactionFlags.rbf, toggle: 'rbf', important: true },
no_rbf: { key: 'no_rbf', label: 'RBF disabled', flag: TransactionFlags.no_rbf, toggle: 'rbf', important: true },
v1: { key: 'v1', label: 'Version 1', flag: TransactionFlags.v1, toggle: 'version' },
v2: { key: 'v2', label: 'Version 2', flag: TransactionFlags.v2, toggle: 'version' },
// multisig: { key: 'multisig', label: 'Multisig', flag: TransactionFlags.multisig },
/* address types */
p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk },
p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms },
p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh },
p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh },
p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh },
p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh },
p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr },
p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk, important: true },
p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms, important: true },
p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh, important: true },
p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh, important: true },
p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh, important: true },
p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh, important: true },
p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr, important: true },
/* behavior */
cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent },
cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child },
replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement },
cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent, important: true },
cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child, important: true },
replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement, important: true },
/* data */
op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return },
op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return, important: true },
// fake_multisig: { key: 'fake_multisig', label: 'Fake multisig', flag: TransactionFlags.fake_multisig },
inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription },
inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription, important: true },
/* heuristics */
coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin },
coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin, important: true },
consolidation: { key: 'consolidation', label: 'Consolidation', flag: TransactionFlags.consolidation },
batch_payout: { key: 'batch_payout', label: 'Batch payment', flag: TransactionFlags.batch_payout },
/* sighash */