lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loading indicator, hide shortcut key on focus

Browse Source
This commit is contained in:
shamoon 2024-04-01 00:14:19 -07:00
parent 7737b24d7d
commit f8d4877c6b
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src-ui/src/app/components/app-frame/global-search/global-search.component.html
View File

@ -5,7 +5,13 @@
<input #searchInput class="form-control form-control-sm" type="text" name="query" <input #searchInput class="form-control form-control-sm" type="text" name="query"
autocomplete="off" placeholder="Search" aria-label="Search" i18n-placeholder autocomplete="off" placeholder="Search" aria-label="Search" i18n-placeholder
[(ngModel)]="query" (ngModelChange)="this.queryDebounce.next($event)" (keyup)="searchInputKeyDown($event)" ngbDropdownAnchor> [(ngModel)]="query" (ngModelChange)="this.queryDebounce.next($event)" (keyup)="searchInputKeyDown($event)" ngbDropdownAnchor>
<span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span> <div class="position-absolute top-50 end-0 translate-middle">
<span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span>
@if (loading) {
<div class="spinner-border spinner-border-sm text-muted mt-1"></div>
}
</div>
</form> </form>
<ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon"> <ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon">

5
src-ui/src/app/components/app-frame/global-search/global-search.component.scss
View File

@ -14,8 +14,9 @@ form {
} }
&:focus-within { &:focus-within {
i-bs { i-bs,
display: none; .badge {
display: none !important;
} }
.form-control::placeholder { .form-control::placeholder {

3
src-ui/src/app/components/app-frame/global-search/global-search.component.ts
View File

@ -44,6 +44,7 @@ export class GlobalSearchComponent {
public queryDebounce: Subject<string> public queryDebounce: Subject<string>
public searchResults: GlobalSearchResult public searchResults: GlobalSearchResult
private currentItemIndex: number = -1 private currentItemIndex: number = -1
public loading: boolean = false
@ViewChild('searchInput') searchInput: ElementRef @ViewChild('searchInput') searchInput: ElementRef
@ViewChild('resultsDropdown') resultsDropdown: NgbDropdown @ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
@ -103,8 +104,10 @@ export class GlobalSearchComponent {
} }
private search(query: string) { private search(query: string) {
this.loading = true
this.searchService.globalSearch(query).subscribe((results) => { this.searchService.globalSearch(query).subscribe((results) => {
this.searchResults = results this.searchResults = results
this.loading = false
this.resultsDropdown.open() this.resultsDropdown.open()
}) })
} }