Add "Copy to clipboard" buttons

See #2855 (closed)

@dzaporozhets @skyruler If you can find time to give this some design love, we might be able to sneak this into 8.1. The implementation is actually quite simple.

I'd also like to add these "copy to clipboard" buttons on things like the Commit list for the commit SHAs.

@rspeicher what kind of design help do you need? Can you post a screenshot of what can be improved?

@rspeicher btw thanks for working on this! It would be really helpful

Easy-peasy!

Milestone changed to 8.2

Added 721 commits:

• 827e8c61...2b518230 - 716 commits from branch master
• 20164159 - Vendor clipboard.js
• c05275a2 - Add copy_to_clipboard JS
• 831deeea - Add styling for cross-project-reference clipboard button
• 18762583 - Add "Copy to clipboard" buttons
• 80108725 - Add clipboard buttons to each step of "How to merge"

I added a button to each "How to merge" step:

And next to each commit SHA in the commit list (this copies the full commit SHA, not just the short one):

And also for the "Cross-project reference" from the GIF above.

The awesome thing about this is it's super easy to implement:

• Add = clipboard_button immediately before or immediately after the element you want to copy from (the "next" element has priority over the "previous" one).
• That's it. If you need to customize what text is copied, add a data-clipboard-text to the sibling element that contains the desired text.

I think the commit list button looks bad, if you have ideas to fix @dzaporozhets @skyruler @creamzy

Title changed from WIP: Clipboard.js proof of concept to Add "Copy to clipboard" buttons

Added 1 commit:

• 03cfda94 - Remove unused argument from clipboard_button helper

Status changed to merged

mentioned in commit 0bb50ea0