diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
index f9a8b9771..18b7cb94d 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@@ -1,30 +1,37 @@
- = new Subject()
error = false
@@ -31,6 +44,12 @@ export class PreviewPopupComponent implements OnDestroy {
previewText: string
+ @ViewChild('popover') popover: NgbPopover
+
+ mouseOnPreview: boolean
+
+ popoverClass: string = 'shadow popover-preview'
+
get renderAsObject(): boolean {
return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
}
@@ -83,4 +102,33 @@ export class PreviewPopupComponent implements OnDestroy {
this.error = true
}
}
+
+ get previewUrl() {
+ return this.documentService.getPreviewUrl(this.document.id)
+ }
+
+ mouseEnterPreview() {
+ this.mouseOnPreview = true
+ if (!this.popover.isOpen()) {
+ // we're going to open but hide to pre-load content during hover delay
+ this.popover.open()
+ this.popoverClass = 'shadow popover-preview pe-none opacity-0'
+ setTimeout(() => {
+ if (this.mouseOnPreview) {
+ // show popover
+ this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
+ } else {
+ this.popover.close()
+ }
+ }, 600)
+ }
+ }
+
+ mouseLeavePreview() {
+ this.mouseOnPreview = false
+ }
+
+ public close() {
+ this.popover.close(false)
+ }
}
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 04f3a236a..34557be31 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,4 +1,4 @@
-
- @if (error) {
-
+
+
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
index 2b9f71cef..12021fc90 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+ ComponentFixture,
+ fakeAsync,
+ TestBed,
+ tick,
+} from '@angular/core/testing'
import { PreviewPopupComponent } from './preview-popup.component'
import { By } from '@angular/platform-browser'
@@ -15,6 +20,8 @@ import {
withInterceptorsFromDi,
} from '@angular/common/http'
import { of, throwError } from 'rxjs'
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
const doc = {
id: 10,
@@ -34,8 +41,12 @@ describe('PreviewPopupComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [PreviewPopupComponent, SafeUrlPipe],
- imports: [NgxBootstrapIconsModule.pick(allIcons), PdfViewerModule],
+ declarations: [PreviewPopupComponent, SafeUrlPipe, DocumentTitlePipe],
+ imports: [
+ NgxBootstrapIconsModule.pick(allIcons),
+ PdfViewerModule,
+ NgbPopoverModule,
+ ],
providers: [
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
@@ -70,12 +81,14 @@ describe('PreviewPopupComponent', () => {
it('should render object if native PDF viewer enabled', () => {
settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
+ component.popover.open()
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
})
it('should render pngx viewer if native PDF viewer disabled', () => {
settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+ component.popover.open()
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('object'))).toBeNull()
expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
@@ -83,6 +96,7 @@ describe('PreviewPopupComponent', () => {
it('should show lock icon on password error', () => {
settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+ component.popover.open()
component.onError({ name: 'PasswordException' })
fixture.detectChanges()
expect(component.requiresPassword).toBeTruthy()
@@ -93,16 +107,18 @@ describe('PreviewPopupComponent', () => {
component.document.original_file_name = 'sample.png'
component.document.mime_type = 'image/png'
component.document.archived_file_name = undefined
+ component.popover.open()
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
})
it('should show message on error', () => {
+ component.popover.open()
component.onError({})
fixture.detectChanges()
- expect(fixture.debugElement.nativeElement.textContent).toContain(
- 'Error loading preview'
- )
+ expect(
+ fixture.debugElement.query(By.css('.popover')).nativeElement.textContent
+ ).toContain('Error loading preview')
})
it('should get text content from http if appropriate', () => {
@@ -122,4 +138,17 @@ describe('PreviewPopupComponent', () => {
component.init()
expect(component.previewText).toEqual('Preview text')
})
+
+ it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
+ component.mouseEnterPreview()
+ expect(component.popover.isOpen()).toBeTruthy()
+ tick(600)
+ component.close()
+
+ component.mouseEnterPreview()
+ tick(100)
+ component.mouseLeavePreview()
+ tick(600)
+ expect(component.popover.isOpen()).toBeFalsy()
+ }))
})
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
index 6d2ede266..75f3cbb86 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
@@ -1,5 +1,6 @@
import { HttpClient } from '@angular/common/http'
-import { Component, Input, OnDestroy } from '@angular/core'
+import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { first, Subject, takeUntil } from 'rxjs'
import { Document } from 'src/app/data/document'
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -23,6 +24,18 @@ export class PreviewPopupComponent implements OnDestroy {
return this._document
}
+ @Input()
+ link: string
+
+ @Input()
+ linkClasses: string = 'btn btn-sm btn-outline-secondary'
+
+ @Input()
+ linkTarget: string = '_blank'
+
+ @Input()
+ linkTitle: string = $localize`Open preview`
+
unsubscribeNotifier: Subject
-
- } @else {
- @if (renderAsObject) {
- @if (previewText) {
- Error loading preview
-{{previewText}}
- } @else {
-
- }
+
+
+ @if (error) {
+
-
+ @if (renderAsObject) {
+ @if (previewText) {
+
+
+ }
}
}
- }
-
+
+
} @else {
- @if (requiresPassword) {
- Error loading preview
+
-
- }
- @if (!requiresPassword) {
- {{previewText}}
+ } @else {
+
+ }
+ } @else {
+ @if (requiresPassword) {
+
+
+ }
+ @if (!requiresPassword) {
+
+
![]()
@@ -56,14 +56,9 @@
-
-
+
-
+
![]()
@@ -129,14 +129,9 @@
-
-
+
@if (activeDisplayFields.includes(DisplayField.TITLE)) {
- {{d.title | documentTitle}}
+
+ {{d.title | documentTitle}}
+
+
+
}
@if (activeDisplayFields.includes(DisplayField.TAGS)) {
@for (t of d.tags$ | async; track t) {
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 331f6e6d8..fe1466d58 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -564,11 +564,6 @@ table.table {
}
}
-.popover-hidden .popover {
- opacity: 0;
- pointer-events: none;
-}
-
// Tour
.tour-active .popover {
min-width: 360px;
@@ -728,3 +723,27 @@ i-bs svg {
vertical-align: middle;
}
}
+
+// fixes for buttons in preview popup
+.btn-group pngx-preview-popup:not(:last-child) {
+ // Prevent double borders when buttons are next to each other
+ > .btn {
+ margin-left: calc(#{$btn-border-width} * -1);
+ }
+ > .btn {
+ @include border-end-radius(0);
+ }
+}
+.btn-group pngx-preview-popup:not(:first-child) {
+ > .btn {
+ @include border-start-radius(0);
+ }
+}
+.btn-group pngx-preview-popup {
+ position: relative;
+ flex: 1 1 auto;
+
+ > .btn {
+ display: block;
+ }
+}
diff --git a/src/documents/views.py b/src/documents/views.py
index 35fa8eafc..367559c6d 100644
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -426,7 +426,7 @@ class DocumentViewSet(
)
def file_response(self, pk, request, disposition):
- doc = Document.objects.select_related("owner").get(id=pk)
+ doc = Document.global_objects.select_related("owner").get(id=pk)
if request.user is not None and not has_perms_owner_aware(
request.user,
"view_document",