[Enhancement] UX: Display polygon coordinates in modal #157
Open
manishpatel00 wants to merge 2 commits intomeshery-extensions:masterfrom
Open
[Enhancement] UX: Display polygon coordinates in modal #157manishpatel00 wants to merge 2 commits intomeshery-extensions:masterfrom
manishpatel00 wants to merge 2 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>
manishpatel00
changed the title
manishpatel00
changed the title
|
🚀 Preview deployment for PR #157 🌐 Preview URL: https://meshery-extensions.github.io/shape-builder/pr-preview/pr-157/ This preview is updated automatically when commits are pushed to this PR. |
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.
Description
PR fixes #148
When a user finishes designing a polygon, the coordinates are now displayed in a modal overlay on top of the canvas — making them immediately visible instead of being hidden below the fold.
Changes
New file
site/src/components/ShapeBuilder/CoordinatesModal.jsSelf-contained modal component with copy button, close button, and
two actions — "Done" and "Clear & Start Over"
Updated
site/src/components/ShapeBuilder/index.jsAdded
modalOpenstate and wired modal to all shape-completiontriggers (Close Shape button, double-click, Enter/Esc keys).
Added "View Coordinates" button to re-open modal after dismissal.
Updated
site/src/pages/index.jsPasses
themeprop to<ShapeBuilder />for dark/light mode supportHow It Works
Before
light mode
Screen.Recording.2026-04-11.at.7.25.09.PM.mov
After
dark mode
Screen.Recording.2026-04-11.at.7.34.46.PM.mov
Signed commits