Add Cargo.toml copy button to crate rows

[DSpeckhals]

To copy the most recent version of a crate to the clipboard, users would have to go to the crate's individual page. However, it would probably be convenient to have the same control on the search results page. To accomplish this, a new component was created to encapsulate the copy control and its notifications (success/failure). This new component was added to the search result page; the crate page was reworked to use it as well.

For this first run at the UI, I added the same copy button to the left of the name/link for the result. I'm open to any other ideas too!

Here are some screenshots to illustrate the changes:

Crate Page

Results Page

Fixes #1587

[rust-highfive]

Thanks for the pull request, and welcome! The Rust team is excited to review your changes, and you should hear from @carols10cents (or someone else) soon.

If any changes to this PR are deemed necessary, please add them as extra commits. This ensures that the reviewer can see what has changed since they last reviewed the code. Due to the way GitHub handles out-of-date commits, this should also make it reasonably obvious what issues have or haven't been addressed. Large or tricky changes may require several passes of review and changes.

Please see the contribution instructions for more information.

[carols10cents]

Thank you so much!!! The copy button works great!!

I wonder if it would look better if the copy button was after the crate name and before the badge? So that the crate name could still be left-aligned and directly above the description? I'm not a designer, but wdyt? I moved the markup over in the browser; the vertical alignment of the crate name, the copy button, and the version badge is messed up but I'm not sure how best to fix it:

Also, when doing a search and there's a crate whose name matches the search exactly, the "Copied!" text overlaps the clipboard icon a bit for that result:

Could you try resolving those two things? I'm not great at CSS, but I can spend a bit more time poking at it if you need help.

Also don't worry about the percy failure right now, we're changing the UI so that's expected. I'll approve the changes once we've got them the way we want them.

Thank you!!!

[DSpeckhals]

Thank you for the input! Now that I see the copy button to the left of the crate name, I think I like that better. As for the location of the "Copied!" text, I know the problem and I'll correct it.

[DSpeckhals]

What do you think of these changes? I made the icon a little smaller to better associate it with the crate name; another option would be to make it closer to the height of the badges. I personally like it smaller like the text, but it's not a strong opinion.

[carols10cents]

I like it, thank you!! The badges not being the same height as the text is definitely a pre-existing condition 😥

The "Copied!" text on exact match search results is now overlapping the badges a bit though, not sure if that was supposed to be fixed with this latest commit or not:

[DSpeckhals]

I fixed the notification positioning. It was incorrect in exact matches (like your screenshot).

[carols10cents]

Looks great!!! Thank you so much!!

@bors r+

[bors]

📌 Commit f24e3b3 has been approved by carols10cents

[bors]

⌛ Testing commit f24e3b3 with merge 9885991...

[bors]

☀️ Test successful - checks-travis
Approved by: carols10cents
Pushing 9885991 to master...