feat: Add a copy URI icon

[HagerDakroury]

Checklist

• I indicated which issue (if any) is closed with this PR using closing keywords
• I only changed lines related to my PR (no bulk reformatting)
• I indicated the source and check the license if I re-use code, or I did not re-use code
• I made my best to solve only one issue in this PR, or explain why multi had to be solved at once.

Issue

closes #40

Details

Further Enhancements

1. Make the icon's color match the URI
2. Fix the tooltip position (looks like a common issue,see Fix Community Usage's tooltip position #210 , and according to a quick search will need either overriding the bootstrap's tooltip or creating a one using pure CSS or a third option)

[bryan-brancotte]

Hi @HagerDakroury

Great for tackling the issue, @matuskalas who will be happy to have a less un-intuitive functionality. I have remarks considering the look-and-feel, and also I want to extends this copy ability to all terms. I am adding it to the issue

[HagerDakroury]

Hi @HagerDakroury

Great for tackling the issue, @matuskalas who will be happy to have a less un-intuitive functionality. I have remarks considering the look-and-feel, and also I want to extends this copy ability to all terms. I am adding it to the issue

Converting this to a draft and moving the discussion to the issue at this moment 👍 And love to hear what @matuskalas thinks concerning the design too!

[HagerDakroury]

This is how it looks like now after adapting the design you suggested @bryan-brancotte . Would that be good to go with a clearer indication that it's a copy button?

[bryan-brancotte]

Hi @HagerDakroury
Super great, and I was about to say something about the html ID but you also already fixed it !
A feature request : when we click to copy an element, maybe the others copy-buttons who went from fa-check to fa-checkshould go back tofa-copy`.

[HagerDakroury]

Hi @HagerDakroury
Super great, and I was about to say something about the html ID but you also already fixed it !
A feature request : when we click to copy an element, maybe the others copy-buttons who went from fa-check to fa-checkshould go back tofa-copy`.

Yeah, I actually was thinking about how to tackle this.

Do you think it should be a timeout thing? (like Github, the icon is toggled back after ~3 seconds) or whenever a new button is clicked?

[bryan-brancotte]

I did not though of the timeout things, but it is way better than what I proposed initially.

[HagerDakroury]

I did not though of the timeout things, but it is way better than what I proposed initially.

Added. With a timeout of 1 sec (the Copied! tooltip is also removed after the timeout)

[bryan-brancotte]

Perfect, let's squash and merge (once the possible dead code is removed/not dead code)

[bryan-brancotte]

Squash and merge whenever you fell ready for it :) 🏆