Better display of multiple comment hits

This commit is contained in:
Michael Shamoon 2023-01-27 10:29:40 -08:00
parent 44212d492d
commit 4dc0c7bbe2
2 changed files with 18 additions and 2 deletions

View File

@ -26,11 +26,11 @@
</div> </div>
<p class="card-text"> <p class="card-text">
<span *ngIf="document.__search_hit__ && document.__search_hit__.highlights" [innerHtml]="document.__search_hit__.highlights"></span> <span *ngIf="document.__search_hit__ && document.__search_hit__.highlights" [innerHtml]="document.__search_hit__.highlights"></span>
<span *ngIf="document.__search_hit__ && document.__search_hit__.comment_highlights" class="d-block"> <span *ngFor="let highlight of searchCommentHighlights" class="d-block">
<svg width="1em" height="1em" fill="currentColor" class="me-2"> <svg width="1em" height="1em" fill="currentColor" class="me-2">
<use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/> <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
</svg> </svg>
<span [innerHtml]="document.__search_hit__.comment_highlights"></span> <span [innerHtml]="highlight"></span>
</span> </span>
<span *ngIf="!document.__search_hit__" class="result-content">{{contentTrimmed}}</span> <span *ngIf="!document.__search_hit__" class="result-content">{{contentTrimmed}}</span>
</p> </p>

View File

@ -70,6 +70,22 @@ export class DocumentCardLargeComponent {
} }
} }
get searchCommentHighlights() {
let highlights = []
if (
this.document['__search_hit__'] &&
this.document['__search_hit__'].comment_highlights
) {
// only show comments with a match
highlights = (
this.document['__search_hit__'].comment_highlights as string
)
.split(',')
.filter((higlight) => higlight.includes('<span'))
}
return highlights
}
getIsThumbInverted() { getIsThumbInverted() {
return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED) return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
} }