From 5df7c970742f16c809c2543858e9290a00832aa1 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sat, 18 Nov 2023 22:05:21 +0100
Subject: [PATCH] Move the editor-buttons in the main toolbar

By introducing a CSS variable for the editor-toolbars we're able to handle resizing of the viewer without complicating the code too much.
---
 web/viewer.css  | 10 +++++++---
 web/viewer.html | 28 ++++++++++++++--------------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index b271e9802..8fbaae955 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -28,6 +28,7 @@
 
   --toolbar-icon-opacity: 0.7;
   --doorhanger-icon-opacity: 0.9;
+  --editor-toolbar-base-offset: 105px;
 
   --main-color: rgb(12 12 13);
   --body-bg-color: rgb(212 212 215);
@@ -572,15 +573,15 @@ body {
 }
 
 #editorStampParamsToolbar {
-  inset-inline-end: 40px;
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px);
 }
 
 #editorInkParamsToolbar {
-  inset-inline-end: 68px;
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 28px);
 }
 
 #editorFreeTextParamsToolbar {
-  inset-inline-end: 96px;
+  inset-inline-end: calc(var(--editor-toolbar-base-offset) + 56px);
 }
 
 #editorStampAddImage::before {
@@ -1469,6 +1470,9 @@ dialog :link {
 }
 
 @media all and (max-width: 750px) {
+  :root {
+    --editor-toolbar-base-offset: 40px;
+  }
   #outerContainer .hiddenMediumView {
     display: none;
   }
diff --git a/web/viewer.html b/web/viewer.html
index c9acfd416..a10b570cf 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -333,31 +333,31 @@ See https://github.com/adobe-type-tools/cmap-resources
                 <span id="numPages" class="toolbarLabel"></span>
               </div>
               <div id="toolbarViewerRight">
-                <button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="32" data-l10n-id="pdfjs-print-button">
-                  <span data-l10n-id="pdfjs-print-button-label">Print</span>
-                </button>
-
-                <button id="download" class="toolbarButton hiddenMediumView" title="Save" tabindex="33" data-l10n-id="pdfjs-save-button">
-                  <span data-l10n-id="pdfjs-save-button-label">Save</span>
-                </button>
-
-                <div class="verticalToolbarSeparator hiddenMediumView"></div>
-
                 <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
-                  <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-free-text-button">
+                  <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-free-text-button">
                     <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
                   </button>
-                  <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="35" data-l10n-id="pdfjs-editor-ink-button">
+                  <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-ink-button">
                     <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
                   </button>
-                  <button id="editorStamp" class="toolbarButton" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="36" data-l10n-id="pdfjs-editor-stamp-button">
+                  <button id="editorStamp" class="toolbarButton" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-stamp-button">
                     <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
                   </button>
                 </div>
 
                 <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
 
-                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="48" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
+                <button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button">
+                  <span data-l10n-id="pdfjs-print-button-label">Print</span>
+                </button>
+
+                <button id="download" class="toolbarButton hiddenMediumView" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button">
+                  <span data-l10n-id="pdfjs-save-button-label">Save</span>
+                </button>
+
+                <div class="verticalToolbarSeparator hiddenMediumView"></div>
+
+                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
                   <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
                 </button>
               </div>