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

Merge pull request #1293 from mempool/simon/shorten-address-prefix-result

Browse source 
Shorten address search with middle ellipsis
This commit is contained in:
softsimon 2022-03-05 17:09:29 +01:00 • committed by GitHub
commit 35f81200d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/app.module.ts
View file

@ -74,6 +74,7 @@ import { HashrateChartComponent } from './components/hashrate-chart/hashrate-cha
import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
import { MiningStartComponent } from './components/mining-start/mining-start.component';
import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
@NgModule({
declarations: [
@ -154,6 +155,7 @@ import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
SeoService,
StorageService,
LanguageService,
ShortenStringPipe,
{ provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
],
bootstrap: [AppComponent]

2
frontend/src/app/components/search-form/search-form.component.html
View file

@ -1,7 +1,7 @@
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="d-flex">
<div class="search-box-container mr-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="TXID, block height, hash or address">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="TXID, block height, hash or address">
</div>
<div>
<button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary"><fa-icon [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon></button>

21
frontend/src/app/components/search-form/search-form.component.scss
View file

@ -1,8 +1,19 @@
:host ::ng-deep .dropdown-item {
white-space: nowrap;
overflow: hidden;
width: 375px;
text-overflow: ellipsis;
:host ::ng-deep {
.dropdown-item {
white-space: nowrap;
width: calc(100% - 34px);
}
.dropdown-menu {
width: calc(100% - 34px);
}
@media (min-width: 768px) {
.dropdown-item {
width: 410px;
}
.dropdown-menu {
width: 410px;
}
}
}
form {

5
frontend/src/app/components/search-form/search-form.component.ts
View file

@ -8,6 +8,7 @@ import { debounceTime, distinctUntilChanged, switchMap, filter, catchError, map
import { ElectrsApiService } from 'src/app/services/electrs-api.service';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { ShortenStringPipe } from 'src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe';
@Component({
selector: 'app-search-form',
@ -22,6 +23,7 @@ export class SearchFormComponent implements OnInit {
typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
searchForm: FormGroup;
isMobile = (window.innerWidth <= 767.98);
@Output() searchTriggered = new EventEmitter();
regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/;
@ -33,6 +35,8 @@ export class SearchFormComponent implements OnInit {
focus$ = new Subject<string>();
click$ = new Subject<string>();
formatterFn = (address: string) => this.shortenStringPipe.transform(address, this.isMobile ? 33 : 40);
constructor(
private formBuilder: FormBuilder,
private router: Router,
@ -40,6 +44,7 @@ export class SearchFormComponent implements OnInit {
private stateService: StateService,
private electrsApiService: ElectrsApiService,
private relativeUrlPipe: RelativeUrlPipe,
private shortenStringPipe: ShortenStringPipe,
) { }
ngOnInit() {