From 41540a3a5f83c1f76efeb99943b16de097b0a71d Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com> Date: Sat, 6 Feb 2021 00:40:18 -0800 Subject: [PATCH] Document popover previews --- .../document-card-small.component.html | 20 ++++++++- .../document-card-small.component.scss | 18 ++++++++ .../document-card-small.component.ts | 44 +++++++++++++++++-- .../document-list.component.html | 2 +- .../document-list/document-list.component.ts | 9 ++++ src-ui/src/theme_dark.scss | 12 +++++ 6 files changed, 99 insertions(+), 6 deletions(-) diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html index 28dc84236..a6ac18b83 100644 --- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html +++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html @@ -37,12 +37,30 @@ - + + + +
+ + +
+ + + + + + + + diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss index a4af1bb11..ba3a180c7 100644 --- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss +++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss @@ -34,3 +34,21 @@ .doc-img-background-selected { background-color: $primaryFaded; } + +::ng-deep .popover { + max-width: 40rem; + + .preview { + min-width: 10rem; + min-height: 10rem; + max-height: 25rem; + overflow-y: scroll; + } + + .spinner-border { + position: absolute; + top: 4rem; + left: calc(50% - 0.5rem); + z-index: 0; + } +} diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts index 5db0e30c0..a19e19533 100644 --- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts +++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts @@ -1,7 +1,10 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { map } from 'rxjs/operators'; import { PaperlessDocument } from 'src/app/data/paperless-document'; +import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata'; import { DocumentService } from 'src/app/services/rest/document.service'; +import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'; +import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service'; @Component({ selector: 'app-document-card-small', @@ -10,11 +13,11 @@ import { DocumentService } from 'src/app/services/rest/document.service'; }) export class DocumentCardSmallComponent implements OnInit { - constructor(private documentService: DocumentService) { } + constructor(private documentService: DocumentService, private settings: SettingsService) { } @Input() selected = false - + @Output() toggleSelected = new EventEmitter() @@ -29,7 +32,17 @@ export class DocumentCardSmallComponent implements OnInit { moreTags: number = null + @Output() + showPreview = new EventEmitter() + + @ViewChild('popover') popover: NgbPopover + + metadata: PaperlessDocumentMetadata + ngOnInit(): void { + this.documentService.getMetadata(this.document?.id).subscribe(result => { + this.metadata = result + }) } getThumbUrl() { @@ -40,7 +53,7 @@ export class DocumentCardSmallComponent implements OnInit { return this.documentService.getDownloadUrl(this.document.id) } - getPreviewUrl() { + get previewUrl() { return this.documentService.getPreviewUrl(this.document.id) } @@ -57,4 +70,27 @@ export class DocumentCardSmallComponent implements OnInit { ) } + get useNativePdfViewer(): boolean { + return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER) + } + + getContentType() { + return this.metadata?.has_archive_version ? 'application/pdf' : this.metadata?.original_mime_type + } + + mouseEnterPreview() { + this.mouseOnPreview = true + if (!this.popover.isOpen()) { + setTimeout(() => { + if (this.mouseOnPreview) { + this.showPreview.emit(this) + this.popover.open() + } + }, 600); + } + } + + mouseLeavePreview() { + this.mouseOnPreview = false + } } diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html index cfc2e655d..630395b69 100644 --- a/src-ui/src/app/components/document-list/document-list.component.html +++ b/src-ui/src/app/components/document-list/document-list.component.html @@ -170,5 +170,5 @@
- +
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts index 0d1562c24..e1c2457e6 100644 --- a/src-ui/src/app/components/document-list/document-list.component.ts +++ b/src-ui/src/app/components/document-list/document-list.component.ts @@ -12,6 +12,7 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'; import { Toast, ToastService } from 'src/app/services/toast.service'; import { FilterEditorComponent } from './filter-editor/filter-editor.component'; import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component'; +import { DocumentCardSmallComponent } from './document-card-small/document-card-small.component'; @Component({ selector: 'app-document-list', @@ -41,6 +42,8 @@ export class DocumentListComponent implements OnInit, OnDestroy { private consumptionFinishedSubscription: Subscription + @ViewChildren(DocumentCardSmallComponent) smallCards: QueryList + get isFiltered() { return this.list.filterRules?.length > 0 } @@ -204,4 +207,10 @@ export class DocumentListComponent implements OnInit, OnDestroy { trackByDocumentId(index, item: PaperlessDocument) { return item.id } + + closeAllPopovers(cardOpening: DocumentCardSmallComponent) { + this.smallCards.forEach(card => { + if (card !== cardOpening) card.popover.close() + }) + } } diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss index 4e850f017..8526284a8 100644 --- a/src-ui/src/theme_dark.scss +++ b/src-ui/src/theme_dark.scss @@ -366,6 +366,18 @@ $border-color-dark-mode: #47494f; .progress-bar.bg-primary { background-color: darken($primary-dark-mode, 5%) !important; } + + .popover { + .popover-header, + .popover-body { + background-color: $bg-light-dark-mode; + border-color: $border-color-dark-mode; + } + + .arrow::after { + border-top-color: $bg-light-dark-mode; + } + } } body.color-scheme-dark {