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

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

@ -14,12 +14,17 @@
</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>
} }
} }

16
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 {
&:has(button:focus) {
background-color: var(--pngx-bg-alt); 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;
} }
}