Copy to clipboard

[tancnle]

Description

A working proof-of-concept for 'Copy to clipboard' functionality in index and matrix page.
I was tossing around whether to go with third party libraries like

• https://clipboardjs.com (No Flash, 11kb minified)
• http://zeroclipboard.github.io/ (Flash, 31kb minified)

For our use cases, I decided to start with this simple gist and wired the markup a-la-carte. I am open up to more discussion on whether this is a sensible approach.

Demo

This closes #211

[bethesque]

This looks good! Can you see if you can fix whatever code climate is complaining about?

[tancnle]

Tested on

• Chrome 75.0.3770.142
• Firefox 68.0
• Safari 12.1.1

[bethesque]

Love the gif! What did you use to make it?

[bethesque]

Many thanks @tancnle!

[tancnle]

@bethesque I'd just learnt to do it as part of this PR :)

1. Screen record and clipping with Quicktime
2. Convert to gif using ffmpeg

brew install ffmpeg

ffmpeg -i copy-to-clipboard.mov copy-to-clipboard.gif

[bethesque]

@tancnle reckon you can fix the cell resize that happens when the sha is fully taking up the column and the icon appears?

[bethesque]

PS. Super fun making the gif!

[tancnle]

@bethesque Yes certainly can

[tancnle]

This is getting a little bit trickier than I thought. There are few options:

1. Always show clipboard icon
2. Fix table size (with table-layout: fixed) and set version columns to a fixed percentage (ie. 25%) and use word-wrap: break-word magic (see gif)

Any preferences @bethesque?

[bethesque]

Could you always include the icon, but style it as hidden until the mouseover event happens?