Merge pull request #1394 from notriddle/rustdoc-clipboard-icon

Use the same icon for clipboard button that crates.io itself uses

Author: Nemo157

static/index.js

@@ -3,27 +3,41 @@ function formatCrateName(crateTitleAndVersion) {
     return stringParts[0] + ' = "' + stringParts[1] + '"';
 }
 
-function copyTextHandler() {
-    const crateTitleAndVersion = document.getElementById("crate-title");
-    // On rustdoc pages, we use `textTransform: uppercase`, which copies as uppercase.
-    // To avoid that, reset the styles temporarily.
-    const oldTransform = crateTitleAndVersion.style.textTransform;
-    crateTitleAndVersion.style.textTransform = "none";
-    const temporaryInput = document.createElement("input");
-
-    temporaryInput.type = "text";
-    temporaryInput.value = formatCrateName(crateTitleAndVersion.innerText);
-
-    document.body.append(temporaryInput);
-    temporaryInput.select();
-    document.execCommand("copy");
-
-    temporaryInput.remove();
-    crateTitleAndVersion.style.textTransform = oldTransform;
-}
-
 (function() {
     const clipboard = document.getElementById("clipboard");
+    let resetClipboardTimeout = null;
+    let resetClipboardIcon = clipboard.innerHTML;
+
+    function resetClipboard() {
+        resetClipboardTimeout = null;
+        clipboard.innerHTML = resetClipboardIcon;
+    }
+
+    function copyTextHandler() {
+        const crateTitleAndVersion = document.getElementById("crate-title");
+        // On rustdoc pages, we use `textTransform: uppercase`, which copies as uppercase.
+        // To avoid that, reset the styles temporarily.
+        const oldTransform = crateTitleAndVersion.style.textTransform;
+        crateTitleAndVersion.style.textTransform = "none";
+        const temporaryInput = document.createElement("input");
+
+        temporaryInput.type = "text";
+        temporaryInput.value = formatCrateName(crateTitleAndVersion.innerText);
+
+        document.body.append(temporaryInput);
+        temporaryInput.select();
+        document.execCommand("copy");
+
+        temporaryInput.remove();
+        crateTitleAndVersion.style.textTransform = oldTransform;
+
+        clipboard.textContent = "✓";
+        if (resetClipboardTimeout !== null) {
+            clearTimeout(resetClipboardTimeout);
+        }
+        resetClipboardTimeout = setTimeout(resetClipboard, 1000);
+    }
+
     if (clipboard != null) clipboard.addEventListener("click", copyTextHandler);
     for (const e of document.querySelectorAll('a[data-fragment="retain"]')) {
         e.addEventListener('mouseover', () => e.hash = document.location.hash);

templates/clipboard.svg

@@ -27,7 +27,7 @@ <h1 id="crate-title">
                         {{ title }}
                     {%- else -%}
                         {{ metadata.name }} {{ metadata.version }}
-                        {{ "copy" | far(id="clipboard", aria_label="Copy crate name and version information", fa=true) }}
+                        <span id="clipboard" class="fa-svg fa-svg-fw" title="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
                     {%- endif -%}
                 </h1>
 

templates/header/package_navigation.html

@@ -19,7 +19,7 @@
                 <ul class="pure-menu-list menu-item-divided">
                     <li class="pure-menu-heading" id="crate-title">
                         {{ krate.name }} {{ krate.version }}
-                        {{ "copy" | far(id="clipboard", aria_label="Copy crate name and version information", fw=true) }}
+                        <span id="clipboard" class="fa-svg fa-svg-fw" title="Copy crate name and version information">{%- include "clipboard.svg" -%}</span>
                     </li>
 
                     <li class="pure-menu-item">

templates/rustdoc/topbar.html

@@ -6,6 +6,10 @@
     min-height: calc(100vh - #{$top-navbar-height + $footer-height + 2});
 }
 
+#clipboard {
+    cursor: pointer;
+}
+
 // Force the navbar to be left-aligned on rustdoc pages
 body.rustdoc-page > .nav-container > .container {
     margin-left: 0;