Add Paperless zoom

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -1,9 +1,20 @@
 <pngx-page-header [(title)]="title">
-    <div class="input-group input-group-sm me-5 d-none d-md-flex" *ngIf="getContentType() === 'application/pdf' && !useNativePdfViewer">
+    <ng-container *ngIf="getContentType() === 'application/pdf' && !useNativePdfViewer">
-      <div class="input-group-text" i18n>Page</div>
+        <div class="input-group input-group-sm me-2 d-none d-md-flex">
-      <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
+            <div class="input-group-text" i18n>Page</div>
-      <div class="input-group-text" i18n>of {{previewNumPages}}</div>
+            <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
-    </div>
+            <div class="input-group-text" i18n>of {{previewNumPages}}</div>
+        </div>
+        <div class="input-group input-group-sm me-5 d-none d-md-flex">
+            <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
+            <select class="form-select" (change)="onZoomSelect($event)">
+                <option *ngFor="let setting of zoomSettings" [value]="setting" [selected]="previewZoomSetting == setting">
+                    {{ getZoomSettingTitle(setting) }}
+                </option>
+              </select>
+            <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
+        </div>
+    </ng-container>
 
     <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
         <svg class="buttonicon" fill="currentColor">
@@ -227,15 +238,8 @@
             <ngx-extended-pdf-viewer
                 [src]="previewUrl"
                 [useBrowserLocale]="true"
-                [showPagingButtons]="false"
+                [showToolbar]="false"
-                [showRotateButton]="false"
+                [zoom]="previewZoomSetting"
-                [showHandToolButton]="false"
-                [showOpenFileButton]="false"
-                [showDownloadButton]="false"
-                [showDrawEditor]="false"
-                [showTextEditor]="false"
-                [showSecondaryToolbarButton]="false"
-                [showStampEditor]="false"
                 (pagesLoaded)="onPagesLoaded($event)"
                 (pdfLoadingFailed)="onPdfLoadingFailed($event)"
                 [(page)]="previewCurrentPage">

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -87,6 +87,20 @@ enum DocumentDetailNavIDs {
   Permissions = 6,
 }
 
+enum ZoomSetting {
+  Auto = 'auto',
+  Actual = 'page-actual',
+  Fit = 'page-fit',
+  Width = 'page-width',
+  Quarter = '25%',
+  Half = '50%',
+  ThreeQuarters = '75%',
+  OneHundred = '100%',
+  OneHundredFifty = '150%',
+  TwoHundred = '200%',
+  ThreeHundred = '300%',
+}
+
 @Component({
   selector: 'pngx-document-detail',
   templateUrl: './document-detail.component.html',
@@ -138,6 +152,7 @@ export class DocumentDetailComponent
 
   previewCurrentPage: number = 1
   previewNumPages: number = 1
+  previewZoomSetting: ZoomSetting = ZoomSetting.Width
 
   store: BehaviorSubject<any>
   isDirty$: Observable<boolean>
@@ -920,4 +935,48 @@ export class DocumentDetailComponent
     this.updateFormForCustomFields(true)
     this.documentForm.updateValueAndValidity()
   }
+
+  onZoomSelect(event: Event) {
+    this.previewZoomSetting = (event.target as HTMLSelectElement)
+      ?.value as ZoomSetting
+  }
+
+  get zoomSettings() {
+    return Object.values(ZoomSetting)
+  }
+
+  getZoomSettingTitle(setting: ZoomSetting = null): string {
+    switch (setting) {
+      case ZoomSetting.Auto:
+        return $localize`Auto`
+      case ZoomSetting.Actual:
+        return $localize`Actual Size`
+      case ZoomSetting.Fit:
+        return $localize`Page Fit`
+      case ZoomSetting.Width:
+        return $localize`Page Width`
+      default:
+        return setting
+    }
+  }
+
+  increaseZoom(): void {
+    let currentIndex = Object.values(ZoomSetting).indexOf(
+      this.previewZoomSetting
+    )
+    if (currentIndex < 4) currentIndex = 7
+    this.previewZoomSetting =
+      Object.values(ZoomSetting)[
+        Math.min(Object.values(ZoomSetting).length - 1, currentIndex + 1)
+      ]
+  }
+
+  decreaseZoom(): void {
+    let currentIndex = Object.values(ZoomSetting).indexOf(
+      this.previewZoomSetting
+    )
+    if (currentIndex < 4) currentIndex = 7
+    this.previewZoomSetting =
+      Object.values(ZoomSetting)[Math.max(4, currentIndex - 1)]
+  }
 }