ux: make the copying action more user friendly

Signed-off-by: zFernand0 <[email protected]>
zFernand0 · Aug 1, 2024 · a200e8c · a200e8c
1 parent f8a8085
commit a200e8c
Showing 1 changed file with 51 additions and 1 deletion.
diff --git a/src/content.ts b/src/content.ts
@@ -8,6 +8,7 @@ function createCopyButton() {
     button.style.cursor = 'pointer';
     button.style.padding = '0px 5px 0px 0px'; // Remove padding
     button.style.display = 'inline-flex'; // Ensure it aligns properly
+    button.style.position = 'relative'; // For positioning the indicator
 
     const svg = `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" class="icon-md-heavy">
@@ -19,14 +20,63 @@ function createCopyButton() {
     return button;
 }
 
+// Function to show the green checkmark and a floating "Copied!" indicator
+function showIndicator(button: HTMLElement) {
+    const originalSVG = button.innerHTML;
+    const checkmarkSVG = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" class="icon-md-heavy">
+            <path fill="green" d="M20.285 6.708a1 1 0 0 0-1.49-1.342l-9.052 10.048L5.227 12.08a1 1 0 1 0-1.454 1.372l5.263 5.57a1 1 0 0 0 1.453-.002l9.796-10.312z"/>
+        </svg>`;
+
+    // Change the button SVG to checkmark
+    button.innerHTML = checkmarkSVG;
+
+    // Revert back to original SVG after 1 second
+    setTimeout(() => {
+        button.innerHTML = originalSVG;
+    }, 1000);
+
+    // Create and show the floating "Copied!" indicator
+    const indicator = document.createElement('div');
+    indicator.innerText = 'Copied!';
+    indicator.style.position = 'absolute';
+    indicator.style.top = '-20px';
+    indicator.style.right = '0';
+    indicator.style.backgroundColor = '#4caf50'; // Green background
+    indicator.style.color = 'white';
+    indicator.style.padding = '2px 5px';
+    indicator.style.borderRadius = '3px';
+    indicator.style.fontSize = '12px';
+    indicator.style.opacity = '0';
+    indicator.style.transition = 'opacity 0.5s';
+
+    button.appendChild(indicator);
+
+    // Fade in
+    requestAnimationFrame(() => {
+        indicator.style.opacity = '1';
+    });
+
+    // Fade out after 1 second
+    setTimeout(() => {
+        indicator.style.opacity = '0';
+        // Remove the indicator after transition
+        setTimeout(() => {
+            button.removeChild(indicator);
+        }, 500);
+    }, 1000);
+}
+
 // Function to copy the inner text of the selected element to the clipboard
 function copyToClipboard(event: MouseEvent) {
     const button = event.currentTarget as HTMLElement;
     const parent = button.parentElement;
 
     if (parent) {
         const textToCopy = parent.innerText;
-        navigator.clipboard.writeText(textToCopy).catch(err => {
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            showIndicator(button);
+        }).catch(err => {
             console.error('Failed to copy: ', err);
         });
     }