Enhancement: Improved popup preview, respect embedded viewer, error handling (#4947)

This commit is contained in:
shamoon
2023-12-18 08:41:51 -08:00
committed by GitHub
parent f23d31cd36
commit ccaebaddaa
17 changed files with 235 additions and 53 deletions

View File

@@ -56,7 +56,7 @@
</svg>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
</a>
<ng-template #previewContent>
<object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
<pngx-preview-popup [document]="document"></pngx-preview-popup>
</ng-template>
<a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
<svg class="sidebaricon" fill="currentColor" class="sidebaricon">

View File

@@ -19,6 +19,7 @@ import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
import { DocumentCardLargeComponent } from './document-card-large.component'
import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
const doc = {
id: 10,
@@ -50,6 +51,7 @@ describe('DocumentCardLargeComponent', () => {
IfPermissionsDirective,
SafeUrlPipe,
IsNumberPipe,
PreviewPopupComponent,
],
providers: [DatePipe],
imports: [

View File

@@ -15,10 +15,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
@Component({
selector: 'pngx-document-card-large',
templateUrl: './document-card-large.component.html',
styleUrls: [
'./document-card-large.component.scss',
'../popover-preview/popover-preview.scss',
],
styleUrls: ['./document-card-large.component.scss'],
})
export class DocumentCardLargeComponent extends ComponentWithPermissions {
constructor(

View File

@@ -94,7 +94,7 @@
</svg>
</a>
<ng-template #previewContent>
<object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
<pngx-preview-popup [document]="document"></pngx-preview-popup>
</ng-template>
<a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

View File

@@ -22,6 +22,7 @@ import { By } from '@angular/platform-browser'
import { TagComponent } from '../../common/tag/tag.component'
import { PaperlessTag } from 'src/app/data/paperless-tag'
import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
const doc = {
id: 10,
@@ -64,6 +65,7 @@ describe('DocumentCardSmallComponent', () => {
SafeUrlPipe,
TagComponent,
IsNumberPipe,
PreviewPopupComponent,
],
providers: [DatePipe],
imports: [

View File

@@ -16,10 +16,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
@Component({
selector: 'pngx-document-card-small',
templateUrl: './document-card-small.component.html',
styleUrls: [
'./document-card-small.component.scss',
'../popover-preview/popover-preview.scss',
],
styleUrls: ['./document-card-small.component.scss'],
})
export class DocumentCardSmallComponent extends ComponentWithPermissions {
constructor(

View File

@@ -1,22 +0,0 @@
::ng-deep .popover.popover-preview {
max-width: 40rem;
.preview {
min-width: 30rem;
min-height: 18rem;
max-height: 35rem;
overflow-y: scroll;
}
.spinner-border {
position: absolute;
top: 4rem;
left: calc(50% - 0.5rem);
z-index: 0;
}
}
::ng-deep .popover-hidden .popover {
opacity: 0;
pointer-events: none;
}