feat: Add a copy URI icon

edamontology / edam-browser

Stand-alone, lightweight, and fast JavaScript browser for EDAM and other ontologies

https://edamontology.github.io/edam-browser/

MIT License

13 stars 23 forks source link

feat: Add a copy URI icon #211

Closed HagerDakroury closed 3 years ago

HagerDakroury commented 3 years ago

Checklist

[x] I indicated which issue (if any) is closed with this PR using closing keywords
[x] I only changed lines related to my PR (no bulk reformatting)
[x] I indicated the source and check the license if I re-use code, or I did not re-use code
[x] 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

copyURI

Further Enhancements

Make the icon's color match the URI
Fix the tooltip position (looks like a common issue,see #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)

HagerDakroury commented 3 years ago

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 commented 3 years ago

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?

cpyNew

HagerDakroury commented 3 years ago

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 tofa-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 commented 3 years ago

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

HagerDakroury commented 3 years ago

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)

cpyTimeout

bryan-brancotte commented 3 years ago

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