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

Show document date

Browse Source
This commit is contained in:
shamoon 2024-04-02 13:52:44 -07:00
parent f8d4877c6b
commit 9113d718d8
2 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,20 +6,25 @@
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>
<div class="position-absolute top-50 end-0 translate-middle"> <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> <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) { @if (loading) {
<div class="spinner-border spinner-border-sm text-muted mt-1"></div> <div class="spinner-border spinner-border-sm text-muted mt-1"></div>
} }
</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" let-date="date">
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1" <div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
(click)="primaryAction(type, item)" (click)="primaryAction(type, item)"
(mouseenter)="onItemHover($event)"> (mouseenter)="onItemHover($event)">
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs> <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
<span class="text-truncate">{{item[nameProp]}}</span> <div class="text-truncate">
{{item[nameProp]}}
@if (date) {
<small class="small text-muted">{{date | customDate}}</small>
}
</div>
<div class="btn-group ms-auto"> <div class="btn-group ms-auto">
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" <button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
(click)="primaryAction(type, item); $event.stopPropagation()" (click)="primaryAction(type, item); $event.stopPropagation()"
@ -56,7 +61,7 @@
@if (searchResults?.documents.length) { @if (searchResults?.documents.length) {
<h6 class="dropdown-header" i18n="@@searchResults.documents">Documents</h6> <h6 class="dropdown-header" i18n="@@searchResults.documents">Documents</h6>
@for (document of searchResults.documents; track document.id) { @for (document of searchResults.documents; track document.id) {
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: document, nameProp: 'title', type: 'document', icon: 'file-text'}"></ng-container> <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: document, nameProp: 'title', type: 'document', icon: 'file-text', date: document.added}"></ng-container>
} }
} }

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

@ -60,27 +60,29 @@ form {
max-height: 75vh; max-height: 75vh;
} }
.dropdown-item:has(button:focus) { .dropdown-item {
background-color: var(--pngx-bg-alt); &:has(button:focus) {
} background-color: var(--pngx-bg-alt);
}
.dropdown-item button { & button {
transition: all 0.3s ease; transition: all 0.3s ease;
max-width: 2rem; max-width: 2rem;
overflow: hidden; overflow: hidden;
} }
.dropdown-item button span { & button span {
opacity: 0; opacity: 0;
transition: inherit; transition: inherit;
} }
.dropdown-item:hover button, &:hover button,
.dropdown-item:has(button:focus) button { &:has(button:focus) button {
max-width: 10rem; max-width: 10rem;
} }
.dropdown-item:hover button span, &:hover button span,
.dropdown-item:has(button:focus) span { &:has(button:focus) span {
opacity: 1; opacity: 1;
}
} }