diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index c00f7655e..3fc009020 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -85,5 +85,8 @@ textarea.rtl {
> img {
filter: blur(1px);
+ max-width: 100%;
+ object-fit: contain;
+ object-position: top;
}
}
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
index 229c4fd12..349e213aa 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -62,7 +62,10 @@ import { ToastService } from 'src/app/services/toast.service'
import { environment } from 'src/environments/environment'
import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { DocumentDetailComponent } from './document-detail.component'
+import {
+ DocumentDetailComponent,
+ ZoomSetting,
+} from './document-detail.component'
const doc: Document = {
id: 3,
@@ -753,7 +756,7 @@ describe('DocumentDetailComponent', () => {
it('should support zoom controls', () => {
initNormally()
- component.onZoomSelect({ target: { value: '1' } } as any) // from select
+ component.setZoom(ZoomSetting.One) // from select
expect(component.previewZoomSetting).toEqual('1')
component.increaseZoom()
expect(component.previewZoomSetting).toEqual('1.5')
@@ -761,18 +764,18 @@ describe('DocumentDetailComponent', () => {
expect(component.previewZoomSetting).toEqual('2')
component.decreaseZoom()
expect(component.previewZoomSetting).toEqual('1.5')
- component.onZoomSelect({ target: { value: '1' } } as any) // from select
+ component.setZoom(ZoomSetting.One) // from select
component.decreaseZoom()
expect(component.previewZoomSetting).toEqual('.75')
- component.onZoomSelect({ target: { value: 'page-fit' } } as any) // from select
+ component.setZoom(ZoomSetting.PageFit) // from select
expect(component.previewZoomScale).toEqual('page-fit')
expect(component.previewZoomSetting).toEqual('1')
component.increaseZoom()
expect(component.previewZoomSetting).toEqual('1.5')
expect(component.previewZoomScale).toEqual('page-width')
- component.onZoomSelect({ target: { value: 'page-fit' } } as any) // from select
+ component.setZoom(ZoomSetting.PageFit) // from select
expect(component.previewZoomScale).toEqual('page-fit')
expect(component.previewZoomSetting).toEqual('1')
component.decreaseZoom()
@@ -780,6 +783,19 @@ describe('DocumentDetailComponent', () => {
expect(component.previewZoomScale).toEqual('page-width')
})
+ it('should select correct zoom setting in dropdown', () => {
+ initNormally()
+ component.setZoom(ZoomSetting.PageFit)
+ expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeTruthy()
+ expect(component.isZoomSelected(ZoomSetting.One)).toBeFalsy()
+ component.setZoom(ZoomSetting.PageWidth)
+ expect(component.isZoomSelected(ZoomSetting.One)).toBeTruthy()
+ expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeFalsy()
+ component.setZoom(ZoomSetting.Quarter)
+ expect(component.isZoomSelected(ZoomSetting.Quarter)).toBeTruthy()
+ expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeFalsy()
+ })
+
it('should support updating notes dynamically', () => {
const notes = [
{
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index c1a96c168..30e34d9cf 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -124,7 +124,7 @@ enum ContentRenderType {
TIFF = 'tiff',
}
-enum ZoomSetting {
+export enum ZoomSetting {
PageFit = 'page-fit',
PageWidth = 'page-width',
Quarter = '.25',
@@ -328,6 +328,7 @@ export class DocumentDetailComponent
}
ngOnInit(): void {
+ this.setZoom(this.settings.get(SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING))
this.documentForm.valueChanges
.pipe(takeUntil(this.unsubscribeNotifier))
.subscribe(() => {
@@ -1072,14 +1073,13 @@ export class DocumentDetailComponent
}
}
- onZoomSelect(event: Event) {
- const setting = (event.target as HTMLSelectElement)?.value as ZoomSetting
- if (ZoomSetting.PageFit === setting) {
- this.previewZoomSetting = ZoomSetting.One
+ setZoom(setting: ZoomSetting) {
+ if (ZoomSetting.PageFit === setting || ZoomSetting.PageWidth === setting) {
this.previewZoomScale = setting
+ this.previewZoomSetting = ZoomSetting.One
} else {
- this.previewZoomScale = ZoomSetting.PageWidth
this.previewZoomSetting = setting
+ this.previewZoomScale = ZoomSetting.PageWidth
}
}
@@ -1089,6 +1089,14 @@ export class DocumentDetailComponent
)
}
+ isZoomSelected(setting: ZoomSetting): boolean {
+ if (this.previewZoomScale === ZoomSetting.PageFit) {
+ return setting === ZoomSetting.PageFit
+ }
+
+ return this.previewZoomSetting === setting
+ }
+
getZoomSettingTitle(setting: ZoomSetting): string {
switch (setting) {
case ZoomSetting.PageFit:
diff --git a/src-ui/src/app/data/ui-settings.ts b/src-ui/src/app/data/ui-settings.ts
index b8a319d9b..c5164d6e1 100644
--- a/src-ui/src/app/data/ui-settings.ts
+++ b/src-ui/src/app/data/ui-settings.ts
@@ -33,6 +33,8 @@ export const SETTINGS_KEYS = {
DARK_MODE_THUMB_INVERTED: 'general-settings:dark-mode:thumb-inverted',
THEME_COLOR: 'general-settings:theme:color',
USE_NATIVE_PDF_VIEWER: 'general-settings:document-details:native-pdf-viewer',
+ PDF_VIEWER_ZOOM_SETTING:
+ 'general-settings:document-details:pdf-viewer-zoom-setting',
DATE_LOCALE: 'general-settings:date-display:date-locale',
DATE_FORMAT: 'general-settings:date-display:date-format',
NOTIFICATIONS_CONSUMER_NEW_DOCUMENT:
@@ -269,4 +271,9 @@ export const SETTINGS: UiSetting[] = [
type: 'boolean',
default: false,
},
+ {
+ key: SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING,
+ type: 'string',
+ default: 'page-width', // ZoomSetting from 'document-detail.component'
+ },
]