Skip to content

www: Correct UX of the copy button #2398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kinnison merged 1 commit into from
Jul 8, 2020
Merged

www: Correct UX of the copy button #2398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 46 additions & 7 deletions www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<title>rustup.rs - The Rust toolchain installer</title>
<meta name="keywords" content="Rust, Rust programming language, rustlang, rust-lang, Mozilla Rust, rustup">
<meta name="description" content="The Rust toolchain installer">

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="rustup.css">

Expand All @@ -27,13 +26,13 @@
<p>Run the following in your terminal, then follow the onscreen instructions.</p>
<div class="copy-container">
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<button class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button" onclick="handle_copy_button_click()">
<button id="copy-button-unix" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
<div class="copy-icon">
<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" alt="Copy curl command to clipboard to download Rustup">
<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" class="copy-button-text"></div>
<div id="copy-status-message-unix" class="copy-button-text"></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>
Expand All @@ -46,7 +45,17 @@
then follow the onscreen instructions.
</p>
<p>If you're a Windows Subsystem for Linux user run the following in your terminal, then follow the onscreen instructions to install Rust.</p>
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<div class="copy-container">
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<button id="copy-button-win32" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
<div class="copy-icon">
<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" alt="Copy curl command to clipboard to download Rustup">
<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>
</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>
</div>

Expand All @@ -57,7 +66,17 @@
then follow the onscreen instructions.
</p>
<p>If you're a Windows Subsystem for Linux user run the following in your terminal, then follow the onscreen instructions to install Rust.</p>
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<div class="copy-container">
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<button id="copy-button-win64" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
<div class="copy-icon">
<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" alt="Copy curl command to clipboard to download Rustup">
<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>
</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>
</div>

Expand All @@ -81,7 +100,17 @@
<!-- duplicate the default cross-platform instructions -->
<div>
<p>If you are running Unix,<br/>run the following in your terminal, then follow the onscreen instructions.</p>
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<div class="copy-container">
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<button id="copy-button-unknown" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
<div class="copy-icon">
<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" alt="Copy curl command to clipboard to download Rustup">
<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>
</button>
</div>
</div>

<hr/>
Expand Down Expand Up @@ -110,7 +139,17 @@
<div>
<p>To install Rust, if you are running Unix,<br/>run the following
in your terminal, then follow the onscreen instructions.</p>
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<div class="copy-container">
<pre>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
<button id="copy-button-default" class="copy-button" title="Copy curl command to clipboard to download Rustup" type="button">
<div class="copy-icon">
<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" alt="Copy curl command to clipboard to download Rustup">
<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>
</button>
</div>
</div>

<hr/>
Expand Down
42 changes: 37 additions & 5 deletions www/rustup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,24 +165,56 @@ function fill_in_bug_report_values() {
nav_app.textContent = navigator.appVersion;
}

function clear_copy_status_message() {
document.getElementById('copy-status-message').innerText = '';
function clear_copy_status_message(id) {
document.getElementById(id).innerText = '';
}

function handle_copy_button_click() {
function process_copy_button_click(id) {
try {
navigator.clipboard.writeText(rustup_install_command).then(function() {
document.getElementById('copy-status-message').innerText = 'Copied!'
document.getElementById(id).innerText = 'Copied!';
});
setTimeout(clear_copy_status_message, 5000);
setTimeout(function () {
clear_copy_status_message(id);
}, 5000);
} catch (e) {
console.log('Hit a snag when copying to clipboard:', e);
}
}

function handle_copy_button_click(e) {
switch (e.id) {
case 'copy-button-unix':
process_copy_button_click('copy-status-message-unix');
break;
case 'copy-button-win32':
process_copy_button_click('copy-status-message-win32');
break;
case 'copy-button-win64':
process_copy_button_click('copy-status-message-win64');
break;
case 'copy-button-unknown':
process_copy_button_click('copy-status-message-unknown');
break;
case 'copy-button-default':
process_copy_button_click('copy-status-message-default');
break;
}
}

function set_up_copy_button_clicks() {
var buttons = document.querySelectorAll(".copy-button");
buttons.forEach(function (element) {
element.addEventListener('click', function() {
handle_copy_button_click(element);
});
})
}

(function () {
adjust_for_platform();
set_up_cycle_button();
set_up_default_platform_buttons();
set_up_copy_button_clicks();
fill_in_bug_report_values();
}());
⚡