Trying this out

This commit is contained in:
shamoon 2024-10-10 20:00:04 -07:00
parent 5ffc39feff
commit 5b042deede
3 changed files with 9 additions and 2 deletions

View File

@ -350,8 +350,9 @@
</ng-template> </ng-template>
<ng-template #previewContent> <ng-template #previewContent>
@if (!document) { @if (!metadata) {
<div class="w-100 h-100 d-flex align-items-center justify-content-center"> <img [src]="thumbUrl | safeUrl" class="thumb-preview" width="100%" height="auto" alt="Document loading..." i18n-alt />
<div class="position-absolute top-0 left-0 p-2 d-flex align-items-center justify-content-center">
<div> <div>
<div class="spinner-border spinner-border-sm me-2" role="status"></div> <div class="spinner-border spinner-border-sm me-2" role="status"></div>
<ng-container i18n>Loading...</ng-container> <ng-container i18n>Loading...</ng-container>

View File

@ -62,3 +62,7 @@ textarea.rtl {
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
.thumb-preview {
border: 8px solid var(--bs-secondary);
}

View File

@ -132,6 +132,7 @@ export class DocumentDetailComponent
title: string title: string
titleSubject: Subject<string> = new Subject() titleSubject: Subject<string> = new Subject()
previewUrl: string previewUrl: string
thumbUrl: string
previewText: string previewText: string
downloadUrl: string downloadUrl: string
downloadOriginalUrl: string downloadOriginalUrl: string
@ -338,6 +339,7 @@ export class DocumentDetailComponent
}` }`
}, },
}) })
this.thumbUrl = this.documentsService.getThumbUrl(documentId)
return this.documentsService.get(documentId) return this.documentsService.get(documentId)
}) })
) )