fix copy button color bug

seung-lab · Sep 27, 2022 · c9d1054 · c9d1054
1 parent d937f81
commit c9d1054
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/neuroglancer/widget/segment_set_widget.css b/src/neuroglancer/widget/segment_set_widget.css
@@ -73,4 +73,8 @@
   width: 1.6em;
   margin: 3px;
   vertical-align: bottom;
+}
+
+.segment-copy-pressed {
+    background-color: rgb(0, 255, 0);
 }
diff --git a/src/neuroglancer/widget/segment_set_widget.ts b/src/neuroglancer/widget/segment_set_widget.ts
@@ -500,8 +500,6 @@ export class SegmentSetWidget extends RefCounted {
 
   private static addCopyToClipboardEventToButton(
       button: HTMLButtonElement, stringCreator: () => string) {
-    const defaultButtonColor = 'rgb(0, 255, 0)';
-    const pressedButtonColor = 'rgb(240, 240, 240)';
     button.addEventListener('click', function(this: HTMLButtonElement) {
       const handleCopy = (e: ClipboardEvent) => {
         const {clipboardData} = e;
@@ -510,11 +508,9 @@ export class SegmentSetWidget extends RefCounted {
         }
         e.preventDefault();
         document.removeEventListener('copy', handleCopy);
-        this.style.backgroundColor = defaultButtonColor;
+        this.classList.toggle('segment-copy-pressed', true);
         setTimeout(() => {
-          if (this.style.backgroundColor === defaultButtonColor) {
-            this.style.backgroundColor = pressedButtonColor;
-          }
+          this.classList.toggle('segment-copy-pressed', false);
         }, 300);
       };
       document.addEventListener('copy', handleCopy);