Show document date

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

View File

@ -14,12 +14,17 @@
</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"
(click)="primaryAction(type, item)"
(mouseenter)="onItemHover($event)">
<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">
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
(click)="primaryAction(type, item); $event.stopPropagation()"
@ -56,7 +61,7 @@
@if (searchResults?.documents.length) {
<h6 class="dropdown-header" i18n="@@searchResults.documents">Documents</h6>
@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>
}
}

View File

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