machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shorten address search with middle ellipsis

Browse Source
This commit is contained in:
softsimon 2022-02-27 18:53:16 +03:00
parent 5f19b6dd07
commit e5b2440b45
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 15 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 { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
import { MiningStartComponent } from './components/mining-start/mining-start.component'; import { MiningStartComponent } from './components/mining-start/mining-start.component';
import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe'; import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -154,6 +155,7 @@ import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
SeoService, SeoService,
StorageService, StorageService,
LanguageService, LanguageService,
ShortenStringPipe,
{ provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true } { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
], ],
bootstrap: [AppComponent] 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> <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="d-flex"> <div class="d-flex">
<div class="search-box-container mr-2"> <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>
<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> <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>

13
frontend/src/app/components/search-form/search-form.component.scss
View File

@ -1,8 +1,11 @@
:host ::ng-deep .dropdown-item { :host ::ng-deep {
white-space: nowrap; .dropdown-item {
overflow: hidden; white-space: nowrap;
width: 375px; width: 410px;
text-overflow: ellipsis; }
.dropdown-menu {
width: 410px;
}
} }
form { form {

4
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 { ElectrsApiService } from 'src/app/services/electrs-api.service';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'; import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe'; 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({ @Component({
selector: 'app-search-form', selector: 'app-search-form',
@ -33,6 +34,8 @@ export class SearchFormComponent implements OnInit {
focus$ = new Subject<string>(); focus$ = new Subject<string>();
click$ = new Subject<string>(); click$ = new Subject<string>();
formatterFn = (address: string) => this.shortenStringPipe.transform(address, 40);
constructor( constructor(
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private router: Router, private router: Router,
@ -40,6 +43,7 @@ export class SearchFormComponent implements OnInit {
private stateService: StateService, private stateService: StateService,
private electrsApiService: ElectrsApiService, private electrsApiService: ElectrsApiService,
private relativeUrlPipe: RelativeUrlPipe, private relativeUrlPipe: RelativeUrlPipe,
private shortenStringPipe: ShortenStringPipe,
) { } ) { }
ngOnInit() { ngOnInit() {