chore: pdf reader improvements

e-picsa · Jul 23, 2023 · 20da5fa · 20da5fa
1 parent 2547322
commit 20da5fa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/apps/picsa-tools/manual-tool/src/app/components/pdf-viewer/pdf-viewer.component.html b/apps/picsa-tools/manual-tool/src/app/components/pdf-viewer/pdf-viewer.component.html
@@ -27,12 +27,13 @@
 
       <!-- <pdf-find-button [showFindButton]="true" [textLayer]="true"></pdf-find-button> -->
     </div>
-    <div [class.invisible]="false" id="toolbarViewerMiddle">
+    <!-- Only show zoom in/out buttons on web (native uses pinch zoom) -->
+    <div [class.invisible]="false" id="toolbarViewerMiddle" *ngIf="!isNative">
       <pdf-zoom-out id="zoomOut"></pdf-zoom-out>
       <pdf-zoom-in id="zoomIn"></pdf-zoom-in>
     </div>
     <div id="toolbarViewerRight">
-      <pdf-paging-area></pdf-paging-area>
+      <pdf-paging-area> </pdf-paging-area>
     </div>
   </div>
 </ng-template>

diff --git a/apps/picsa-tools/manual-tool/src/app/components/pdf-viewer/pdf-viewer.component.scss b/apps/picsa-tools/manual-tool/src/app/components/pdf-viewer/pdf-viewer.component.scss
@@ -11,6 +11,12 @@ ngx-extended-pdf-viewer {
   .toolbarButton {
     color: var(--color-primary-contrast) !important;
   }
+
+  // hide first/last page buttons
+  #primaryFirstPage,
+  #primaryLastPage {
+    display: none;
+  }
 }
 
 .error-message {

diff --git a/apps/picsa-tools/manual-tool/src/app/components/pdf-viewer/pdf-viewer.component.ts b/apps/picsa-tools/manual-tool/src/app/components/pdf-viewer/pdf-viewer.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Capacitor } from '@capacitor/core';
 import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';
 
 @Component({
@@ -10,6 +11,7 @@ import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';
 export class PdfViewerComponent {
   legacyBrowser = true;
   sidebarOpen = false;
+  public isNative = Capacitor.isNativePlatform();
   @Input() page?: number;
   @Input() src: string;
   constructor() {