feat: add copy button to viewer #70
Conversation
There was a problem hiding this comment.
Thank you for this PR, very very useful feature and simple implementation. Just to make the UI blend in with the rest of the application a bit better, I would make a few small changes, please see suggestions. With these changes I am happy to merge it right away
templates/pasta.html
Outdated
| <button id="copy-button" class="copy-button"> | ||
| <svg id="copy-icon" style="width:24px;height:24px" viewBox="0 0 24 24"> | ||
| <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /> | ||
| </svg> | ||
| </button> |
There was a problem hiding this comment.
Let's keep this text based for now I think. It will also allow us to change the text
<a id="copy-button" class="copy-button">
Copy
</a>
| const content = `{{ pasta.content_escaped() }}` | ||
|
|
||
| btn.addEventListener("click", () => { | ||
| navigator.clipboard.writeText(content) |
There was a problem hiding this comment.
Let's change the button text to Copied here:
btn.innerText = "Copied"
templates/pasta.html
Outdated
| padding: 8px; | ||
| margin: 5px; |
There was a problem hiding this comment.
Adjusted placing for the new shape, plus change cursor type to show it's interactive:
padding: 3px;
margin: 3px;
cursor: pointer;
|
Should be good. I didn't add
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| @@ -80,6 +80,10 @@ | |||
| pub fn content_not_highlighted(&self) -> String { | |||
| html_highlight(&self.content, "txt") | |||
| } | |||
|
|
|||
| pub fn content_escaped(&self) -> String { | |||
| self.content.replace("`", "\\`").replace("$", "\\$") | |||
Check warning
Code scanning / clippy
single-character string constant used as pattern
| @@ -80,6 +80,10 @@ | |||
| pub fn content_not_highlighted(&self) -> String { | |||
| html_highlight(&self.content, "txt") | |||
| } | |||
|
|
|||
| pub fn content_escaped(&self) -> String { | |||
| self.content.replace("`", "\\`").replace("$", "\\$") | |||
Check warning
Code scanning / clippy
single-character string constant used as pattern
This suggestion would change it from a button to a link (to make it look the same as all the other actions): #70 (comment)
|
|
Looks and works great, thank you so much! |
Closes #53