paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Pre-load pdf contents

Browse Source
This commit is contained in:
Michael Shamoon 2021-02-06 14:28:26 -08:00
parent 4a471138b2
commit b0fed61a01
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@ -1,5 +1,5 @@
<div class="col p-2 h-100"> <div class="col p-2 h-100">
<div class="card h-100 shadow-sm document-card" [class.card-selected]="selected"> <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected" [class.popover-hidden]="popoverHidden">
<div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)"> <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
<img class="card-img doc-img rounded-top" [src]="getThumbUrl()"> <img class="card-img doc-img rounded-top" [src]="getThumbUrl()">
@ -48,10 +48,10 @@
<ng-template #previewContent> <ng-template #previewContent>
<ng-container *ngIf="getContentType() == 'application/pdf'"> <ng-container *ngIf="getContentType() == 'application/pdf'">
<div class="preview pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer"> <div class="preview pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
<div class="spinner-border spinner-border-sm" role="status"> <div class="spinner-border text-primary spinner-border-sm" role="status">
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
<pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="false" [show-all]="true" [render-text-mode]="2" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer> <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="false" [show-all]="true" [render-text-mode]="2"></pdf-viewer>
</div> </div>
<ng-template #nativePdfViewer> <ng-template #nativePdfViewer>
<object [data]="previewUrl | safe" type="application/pdf" class="preview" width="100%"></object> <object [data]="previewUrl | safe" type="application/pdf" class="preview" width="100%"></object>

5
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
View File

@ -52,3 +52,8 @@
z-index: 0; z-index: 0;
} }
} }
.popover-hidden ::ng-deep .popover {
opacity: 0;
pointer-events: none;
}

11
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
View File

@ -37,6 +37,9 @@ export class DocumentCardSmallComponent implements OnInit {
@ViewChild('popover') popover: NgbPopover @ViewChild('popover') popover: NgbPopover
mouseOnPreview = false
popoverHidden = true
metadata: PaperlessDocumentMetadata metadata: PaperlessDocumentMetadata
ngOnInit(): void { ngOnInit(): void {
@ -81,10 +84,16 @@ export class DocumentCardSmallComponent implements OnInit {
mouseEnterPreview() { mouseEnterPreview() {
this.mouseOnPreview = true this.mouseOnPreview = true
if (!this.popover.isOpen()) { if (!this.popover.isOpen()) {
// we're going to open but hide to pre-load content during hover delay
this.popover.open()
this.popoverHidden = true
setTimeout(() => { setTimeout(() => {
if (this.mouseOnPreview) { if (this.mouseOnPreview) {
// show popover
this.popoverHidden = false
this.showPreview.emit(this) this.showPreview.emit(this)
this.popover.open() } else {
this.popover.close()
} }
}, 600); }, 600);
} }