Skip to content

Replace iced_aw color picker with custom Select Color panel - #1

Closed
MarcelP102 wants to merge 14 commits into
mainfrom
Select-Color-Redesign
Closed

Replace iced_aw color picker with custom Select Color panel#1
MarcelP102 wants to merge 14 commits into
mainfrom
Select-Color-Redesign

Conversation

@MarcelP102

@MarcelP102 MarcelP102 commented Oct 12, 2026

Copy link
Copy Markdown
Owner

This PR replaces the iced_aw::ColorPicker widget with a custom-built Select Color panel that provides a more comprehensive color selection experience aligned with CAD applications.

Summary

The new Select Color panel (ColorPicker) is a modal dialog that allows users to select colors through multiple interfaces: an indexed color palette (ACI 1-255), true color editing via HSB/RGB sliders or a saturation/brightness field, and an eyedropper tool to sample colors from anywhere in the application window. The panel maintains a pending color that is only committed when the user clicks OK, allowing for non-destructive color exploration.

Key Changes

  • New color selection modules (src/ui/color_select/):

    • picker.rs: Main ColorPicker state machine and UI layout with tabbed interface (Index/True Color)
    • editor.rs: Reusable color editor with HSB/RGB sliders, saturation/brightness field, and hex input
    • eyedropper.rs: Full-window screenshot-based color sampling tool with magnifier preview
    • math.rs: Pure color math functions (HSB↔RGB conversion, hex parsing, ACI lookup, color formatting)
    • widgets/color_area.rs: Custom interactive saturation/brightness gradient field widget

  • Interface color picker integration: Options dialog now uses the Select Color panel for editing UI colors (backgrounds, text, etc.) instead of the basic iced_aw picker

  • Keyboard navigation:

    • Tab/Shift+Tab cycles focus within the panel
    • Arrow keys navigate the indexed color palette
    • Escape cancels, Enter confirms
    • The panel captures keyboard input while open, preventing leakage to the command line

  • Updated app state:

    • Replaced color_pick_target and color_picker_tab with unified color_picker: Option<ColorPicker>
    • Removed bg_picker field (background color picker state)
    • Added color_picker field to track active color selection session

  • Localization: Removed obsolete locale strings for "no recent colors" and "true color RGB" labels

Notable Implementation Details

  • The color editor preserves HSB hue and saturation values even when editing grays or black, preventing slider jumps
  • The eyedropper requests a window screenshot only after the panel is hidden from view, ensuring accurate pixel sampling
  • The indexed color palette displays ACI colors in a 24×10 grid (families × shades) plus standard colors and grayscale ranges
  • Hex input accepts both #RRGGBB and #RGB formats, applying 6-digit values while typing and 3-digit values on Enter
  • Interface color targets show only the editor without tabs or index colors

https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8

claude added 14 commits October 11, 2026 20:29
@claude
Redesign Select Color panel: index and true color tabs
00830f8 
Replace the old index page and the iced_aw ColorPicker popup with one
Select Color panel:

- Index Color tab: standard colors, ACI 10-249 grid, grays; arrow keys
  move through the palette.
- True Color tab: HSB, RGB and gradient-field modes built on two new
  widgets (GradientSlider, ColorArea) and iced_aw NumberInput boxes,
  an editable hex field and a nearest/exact index color button.
- Current/New swatch: clicking Current reverts. A mixed selection opens
  on the color of the most recently drawn object with *VARIES* on top.
- Color field accepts an index, a color name, r,g,b or hex.
- Enter confirms, Esc cancels, other keys stay in the panel.
- New labels translated in all 22 locales.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Fix Select Color panel layout found in screenshots
43f8873 
- Give the panel body room for the gray row and info line.
- Keep NumberInput digits clear of its arrows and draw the arrows
  as plain icons in the text colour.
- Split the Current / New swatch with a thin divider.
- Load the iced_aw icon font in the headless snapshot test.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Show ° and % inside the Select Color number boxes
3d7db54 
Draw the unit as the NumberInput icon on the right of the digits
instead of a separate label beside the box. The unit is not part of the
value, so users still only type the number.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Share the colour editor, add an eyedropper, use library code
cefa258 
- ColorEditor: the HSB / RGB / field editor and hex box, now shared by
  the Select Color panel and the Options background swatches. Those
  swatches open the panel without tabs or index colours, which removes
  the iced_aw color_picker feature and the BgPicker messages.
- Sliders are iced's built-in slider and vertical_slider over a
  gradient container; the custom GradientSlider widget is gone.
- Nearest index colour comes from opencadcodec's aci_table::nearest_aci.
- Eyedropper: a pipette at the right of the mode row hides the panel,
  captures the window with iced's screenshot task and shows an 11x11
  magnifier beside a crosshair; a click picks the pixel, Esc backs out.
  Not offered on the web build.
- The hex box applies six-digit values while typing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: full-width Current/New band, Tab focus, tighter fields
78916d3 
- Current and New are a 50/50 band across the panel with their names
  and values inside; the Color text box is gone.
- The gradient mode button is one gradient across the whole button,
  gray until that mode is active. Mode buttons share one width.
- Tab and Shift+Tab move between the panel's own fields.
- Number boxes are 54 px wide, the hex box 74 px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Round the Current/New band halves and add a divider
0a28163 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: frameless gradient button, hex beside H/S/B, all Option…
c8c5f66 
…s swatches

- The gradient mode button is just its gradient, without a frame.
- In the gradient view H, S and B sit on the left and Hex on the right
  of one row; the nearest index colour moves to the row below.
- Every colour swatch in Options opens the Select Color panel: the six
  theme colours, crosshair, snap marker and command line text join the
  three viewport backgrounds. BgTarget becomes UiColor, and one
  color_swatch helper replaces the four hand-built swatches.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: aligned views, smaller mode buttons, compact interface …
936c3b9 
…picker

- The gradient view no longer shows the nearest index colour.
- Mode buttons are 44 x 24 and the pipette button matches their height.
- Slider rows are 14 px apart and the gradient field is 108 px tall, so
  the hex value sits on the same row in the HSB, RGB and gradient views.
- The interface colour picker (Options) shrinks to its content, ending
  just below the hex row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: 40 px mode buttons with larger labels, frameless pipette
e6020be 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: gray pipette that takes the accent colour on hover
ea9143c 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: use the shared row gap in the RGB view too
7162f53 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: small cleanups found in review
cc40722 
- Keep the modal keyboard comment with the code it describes and match
  shortcut keys without an extra closure.
- Drop unused ColorEditor::mode, EyedropperMsg::Cancel and a duplicate
  rgb helper; re-export nearest_aci instead of wrapping it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Select Color: review cleanups
fefd526 
- Split ColorEditor::view into mode_row, slider_rows, field_view,
  hex_row and hex_field; output is unchanged.
- hex_string reuses config::rgb_to_hex, and parse_hex documents why it
  stays separate (it also accepts #RGB).
- ink_is_dark uses Color::into_rgba8 instead of rounding by hand.
- Remove four translation keys the old dialog used and nothing
  references any more, from the catalog and all 22 locales.
- Eyedropper: without a main window there is no screenshot to wait for,
  so leave the eyedropper; keep the magnifier inside small windows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@claude
Merge main into Select-Color-Redesign
0904661 
Resolve conflicts with the new gradient and graphic-attributes colour
targets: keep main's targets and menu handling, routed through the new
ColorPicker state; adapt dock/view.rs to `color_picker`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013rGmDUNr1hUf4zo1X3dak8
@MarcelP102 MarcelP102 closed this Oct 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@MarcelP102 @claude