The copy-to-clipboard button is not visible after long coordinates. #89#158
Open
manishpatel00 wants to merge 4 commits intomeshery-extensions:masterfrom
Open
The copy-to-clipboard button is not visible after long coordinates. #89#158manishpatel00 wants to merge 4 commits intomeshery-extensions:masterfrom
manishpatel00 wants to merge 4 commits intomeshery-extensions:masterfrom
Conversation
When a user finishes designing a polygon (via Close Shape, double-click, Enter, or Esc), the normalized SVG coordinates are now displayed in a focused modal overlay on the canvas instead of being shown in the textbox below where they can easily be missed. Modal features: - Inline copy button with 'Copied' feedback - 'Done' action to dismiss and keep shape - 'Clear & Start Over' action to reset canvas - Overlay click-to-close for quick dismissal - 'View Coordinates' button to re-open modal after close - Full keyboard and screen-reader accessibility - Dark/light theme support The fallback textarea is retained for accessibility and non-JS contexts. Fixes meshery-extensions#148 Signed-off-by: MANISH KUMAR <146671113+manishpatel00@users.noreply.github.com>
The 'View Coordinates' button text was invisible in dark mode because MUI's outlined variant inherits text color from the background theme. Fixed by explicitly setting: - color: "#00B39F" (Meshery brand color) - borderColor: "#00B39F" - Hover state with subtle background tint Button now clearly visible in both light and dark themes. Signed-off-by: MANISH KUMAR <146671113+manishpatel00@users.noreply.github.com>
Fixes meshery-extensions#89 Repositioned CopyButton from right: -25px (outside textarea) to right: 8px (inside textarea) with z-index: 1. Added padding-right to textarea so coordinate text does not overlap the button. The button now includes a visible background and border to maintain consistency and visibility within the textarea bounds. Signed-off-by: MANISH KUMAR <146671113+manishpatel00@users.noreply.github.com>
|
🚀 Preview deployment for PR #158 🌐 Preview URL: https://meshery-extensions.github.io/shape-builder/pr-preview/pr-158/ This preview is updated automatically when commits are pushed to this PR. |
Signed-off-by: MANISH KUMAR <146671113+manishpatel00@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Notes for Reviewers
Summary
The copy button was positioned outside the textarea (
right: -25px),causing it to disappear when coordinates were long enough to trigger
a scrollbar. Button is now anchored inside the textarea boundary and
always visible.
After fix
Changes
site/src/components/ShapeBuilder/shapeBuilder.styles.jsCopyButton: changed fromright: -25pxtoright: 8pxwithborder, background, and
z-index: 1so it stays visible insidethe textarea at all times
textarea: addedpadding-right: 2.5remso text never overlapsthe button
Signed commits