Colour-picker swatch for container-template fields with a #RRGGBB value

[Junker der Provinz (junkerderprovinz)]

On the Add/Edit Container form, a template Variable whose value is a #RRGGBB hex (a theme or accent colour, say) now shows a small native colour swatch next to its text box, kept in sync both ways: picking a colour fills the text box (and fires change so the form stays dirty-tracked), and typing or pasting a valid #rrggbb updates the swatch.

The text box itself is unchanged, so typing, pasting and leaving the field empty all keep working, and the swatch never alters the value unless the user clicks it.

Why

Several templates already expose a colour field (an accent, a theme tint) as a plain Variable with a hex default, so users have to hand-type a hex code with no visual feedback. A native swatch turns that into a one-click pick while staying fully backwards-compatible.

How

Detection is by value pattern only (^#[0-9a-fA-F]{6}$) in makeConfig() in include/CreateDocker.php, mirroring how Mask="true" already switches a field to a password input a few lines above. There is no new template attribute and no schema change, so existing templates with a hex default upgrade automatically and every other field is untouched. Two delegated input handlers keep the swatch and text box in sync, and a small CSS rule styles the swatch. Only the browser-native <input type="color"> is used, so there is no new dependency.

Files

• emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php
• emhttp/plugins/dynamix.docker.manager/sheets/CreateDocker.css

Summary by CodeRabbit

• New Features

  • Added native color swatches for compatible six-digit hex color fields in Docker configuration.
  • Color selections and valid text values now remain synchronized automatically.

• Style

  • Improved color swatch sizing, borders, alignment, cursor behavior, and browser rendering.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6b0cabc7-f3e9-46b3-b3aa-c90977ded9c7

📥 Commits

Reviewing files that changed from the base of the PR and between 8d40212 and 1cc4d0f.

📒 Files selected for processing (2)

• emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php
• emhttp/plugins/dynamix.docker.manager/sheets/CreateDocker.css

---

Walkthrough

makeConfig adds native color swatches for eligible hexadecimal variables. Browser handlers synchronize swatch and text values. CSS defines the swatch appearance and browser-specific rendering.

Changes

Docker color swatch support

Layer / File(s)	Summary
Color swatch rendering emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php, emhttp/plugins/dynamix.docker.manager/sheets/CreateDocker.css	makeConfig adds a native color picker when a variable value or default matches #RRGGBB. CSS styles the swatch beside the original text field.
Color input synchronization emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php	Delegated handlers update the text field when the swatch changes and update the swatch when typed text is valid hexadecimal color text.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: elibosley

Poem

A rabbit taps a color square,
Hex hops neatly into place.
The text and swatch now move as one,
With tidy style and browser grace.
“Carrot-orange?”—the picker runs!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a colour-picker swatch for container-template fields with six-digit hex values.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}