Merge pull request #2932 from Sigma-8214/master

Update website Command Box

Author: kinnison

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

@@ -124,10 +124,11 @@ hr {
     color: white;
     padding: 1rem 1rem 1rem 0;
     width: 45rem;
+    height: auto;
     text-align: center;
-    border-radius: 3px;
+    border-radius: 3px 0 0 3px;
     box-shadow: inset 0px 0px 20px 0px #333333;
-    overflow: auto;
+    overflow: hidden;
     font-size: 0.6em;
     white-space: nowrap;
     height: 26px;
@@ -149,28 +150,39 @@ hr {
 #platform-instructions-default button.copy-button,
 #platform-instructions-unknown button.copy-button {
     height: 58px;
-    margin: 1px;
-    padding-right: 5px;
-    border-radius: 3px;
+    margin: 0;
+    padding: 0 5px 0 5px;
+    border-radius: 0 3px 3px 0;
+    border-left-width: 0px;
+    border-left-style: solid;
 }
 
 #platform-instructions-unix div.copy-icon,
 #platform-instructions-win32 div.copy-icon,
 #platform-instructions-win64 div.copy-icon,
 #platform-instructions-default div.copy-icon,
 #platform-instructions-unknown div.copy-icon {
-    margin-top: 12px;
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #platform-instructions-unix div.copy-button-text,
 #platform-instructions-win32 div.copy-button-text,
 #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;
     height: 15px;
+    position: relative;
+    top: 5px;
 }
 
 #platform-instructions-win32 a.windows-download,

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);
     }
 }