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

Make this better

Browse Source
This commit is contained in:
shamoon 2024-10-13 20:52:06 -07:00
parent 5b042deede
commit d77cb8ec00
3 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@ -350,15 +350,16 @@
</ng-template> </ng-template>
<ng-template #previewContent> <ng-template #previewContent>
@if (!metadata) { <div class="thumb-preview position-absolute pe-none" [class.fade]="previewLoaded">
<img [src]="thumbUrl | safeUrl" class="thumb-preview" width="100%" height="auto" alt="Document loading..." i18n-alt /> <img [src]="thumbUrl | safeUrl" class="" 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 class="position-absolute top-0 start-0 m-2 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>
</div> </div>
</div> </div>
} @else { </div>
@if (metadata) {
@switch (archiveContentRenderType) { @switch (archiveContentRenderType) {
@case (ContentRenderType.PDF) { @case (ContentRenderType.PDF) {
@if (!useNativePdfViewer) { @if (!useNativePdfViewer) {

13
src-ui/src/app/components/document-detail/document-detail.component.scss
View File

@ -64,5 +64,16 @@ textarea.rtl {
} }
.thumb-preview { .thumb-preview {
border: 8px solid var(--bs-secondary); top: 0;
left: calc(.5 * var(--bs-gutter-x));
height: calc(100vh - 160px);
overflow: hidden;
background-color: gray;
padding: 10px 8px; // border
width: calc(100% - var(--bs-gutter-x));
z-index: 1000;
> div {
mix-blend-mode: difference;
}
} }

8
src-ui/src/app/components/document-detail/document-detail.component.ts
View File

@ -136,6 +136,7 @@ export class DocumentDetailComponent
previewText: string previewText: string
downloadUrl: string downloadUrl: string
downloadOriginalUrl: string downloadOriginalUrl: string
previewLoaded: boolean = false
correspondents: Correspondent[] correspondents: Correspondent[]
documentTypes: DocumentType[] documentTypes: DocumentType[]
@ -538,6 +539,9 @@ export class DocumentDetailComponent
.subscribe({ .subscribe({
next: (result) => { next: (result) => {
this.metadata = result this.metadata = result
if (this.archiveContentRenderType !== ContentRenderType.PDF) {
this.previewLoaded = true
}
}, },
error: (error) => { error: (error) => {
this.metadata = {} // allow display to fallback to <object> tag this.metadata = {} // allow display to fallback to <object> tag
@ -904,11 +908,15 @@ export class DocumentDetailComponent
pdfPreviewLoaded(pdf: PDFDocumentProxy) { pdfPreviewLoaded(pdf: PDFDocumentProxy) {
this.previewNumPages = pdf.numPages this.previewNumPages = pdf.numPages
if (this.password) this.requiresPassword = false if (this.password) this.requiresPassword = false
setTimeout(() => {
this.previewLoaded = true
}, 300)
} }
onError(event) { onError(event) {
if (event.name == 'PasswordException') { if (event.name == 'PasswordException') {
this.requiresPassword = true this.requiresPassword = true
this.previewLoaded = true
} }
} }