Trigger styling: shared edit button, action label, Closet polish - #102
Closed
DAB-LABS wants to merge 1 commit into
Closed
Trigger styling: shared edit button, action label, Closet polish#102DAB-LABS wants to merge 1 commit into
DAB-LABS wants to merge 1 commit into
Conversation
…t polish Builds and rolls out a shared edit-button affordance (ICON_EDIT, editButtonStyles, renderEditBtn in ir-icons.ts, matching the existing trash/settings anatomy), then extends the same shared-button work into a round of Closet-specific polish. All owner-approved across successive VM999 bench sessions. Device detail pilot (ir-command-row.ts): edit button positioned immediately left of trash; glyph size and padding bench-matched to trash's 24x24 box over six rounds of owner feedback, settling on a 20px icon with 3px/2px/1px (top/side/bottom) padding and pixel-aligned bottom edges. The action-mapping badge was reworked into a link-style text label (blue "-> mapped name" when set, muted placeholder when empty, a plain "+" for the empty state), given a fixed-width sizer so the action column's x-position stays stable regardless of label length, and a popover-anchor bug was fixed (was querying the old badge class and always opening pinned at 0,0). Five-surface rollout: the finalized edit button replaced each of Sniffer/Clipper/Plucker/Mirror/Closet's own bespoke 10px copy-icon button via the same renderEditBtn helper, paired zero-gap with trash in a new .edit-trash-group on every surface. Closet polish (ir-wigs.ts): added a matching download button, bench-matched to edit/trash across six more owner-reviewed rounds. Two root causes found and fixed: a viewBox mismatch (the source SVG's own ink ran nearly edge-to-edge, unlike edit/trash's ~13-16% built-in margin, so identical CSS padding read as very different visual padding -- fixed by widening DOWNLOAD_VIEWBOX to match edit's proportions) and a flex-alignment issue (align-items: center was splitting download's shorter box into two uneven gaps against the 24px slot -- changed to flex-end). Also relocated the comb glyph out of the right-anchored .row-actions group into the row's normal flow (name, signal count, comb, checkmark), removing its now-unused .glyph-slot reservation. Shared icon-button contrast fixes, across all four buttons (trash, edit, download, device-settings gear): removed a flat opacity: 0.55 rest-state multiplier that was undermining the already theme-aware --disabled-text-color token (opacity blends toward whatever's behind the element, so the same value read fine on dark backgrounds and nearly invisible on white); raised every hover-wash alpha from 12% to a uniform 20% so each accent color shows a clearly visible box regardless of saturation; swapped download's hardcoded white hover icon color for the theme-aware --primary-text-color token. Frontend rebuilt (frontend/dist/ha-panel-ir-devices.js) to match. Verified: pytest custom_components/hair/tests on both CI-parity legs -- 3.12: 2499 passed, 34 skipped, 0 failed. 3.14: 2562 passed, 1 skipped, 0 failed. ruff check -- clean. tsc --noEmit -- clean. Confirmed live on VM999 throughout: edit/trash/download boxes pixel-matched and aligned, comb repositioned correctly on both library and local rows, and all four shared buttons show a clearly visible, legible hover state on both light and dark backgrounds.
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.
HAIR gets a real edit glyph, shared from one place.
A shared edit button (glyph, markup, tooltip, treatment, and size all in ir-icons.ts) replaces the borrowed copy glyph on all six editing surfaces: device commands, Sniffer, Clipper, Plucker, Mirror, and closet wigs. It sits immediately left of the trash can everywhere, so edit and delete are a stable pair at the end of every row. The two honest copy buttons (device duplicate, editor select-all) keep their glyph.
On device detail, the action-mapping badge becomes a link-style label: blue with the mapped name, a muted placeholder when empty, with a fixed-width column so the layout never shifts. A popover-anchor bug found during the pass is fixed. The Closet rides along: the download button joins the shared treatment in the trailing cluster, the comb glyph returns to sit beside the signals, and edit, download, delete, and settings share one light and dark treatment.
Iterated over six bench sessions on the test install; suite 2499 passed, ruff clean.