Refactor/UI tweaks#25
Conversation
Replaces the '-' button with a trash icon to delete the current page. Adds a confirmation dialog before deletion. Also, adds tooltips to print speed and darkness settings for better usability.
Introduce a reusable `ConfirmDialog` component and integrate it into the `PaginationControl` for page deletion. This change replaces the direct, irreversible deletion with a confirmation prompt, improving user experience and preventing accidental data loss. The confirmation dialog provides clearer messaging and separates the "delete" action from the "cancel" action. Locale keys have also been updated to reflect this change.
Each palette group (Text, 1D Linear, 2D Matrix, Postal & Legacy, Shapes) becomes an independently toggleable section with a chevron header. Open state is persisted per section id in localStorage so the UI is stable across reloads. Adds a generic CollapsibleSection primitive in components/ui/ that the palette consumes; the same component can later back disclosure-style sections elsewhere.
![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 several UI enhancements, including a new ConfirmDialog for page deletions and a CollapsibleSection component used in the object palette. Additionally, it refines the properties panel by moving configuration hints into tooltips and adds necessary localization strings across multiple languages. Feedback highlights opportunities to improve the new components, specifically by preventing background scrolling in the dialog, addressing a state synchronization bug in the collapsible section when the id prop changes, and enhancing accessibility for both components using ARIA attributes.
ConfirmDialog: add role=alertdialog/aria-modal/aria-describedby for screen-reader support, and lock body scroll while open so the modal stays anchored. CollapsibleSection: re-sync open state when id prop changes using React's prev-vs-current setState-during-render pattern (avoids the react-hooks/set-state-in-effect lint rule), and link the toggle button to the content via aria-controls. PropertiesPanel: replace the bare ⓘ glyph with heroicons InformationCircleIcon for consistent rendering across systems. LabelConfigPanel: wrap the printer-settings group in a CollapsibleSection (default-collapsed) so the optional fields read as a real section instead of plain text under a divider.
The Media mode, Label shift and Print quantity inputs become a default-open Output section, mirroring the Printer (optional) section below it. Renames printerSettingsHeading from 'Printer settings (optional)' to 'Printer (optional)' so the two section titles read cleanly side-by-side without redundant 'settings' wording. Adds label.outputHeading in all 32 locales.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request enhances the UI by introducing collapsible sections in the palette and properties panels, adding a confirmation dialog for page deletions, and incorporating tooltips for printer settings. It also updates localization files for all supported languages. A suggestion was made to broaden the CSS transition property in the new confirmation dialog to ensure smooth background color animations.
The destructive variant changes both background and opacity on hover but `transition-opacity` only smooths the latter. Switching to the broader `transition` class covers both, so the red bg hover blends instead of snapping.
1 participant
No description provided.