Merge pull request #15146 from calixteman/editing_cursor

[Editor] Change the cursor to a pen for the Ink editor
mozilla · Jul 7, 2022 · 32d8c55 · 32d8c55
2 parents 403ed07 + edc9ad1
commit 32d8c55
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/src/display/editor/ink.js b/src/display/editor/ink.js
@@ -233,7 +233,6 @@ class InkEditor extends AnnotationEditor {
     }
 
     super.enableEditMode();
-    this.canvas.style.cursor = "pointer";
     this.div.draggable = false;
     this.canvas.addEventListener("mousedown", this.#boundCanvasMousedown);
     this.canvas.addEventListener("mouseup", this.#boundCanvasMouseup);
@@ -246,7 +245,6 @@ class InkEditor extends AnnotationEditor {
     }
 
     super.disableEditMode();
-    this.canvas.style.cursor = "auto";
     this.div.draggable = !this.isEmpty();
     this.div.classList.remove("editing");
 

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -18,6 +18,7 @@
   --hover-outline: dashed 2px blue;
   --freetext-line-height: 1.35;
   --freetext-padding: 2px;
+  --editorInk-editing-cursor: url(images/toolbarButton-editorInk.svg) 0 16;
 }
 
 @media (forced-colors: active) {
@@ -119,6 +120,7 @@
   height: 100%;
   z-index: 1;
   transform-origin: 0 0;
+  cursor: auto;
 }
 
 .annotationEditorLayer .background {
@@ -132,6 +134,7 @@
 
 .annotationEditorLayer .inkEditor.editing {
   resize: none;
+  cursor: var(--editorInk-editing-cursor), pointer;
 }
 
 .annotationEditorLayer .inkEditor .inkEditorCanvas {

diff --git a/web/images/toolbarButton-editorInk.svg b/web/images/toolbarButton-editorInk.svg