[UI] Fix copy button layout shift and add checkmark confirmation #1144
Conversation
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a 'click-to-copy' feature for code blocks, including logic to prune unselectable elements from console blocks and corresponding SCSS styles for the copy button. The review feedback highlights several potential runtime errors: a missing guard check if a code listing does not contain a element, a potential crash if navigator.clipboard is undefined in insecure contexts, and a possible null reference when accessing window.getComputedStyle in certain environments.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
ishwar170695
left a comment
ishwar170695
left a comment
There was a problem hiding this comment.
Nice UX improvement. One thing I noticed: navigator.clipboard.writeText() is asynchronous, but the success UI (tooltip + checkmark) is shown immediately after calling copyCode(). If the clipboard write is rejected (for example due to permissions or browser restrictions), users would still see "Copied!". Would it make sense to return the writeText() Promise from copyCode() and only switch to the success state after it resolves?
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Good catch, @ishwar170695 done — copyCode() now returns the writeText() promise, and the success UI only shows after it resolves (with a .catch() for the failure case). |
Bharath314
left a comment
Bharath314
left a comment
There was a problem hiding this comment.
That's a nice UX change! I have a few comments though. Feel free to go through them whenever you have time. Cheers!
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Co-authored-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com> Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
akshatsinghai6682-sketch
changed the title
|
Hi @KhushamBansal I have updated the implementation to use the official Sistent design system as we discussed in today's meet CopyIcon and CheckIcon SVGs directly, completely replacing the legacy FontAwesome layout toggles. The PR description has also been updated to reflect this consistency match. Please review whenever possible Thank You! |
akshatsinghai6682-sketch
changed the title
… checkmark fixes Signed-off-by: Akshat Singhai <akshatsinghai6682@gmail.com>
akshatsinghai6682-sketch
changed the title
|
@Sbragul26 @KhushamBansal I have reverted my changes to font awesome this pr is now ready for review plz review whenever possible Thank You |
|
Thank you for contributing to the Layer5 community! 🎉 \ \ |
6 participants
This PR fixes #1143
Notes for Reviewers
Fixes the copy-to-clipboard button used on code blocks site-wide:
:active { transform: translateY(2px); }press effect withtransform: none !important;).fa-check) that briefly appears after a successful copy, alongside the existing Bootstrap "Copied!" tooltip, for clearer visual confirmation.clearTimeout) to prevent UI lag or overlapping state updates if the user clicks the button repeatedly.Changes:
assets/js/click-to-copy.js: A site-level override of Docsy's theme script file. Injected dynamic element generation for the copy buttons (.td-click-to-copy), custom copy handling logic for normal/console logs, and robust promise catches to safeguard failure states.assets/scss/_styles_project.scss: Appended explicit utility rules under.click-to-copy buttonincluding&:active { transform: none !important; }to eliminate layout alignment jitters and configured color styles for the target state&.td-click-to-copy--copied.Testing:
make siteacross multiple documentation pages featuring code blocks. Confirmed both the shift is completely gone, the tooltip handles failures cleanly, and the FontAwesome icon transitions into a checkmark successfully before reverting.Signed commits