www: Fade 'Copied!' Text

Author: connorslade

www/index.html

@@ -35,7 +35,7 @@
             <path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"></path><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"></path>
           </svg>
         </div>
-        <div id="copy-status-message-unix" class="copy-button-text"></div>
+        <div id="copy-status-message-unix" class="copy-button-text">Copied!</div>
       </button>
     </div>
   <p class="other-platforms-help">You appear to be running Unix. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
@@ -56,7 +56,7 @@
           <path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"></path><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"></path>
         </svg>
       </div>
-      <div id="copy-status-message-win32" class="copy-button-text"></div>
+      <div id="copy-status-message-win32" class="copy-button-text">Copied!</div>
     </button>
   </div>
   <p class="other-platforms-help">You appear to be running Windows 32-bit. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
@@ -77,7 +77,7 @@
           <path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"></path><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"></path>
         </svg>
       </div>
-      <div id="copy-status-message-win64" class="copy-button-text"></div>
+      <div id="copy-status-message-win64" class="copy-button-text">Copied!</div>
     </button>
   </div>
   <p class="other-platforms-help">You appear to be running Windows 64-bit. If not, <a class="default-platform-button" href="#">display all supported installers</a>.</p>
@@ -111,7 +111,7 @@
             <path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"></path><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"></path>
           </svg>
         </div>
-        <div id="copy-status-message-unknown" class="copy-button-text"></div>
+        <div id="copy-status-message-unknown" class="copy-button-text">Copied!</div>
       </button>
     </div>
   </div>
@@ -150,7 +150,7 @@
             <path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"></path><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"></path>
           </svg>
         </div>
-        <div id="copy-status-message-default" class="copy-button-text"></div>
+        <div id="copy-status-message-default" class="copy-button-text">Copied!</div>
       </button>
     </div>
   </div>

www/rustup.css

@@ -175,6 +175,8 @@ hr {
 #platform-instructions-win64 div.copy-button-text,
 #platform-instructions-default div.copy-button-text,
 #platform-instructions-unknown div.copy-button-text {
+    transition: opacity 0.2s ease-in-out;
+    opacity: 0;
     font-size: 10px;
     color: green;
     width: 41px;

www/rustup.js

@@ -167,20 +167,14 @@ function fill_in_bug_report_values() {
     nav_app.textContent = navigator.appVersion;
 }
 
-function clear_copy_status_message(id) {
-    document.getElementById(id).innerText = '';
-}
-
 function process_copy_button_click(id) {
     try {
-        navigator.clipboard.writeText(rustup_install_command).then(function() {
-            document.getElementById(id).innerText = 'Copied!';
-        });
-        setTimeout(function () {
-            clear_copy_status_message(id);
-        }, 5000);
+        navigator.clipboard.writeText(rustup_install_command).then(() =>
+          document.getElementById(id).style.opacity = '1');
+
+        setTimeout(() => document.getElementById(id).style.opacity = '0', 3000);
     } catch (e) {
-        console.log('Hit a snag when copying to clipboard:', e);
+        console.log('Hit a snag when copying to clipboard: ', e);
     }
 }