#2651 fixed the [showPrintButton] and [showDrawEditor]; removed t…

…he `verticalToolbarSeparator` divs because they are always invisible
stephanrauh · Nov 14, 2024 · a29fa72 · a29fa72
1 parent e56c409
commit a29fa72
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 46 deletions.
diff --git a/projects/ngx-extended-pdf-viewer/assets/viewer-4.7.697.mjs b/projects/ngx-extended-pdf-viewer/assets/viewer-4.7.697.mjs
@@ -22298,7 +22298,7 @@ const {
 } = globalThis.pdfjsLib;
 
 ;// ./web/ngx-extended-pdf-viewer-version.js
-const ngxExtendedPdfViewerVersion = '22.0.0-alpha.9';
+const ngxExtendedPdfViewerVersion = '22.0.0-alpha.10';
 ;// ./web/event_utils.js
 const WaitOnType = {
   EVENT: "event",

diff --git a/projects/ngx-extended-pdf-viewer/bleeding-edge/viewer-4.7.697.mjs b/projects/ngx-extended-pdf-viewer/bleeding-edge/viewer-4.7.697.mjs
@@ -22298,7 +22298,7 @@ const {
 } = globalThis.pdfjsLib;
 
 ;// ./web/ngx-extended-pdf-viewer-version.js
-const ngxExtendedPdfViewerVersion = '22.0.0-alpha.9';
+const ngxExtendedPdfViewerVersion = '22.0.0-alpha.10';
 ;// ./web/event_utils.js
 const WaitOnType = {
   EVENT: "event",

diff --git a/projects/ngx-extended-pdf-viewer/changelog.md b/projects/ngx-extended-pdf-viewer/changelog.md
@@ -610,3 +610,4 @@
 - 22.0.0-alpha.6 #2597 stop the viewer from scrolling when using the ink tool with touch devices
 - 22.0.0-alpha.7 #2540 fixed `pdfDefaultOptions.workerPort`
 - 22.0.0-alpha.9 #2645 disable the spread button if they're useless, even if they are hiding in the secondary menu. (The feature was already there, but it only worked for buttons in the primary toolbar). Also added `[showScrollingButtons]` as a shortcut for `[showBookModeButton]`, `[showSinglePageModeButton]`, `[showVerticalScrollButton]`,`[showHorizontalScrollButton]`, and `[showInfiniteScrollButton]`. This fixes the showcase demo and IMHO it simply makes sense to activate or deactivate all these buttons at once. Strictly speaking, this is the successor of `[showScrollingButton]` (in singular form). Re-introducing an attribute with a slightly different name is an annoying nuisance, but it makes sense because I've deprecated the old attribute in version 18 and the plural form expresses the meaning of the attribute more clearly. If you're updating from version 16 or below to version 22 or above, please bear with me!; #2643 migrate to control flow syntax. Kudos to Julian for submittig this pull request!
+- 22.0.0-alpha.10 #2651 fixed the `[showPrintButton]` and `[showDrawEditor]`; removed the `verticalToolbarSeparator` divs because they are always invisible
diff --git a/projects/ngx-extended-pdf-viewer/package.json b/projects/ngx-extended-pdf-viewer/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-extended-pdf-viewer",
   "description": "Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.",
-  "version": "22.0.0-alpha.9",
+  "version": "22.0.0-alpha.10",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/stephanrauh/ngx-extended-pdf-viewer"

diff --git a/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.html b/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.html
@@ -1,8 +1,8 @@
 @if (theme === 'dark') {
-  <pdf-dark-theme></pdf-dark-theme>
+<pdf-dark-theme></pdf-dark-theme>
 }
 @if (theme === 'light') {
-  <pdf-light-theme></pdf-light-theme>
+<pdf-light-theme></pdf-light-theme>
 }
 <pdf-acroform-default-theme></pdf-acroform-default-theme>
 
@@ -15,10 +15,10 @@
       <div class="body pdf-js-version-{{ majorMinorPdfJsVersion }}" [style.backgroundColor]="backgroundColor">
         <div id="outerContainer">
           @if (showFreeFloatingBar) {
-            <div class="free-floating-bar">
-              <ng-content *ngTemplateOutlet="customFreeFloatingBar ? customFreeFloatingBar : defaultFreeFloatingBar">
-              </ng-content>
-            </div>
+          <div class="free-floating-bar">
+            <ng-content *ngTemplateOutlet="customFreeFloatingBar ? customFreeFloatingBar : defaultFreeFloatingBar">
+            </ng-content>
+          </div>
           }
           <pdf-sidebar #pdfsidebar [sidebarVisible]="sidebarVisible || false" [showSidebarButton]="showSidebarButton"
             [customSidebar]="customSidebar" [customThumbnail]="customThumbnail"
@@ -42,7 +42,7 @@
               [showPreviousAndNextPageButtons]="showPreviousAndNextPageButtons" [showPageNumber]="showPageNumber"
               [showPageLabel]="showPageLabel"
               [showPresentationModeButton]="showPresentationModeButton && pageViewMode !== 'book'"
-              [showPrintButton]="showPrintButton && enablePrint" [showRotateCwButton]="showRotateCwButton"
+              [showPrintButton]="enablePrint ? showPrintButton : false" [showRotateCwButton]="showRotateCwButton"
               [showRotateCcwButton]="showRotateCcwButton"
               [showSecondaryToolbarButton]="showSecondaryToolbarButton && !service.secondaryMenuIsEmpty"
               [showSidebarButton]="showSidebarButton" [showSinglePageModeButton]="showSinglePageModeButton"
@@ -52,17 +52,17 @@
               [showZoomButtons]="showZoomButtons && pageViewMode !== 'book'" [showZoomDropdown]="showZoomDropdown"
               [spread]="spread" [textLayer]="textLayer" [toolbarMarginTop]="toolbarMarginTop"
               [toolbarWidth]="toolbarWidth" [zoomLevels]="zoomLevels" [findbarVisible]="findbarVisible"
-            [hasTextLayer]="hasTextLayer"></pdf-toolbar>
+              [hasTextLayer]="hasTextLayer"></pdf-toolbar>
 
             <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
               <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
                 <div id="editorHighlightColorPicker" class="colorPicker">
                   <span id="highlightColorPickerLabel" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
+                    data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
                 </div>
                 <div id="editorHighlightThickness">
                   <label for="editorFreeHighlightThickness" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
+                    data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
                   <div class="thicknessPicker">
                     <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider"
                       data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1" />
@@ -72,9 +72,9 @@
                   <div class="divider"></div>
                   <div class="toggler">
                     <label for="editorHighlightShowAll" class="editorParamsLabel"
-                    data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
+                      data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
                     <button id="editorHighlightShowAll" class="toggle-button"
-                    data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true"></button>
+                      data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true"></button>
                   </div>
                 </div>
               </div>
@@ -85,12 +85,12 @@
               <div class="editorParamsToolbarContainer">
                 <div class="editorParamsSetter">
                   <label for="editorFreeTextColor" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-free-text-color-input">Font Color</label>
+                    data-l10n-id="pdfjs-editor-free-text-color-input">Font Color</label>
                   <input type="color" id="editorFreeTextColor" class="editorParamsColor" />
                 </div>
                 <div class="editorParamsSetter">
                   <label for="editorFreeTextFontSize" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-free-text-size-input">Font Size</label>
+                    data-l10n-id="pdfjs-editor-free-text-size-input">Font Size</label>
                   <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5"
                     max="100" step="1" />
                 </div>
@@ -102,18 +102,18 @@
               <div class="editorParamsToolbarContainer">
                 <div class="editorParamsSetter">
                   <label for="editorInkColor" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
+                    data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
                   <input type="color" id="editorInkColor" class="editorParamsColor" />
                 </div>
                 <div class="editorParamsSetter">
                   <label for="editorInkThickness" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
+                    data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
                   <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20"
                     step="1" />
                 </div>
                 <div class="editorParamsSetter">
                   <label for="editorInkOpacity" class="editorParamsLabel"
-                  data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
+                    data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
                   <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100"
                     step="1" />
                 </div>
@@ -140,15 +140,15 @@
 
             <div id="viewerContainer" [style.top]="viewerPositionTop" [style.backgroundColor]="backgroundColor">
               @if (hasSignature && showUnverifiedSignatures) {
-                <div class="unverified-signature-warning">
-                  {{
-                  'unverified-signature-warning'
-                  | translate
-                  : "This PDF file contains a digital signature. The PDF viewer can't verify if the signature is valid.
-                  Please download the file and open it in Acrobat Reader to verify the signature is valid."
-                  | async
-                  }}
-                </div>
+              <div class="unverified-signature-warning">
+                {{
+                'unverified-signature-warning'
+                | translate
+                : "This PDF file contains a digital signature. The PDF viewer can't verify if the signature is valid.
+                Please download the file and open it in Acrobat Reader to verify the signature is valid."
+                | async
+                }}
+              </div>
               }
               <div id="viewer" class="pdfViewer" (dblclick)="zoomToPageWidth($event)"></div>
             </div>

diff --git a/...viewer/src/lib/sidebar/pdf-sidebar/pdf-sidebar-toolbar/pdf-sidebar-toolbar.component.html b/...viewer/src/lib/sidebar/pdf-sidebar/pdf-sidebar-toolbar/pdf-sidebar-toolbar.component.html
@@ -81,8 +81,6 @@
 
   <div id="toolbarSidebarRight">
     <div id="outlineOptionsContainer" class="hidden">
-      <div class="verticalToolbarSeparator"></div>
-
       <button
         type="button"
         id="currentOutlineItem"

diff --git a/projects/ngx-extended-pdf-viewer/src/lib/toolbar/pdf-editor/pdf-editor.component.html b/projects/ngx-extended-pdf-viewer/src/lib/toolbar/pdf-editor/pdf-editor.component.html
@@ -1,16 +1,8 @@
 @if (!!showHighlightEditor || !!showStampEditor || !!showDrawEditor || !!showTextEditor) {
-  <div
-    id="editorModeButtons"
-    class="splitToolbarButton toggled hiddenTinyView"
-    role="radiogroup"
-    >
-    <pdf-highlight-editor [show]="showHighlightEditor"></pdf-highlight-editor>
-    <pdf-text-editor [show]="showTextEditor"></pdf-text-editor>
-    <pdf-stamp-editor [show]="showStampEditor"></pdf-stamp-editor>
-    <pdf-draw-editor [show]="showDrawEditor"></pdf-draw-editor>
-  </div>
-}
-
-@if (!!showStampEditor || !!showDrawEditor || !!showTextEditor) {
-  <div id="editorModeSeparator" class="verticalToolbarSeparator hiddenTinyView"></div>
-}
+<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
+  <pdf-highlight-editor [show]="showHighlightEditor"></pdf-highlight-editor>
+  <pdf-text-editor [show]="showTextEditor"></pdf-text-editor>
+  <pdf-stamp-editor [show]="showStampEditor"></pdf-stamp-editor>
+  <pdf-draw-editor [show]="showDrawEditor"></pdf-draw-editor>
+</div>
+}