Merge pull request #18786 from calixteman/update_toolbar_height

Increase the size of the toolbar depending on the uidensity (bug 1171799)
mozilla · Sep 25, 2024 · 4ab381f · 4ab381f
2 parents 4575810 + e23159c
commit 4ab381f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/web/toolbar.js b/web/toolbar.js
@@ -126,7 +126,18 @@ class Toolbar {
     this.reset();
   }
 
-  #updateToolbarDensity() {}
+  #updateToolbarDensity({ value }) {
+    let name = "normal";
+    switch (value) {
+      case 1:
+        name = "compact";
+        break;
+      case 2:
+        name = "touch";
+        break;
+    }
+    document.documentElement.setAttribute("data-toolbar-density", name);
+  }
 
   #setAnnotationEditorUIManager(uiManager, parentContainer) {
     const colorPicker = new ColorPicker({ uiManager });

diff --git a/web/viewer.css b/web/viewer.css
@@ -227,6 +227,15 @@
   }
 }
 
+html {
+  &[data-toolbar-density="compact"] {
+    --toolbar-height: 30px;
+  }
+  &[data-toolbar-density="touch"] {
+    --toolbar-height: 44px;
+  }
+}
+
 html,
 body {
   height: 100%;
@@ -1093,6 +1102,10 @@ dialog :link {
     height: 100%;
   }
 
+  .menu {
+    padding-block: 5px;
+  }
+
   .menuContainer {
     width: 100%;
     height: auto;
@@ -1103,7 +1116,6 @@ dialog :link {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    padding-block: 5px;
     overflow-y: auto;
   }
 

diff --git a/web/viewer.html b/web/viewer.html
@@ -307,7 +307,7 @@
                     <button id="editorStampButton" class="toolbarButton" type="button" disabled="disabled" title="Add or edit images" role="radio" aria-expanded="false" aria-haspopup="true" aria-controls="editorStampParamsToolbar" tabindex="0" data-l10n-id="pdfjs-editor-stamp-button">
                       <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
                     </button>
-                    <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
+                    <div class="editorParamsToolbar hidden doorHangerRight menu" id="editorStampParamsToolbar">
                       <div class="menuContainer">
                         <button id="editorStampAddImage" class="toolbarButton labeled" type="button" title="Add image" tabindex="0" data-l10n-id="pdfjs-editor-stamp-add-image-button">
                           <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add image</span>
@@ -335,7 +335,7 @@
                   <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" title="Tools" tabindex="0" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-haspopup="true" aria-controls="secondaryToolbar">
                     <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
                   </button>
-                  <div id="secondaryToolbar" class="hidden doorHangerRight">
+                  <div id="secondaryToolbar" class="hidden doorHangerRight menu">
                     <div id="secondaryToolbarButtonContainer" class="menuContainer">
 <!--#if GENERIC-->
                       <button id="secondaryOpenFile" class="toolbarButton labeled" type="button" title="Open File" tabindex="0" data-l10n-id="pdfjs-open-file-button">