Merge pull request #20194 from calixteman/update_comment_icon

calixteman · web-flow · commit 261c1f9e0562 · 2025-08-25T20:07:37.000+02:00
[Editor] Change the icon for inline comments
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -230,7 +230,6 @@
     --editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg);
     --editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33);
     --editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg);
-    --editor-toolbar-comment-edit-image: url(images/comment-editButton.svg);
     --editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe);
     --editor-toolbar-border-color: #8f8f9d;
     --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
@@ -343,7 +342,7 @@
         }
 
         &.commentButton::before {
-          mask-image: var(--editor-toolbar-comment-edit-image);
+          mask-image: var(--comment-edit-button-icon);
         }
 
         &.deleteButton::before {
@@ -489,7 +488,7 @@
 
         &::before {
           content: "";
-          mask-image: var(--editor-toolbar-comment-edit-image);
+          mask-image: var(--comment-edit-button-icon);
           mask-repeat: no-repeat;
           mask-position: center;
           display: inline-block;
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
@@ -17,7 +17,6 @@
   color-scheme: only light;
 
   --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
-  --comment-edit-image: url(images/comment-inline-editButton.svg);
   --input-focus-border-color: Highlight;
   --input-focus-outline: 1px solid Canvas;
   --input-unfocused-border-color: transparent;
diff --git a/web/comment_manager.css b/web/comment_manager.css
@@ -310,7 +310,7 @@
       height: 100%;
       mask-repeat: no-repeat;
       mask-size: cover;
-      mask-image: var(--comment-edit-image);
+      mask-image: var(--comment-edit-button-icon);
       background-color: var(--comment-button-fg);
       margin: 0;
       padding: 0;
diff --git a/web/images/comment-editButton.svg b/web/images/comment-editButton.svg
@@ -1,3 +1,8 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4686 2.68492L12.9276 2.14392H2.40626L1.86526 2.68492V10.1102L2.40626 10.6512H6.71147C6.92794 10.6511 7.14165 10.7265 7.31497 10.8571L10.4357 13.3978V11.2299C10.4357 11.1049 10.485 10.9851 10.5795 10.8906C10.674 10.7961 10.7938 10.7468 10.9188 10.7468H12.9276L13.4686 10.2058V2.68492ZM2.52747 0.805556H12.7181C13.2412 0.805556 13.7478 1.01961 14.1371 1.40889C14.5264 1.79817 14.7405 2.30481 14.7405 2.82792V9.82792C14.7405 10.351 14.5264 10.8577 14.1371 11.247C13.7478 11.6363 13.2412 11.8503 12.7181 11.8503H11.4686V14.2055H10.4357L6.62747 11.8503H2.52747C2.00436 11.8503 1.49772 11.6363 1.10844 11.247C0.719162 10.8577 0.505107 10.351 0.505107 9.82792V2.82792C0.505107 2.30481 0.719162 1.79817 1.10844 1.40889C1.49772 1.01961 2.00436 0.805556 2.52747 0.805556ZM10.824 5.12016H4.46259C4.30418 5.12016 4.15436 5.05707 4.04541 4.94812C3.93646 4.83917 3.87337 4.68935 3.87337 4.53094C3.87337 4.37253 3.93646 4.22271 4.04541 4.11376C4.15436 4.00481 4.30418 3.94172 4.46259 3.94172H10.824C10.9824 3.94172 11.1322 4.00481 11.2412 4.11376C11.3501 4.22271 11.4132 4.37253 11.4132 4.53094C11.4132 4.68935 11.3501 4.83917 11.2412 4.94812C11.1322 5.05707 10.9824 5.12016 10.824 5.12016ZM8.82403 8.16137H4.46259C4.30418 8.16137 4.15436 8.09828 4.04541 7.98933C3.93646 7.88038 3.87337 7.73056 3.87337 7.57215C3.87337 7.41374 3.93646 7.26392 4.04541 7.15497C4.15436 7.04602 4.30418 6.98293 4.46259 6.98293H8.82403C8.98244 6.98293 9.13226 7.04602 9.24121 7.15497C9.35016 7.26392 9.41325 7.41374 9.41325 7.57215C9.41325 7.73056 9.35016 7.88038 9.24121 7.98933C9.13226 8.09828 8.98244 8.16137 8.82403 8.16137Z" fill="black"/>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M10.75 7.5H12.25V6H10.75V7.5Z" fill="black"/>
+    <path d="M7.5 7.5H9V6H7.5V7.5Z" fill="black"/>
+    <path d="M4.25 7.5H5.75V6H4.25V7.5Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0.5C0.895786 0.5 0 1.39579 0 2.5V11C0 12.1042 0.895786 13 2 13H3V15.75C3 16.0405 3.16778 16.305 3.43066 16.4287C3.6937 16.5523 4.00473 16.5126 4.22852 16.3271L8.27051 12.9775L13.9941 12.9961C15.1007 12.9991 15.9999 12.1033 16 10.9961V2.5C16 1.39579 15.1042 0.5 14 0.5H2ZM14 2C14.2758 2 14.5 2.22421 14.5 2.5V10.9961C14.4999 11.2727 14.2753 11.4969 13.998 11.4961L8.00195 11.4775L7.87207 11.4893C7.74389 11.5115 7.62281 11.5664 7.52148 11.6504L4.5 14.1543V12.25C4.5 11.8358 4.16421 11.5 3.75 11.5H2C1.72421 11.5 1.5 11.2758 1.5 11V2.5C1.5 2.22421 1.72421 2 2 2H14Z" fill="black"/>
+  </g>
+</svg>
diff --git a/web/images/comment-inline-editButton.svg b/web/images/comment-inline-editButton.svg
diff --git a/web/viewer.css b/web/viewer.css
@@ -144,6 +144,7 @@
   );
   --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
   --editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg);
+  --comment-edit-button-icon: url(images/comment-editButton.svg);
 }
 
 :root:dir(rtl) {

Original file line number	Diff line number	Diff line change
`@@ -144,6 +144,7 @@`
`144`	`144`	`);`
`145`	`145`	`--secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);`
`146`	`146`	`--editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg);`
	`147`	`+ --comment-edit-button-icon: url(images/comment-editButton.svg);`
`147`	`148`	`}`
`148`	`149`
`149`	`150`	`:root:dir(rtl) {`