Adding check mark on successful copy

ytrepidorosonomous · Sep 29, 2023 · 4901e2c · 4901e2c
1 parent b89ebba
commit 4901e2c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/assets/css/codeblock.css b/assets/css/codeblock.css
@@ -1,6 +1,22 @@
 /* Styling for the copy button displayed in code blocks */
+.copy-success {
+  background: none;
+  border: none;
+
+  background-image: url("/icons/copy_success.svg");
+  width: 24px;
+  height: 24px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 10;
+}
+
 .copy-button {
-  color: white;
   background: none;
   border: none;
 

diff --git a/assets/js/codeblock.js b/assets/js/codeblock.js
@@ -12,7 +12,11 @@ document.addEventListener("DOMContentLoaded", function() {
     container.className = "code-container";
 
     // Copy clicked closure
-    copyButton.addEventListener("click", () => {
+    copyButton.addEventListener("click", (e) => {
+      e.target.className = "copy-success";
+      setTimeout(() => {
+        e.target.className = "copy-button";
+      }, 1000);
       const code = codeblock.textContent;
       navigator.clipboard.writeText(code);
     });
@@ -23,4 +27,4 @@ document.addEventListener("DOMContentLoaded", function() {
     // Add the copy button to the container
     container.appendChild(copyButton);
   })
-});
+});
diff --git a/static/icons/copy_success.svg b/static/icons/copy_success.svg