Add "copy to clipboard" button to boilerplate text fields
Closed, ResolvedPublic

Description

Migrated from: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/366

Narrative

As a user,I want to copy code with a single click, so that I can share/reuse it comfortably

Acceptance Criteria

  • user can click a button to copy the text to his clipborad. Effect is reasonably cross-browser compatible. (See GitHub or Gerrit for examples.)

Related Bugs

Related Stories

#147 / #148

Related Changesets

MingleTerminator raised the priority of this task from to Low.
In mingle on 2014-03-18 at 21:32:51, @Tgr wrote:

Very low priority, pre-selecting the text gives us an only slightly more inconvenient method of copying.

Tgr added a subscriber: Tgr.Dec 11 2014, 3:53 AM

ZeroClipboard looks like a nice library to do that.

Tgr added a comment.Dec 25 2014, 8:00 PM

Needs an icon. Could use the one from clippy - doesn't really match the Wikimedia design but used by a lot of apps (e.g. gerrit, github) so easy to recognize.

Pginer-WMF added subscribers: violetto, Pginer-WMF.

For ContentTranslation we used this paste icon which may work.
@violetto may want to review it (it's under the "Not final" icon folder).

Tgr added a project: Easy.Jan 10 2015, 10:13 PM

Could be useful for T76680 as well.

Amire80 set Security to None.
Restricted Application added a subscriber: Matanya. · View Herald TranscriptJul 3 2015, 3:40 PM
Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 5:55 PM

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Tgr added a comment.Sep 29 2015, 8:50 PM

Gilles pointed out https://hacks.mozilla.org/2015/09/flash-free-clipboard-for-the-web/ and http://caniuse.com/#feat=clipboard according to which pure-JS copy is now a viable option.

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptApr 27 2016, 4:24 PM

Where are those share/embed fields are located ? Can you send me a page where those fields exist ?

I will mentor this in Google-Code-In-2016
Seems simple enough for me to introduce the student to image viewer, while allowing me to go understand it better as well.
Looking forward to it.

Sn1per claimed this task.Dec 22 2016, 2:22 AM

Change 328696 had a related patch set uploaded (by Sn1per):
Add button to copy share/embed text to clipboard

https://gerrit.wikimedia.org/r/328696

What it looks like now:

What it looks like now:

Especially for the embed view, there are some small layout aspects you may consider. The icon placement makes it a bit difficult to visually group the elements consistently. I'd propose to adjust the spacing and the size of the icon so that the different groups (code box and settings) are more clear:

I included also a version with the guides I used as a reference (blue line is about 10px while the orange is 20px). These are intended to help visually grouping the code box with the annotation and copy action below it as one main element and the settings as another (the separation between the setting controls seem to be lost as part of a previous regression).

I've adjusted some margins accordingly and this is the embed pane now:

Tgr added a comment.Dec 25 2016, 4:13 AM

@Pginer-WMF what do you think, can we remove the select-on-click behavior after this and improve T110579, or is the copy icon not discoverable enough for that?

I've adjusted some margins accordingly and this is the embed pane now:

Thanks for the adjustments, @Sn1per. Looks good.

In T77295#2901218, @Tgr wrote:

@Pginer-WMF what do you think, can we remove the select-on-click behavior after this and improve T110579, or is the copy icon not discoverable enough for that?

The selection of the whole text seems to align with the main behaviour, so I'd not remove it.

It would be worth analysing whether we need to support selecting parts of the text (do we know of examples where this has been a limitation?).
If we need to support partial selection, it can be done in a similar way as major browsers do with the URL box: initial click when the input box gets focused selects the whole text but further clicks allow for regular text manipulation (in our case, that would be just selection of some parts, not modifying the text). This approach emphasises the main usecase of copying the whole thing using the well-known keyboard shortcut, but allows for more advanced usecases of extracting parts when needed.

Change 328696 merged by jenkins-bot:
Add button to select and copy share/embed text to clipboard

https://gerrit.wikimedia.org/r/328696

Tgr added a comment.Dec 27 2016, 7:07 AM

It would be worth analysing whether we need to support selecting parts of the text (do we know of examples where this has been a limitation?).

People have complained about it multiple times; I think it's not so much about partial selection than the ability to read the text before copying it.

If we need to support partial selection, it can be done in a similar way as major browsers do with the URL box: initial click when the input box gets focused selects the whole text but further clicks allow for regular text manipulation (in our case, that would be just selection of some parts, not modifying the text). This approach emphasises the main usecase of copying the whole thing using the well-known keyboard shortcut, but allows for more advanced usecases of extracting parts when needed.

Yeah, I tried that at some point in https://gerrit.wikimedia.org/r/#/c/178219/ but it turned out to be more complicated than what I had time for (due to some sort of browser difference in event handling).

Tgr renamed this task from Add "copy to clipboard" button to share/embed fields to Add "copy to clipboard" button to boilerplate text fields.Dec 27 2016, 7:09 AM

There is a boilerplate text field on download as well (after clicking on the show attribution footer); I don't think there is any reason not to add the copy button there. I guess the task was created before that text field existed and then we forgot to update it.

Change 329495 had a related patch set uploaded (by Sn1per):
Copy button for attribution text in download dialog

https://gerrit.wikimedia.org/r/329495

Change 329495 merged by jenkins-bot:
Copy button for attribution text in download dialog

https://gerrit.wikimedia.org/r/329495

Tgr closed this task as Resolved.Dec 30 2016, 10:57 PM

Thanks, @Sn1per, it looks great!

Restricted Application added a project: Multimedia. · View Herald TranscriptMar 6 2018, 11:47 PM