[Editor] Add a divider before the show all button

I overlooked it when implementing the toggle button.
mozilla · Mar 22, 2024 · 9732487 · 9732487
1 parent e7203f5
commit 9732487
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -1217,6 +1217,7 @@
 
       @media (prefers-color-scheme: dark) {
         --example-color: #80808e;
+        --divider-color: #8f8f9d;
       }
 
       @media screen and (forced-colors: active) {
@@ -1249,8 +1250,33 @@
 
   #editorHighlightVisibility {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     align-self: stretch;
+
+    .divider {
+      --divider-color: #f0f0f4;
+
+      @media (prefers-color-scheme: dark) {
+        --divider-color: #8f8f9d;
+      }
+
+      @media screen and (forced-colors: active) {
+        --divider-color: CanvasText;
+      }
+
+      margin-block: 4px;
+      width: 100%;
+      height: 1px;
+      background-color: var(--divider-color);
+    }
+
+    .toggler {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+    }
   }
 }
diff --git a/web/viewer.html b/web/viewer.html
@@ -185,8 +185,11 @@
               </div>
             </div>
             <div id="editorHighlightVisibility">
-              <label for="editorHighlightShowAll" class="editorParamsLabel" 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" tabindex="102"></button>
+              <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>
+                <button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
+              </div>
             </div>
           </div>
         </div>