Adapt block filter UI for small screens

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

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"> <div class="filter-bar">
<button class="menu-toggle" (click)="menuOpen = !menuOpen"> <button class="menu-toggle" (click)="menuOpen = !menuOpen">
<fa-icon [icon]="['fas', 'filter']"></fa-icon> <fa-icon [icon]="['fas', 'filter']"></fa-icon>
@ -9,7 +9,7 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div class="filter-menu" *ngIf="menuOpen"> <div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
<ng-container *ngFor="let group of filterGroups;"> <ng-container *ngFor="let group of filterGroups;">
<h5>{{ group.label }}</h5> <h5>{{ group.label }}</h5>
<div class="filter-group"> <div class="filter-group">
@ -19,4 +19,11 @@
</div> </div>
</ng-container> </ng-container>
</div> </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> </div>

View file

@ -101,4 +101,28 @@
pointer-events: all; pointer-events: all;
background: #181b2d7f; 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;
}
}
} }

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

View file

@ -13,6 +13,6 @@
[auditEnabled]="auditHighlighting" [auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion" [blockConversion]="blockConversion"
></app-block-overview-tooltip> ></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>
</div> </div>

View file

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