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

Re-add search icon

Browse Source
This commit is contained in:
shamoon 2024-03-31 22:34:47 -07:00
parent 6e6454e597
commit ed10c7e066
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
<div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange"> <div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
<form class="form-inline col-6 position-relative"> <form class="form-inline col-12 col-md-6 position-relative">
<i-bs width="1em" height="1em" name="search"></i-bs>
<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 everything" 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 text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span> <span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span>
</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">

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

@ -1,5 +1,23 @@
form { form {
position: relative;
> i-bs {
position: absolute;
left: 0.6rem;
top: .35rem;
color: rgba(255, 255, 255, 0.6);
@media screen and (min-width: 768px) {
// adjust for smaller font size on non-mobile
top: 0.25rem;
}
}
&:focus-within { &:focus-within {
i-bs {
display: none;
}
.form-control::placeholder { .form-control::placeholder {
color: rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0);
} }
@ -13,6 +31,7 @@ form {
.form-control { .form-control {
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
padding-left: 1.8rem;
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
transition: all .3s ease, padding-left 0s ease, background-color 0s ease; // Safari requires all transition: all .3s ease, padding-left 0s ease, background-color 0s ease; // Safari requires all