Skip to content

Add inline format editor for clock and countdown#140

Merged
danielchalmers merged 4 commits into
masterfrom
format-editor-prototype
Jul 6, 2026
Merged

Add inline format editor for clock and countdown#140
danielchalmers merged 4 commits into
masterfrom
format-editor-prototype

Conversation

@danielchalmers

@danielchalmers danielchalmers commented Jul 6, 2026

Copy link
Copy Markdown
Owner

Replaces the raw format controls with a bespoke inline editor so customizing the clock and countdown is approachable for common scenarios without losing the free-form escape hatch.

A reusable FormatEditor control (with a Clock/Countdown mode) is embedded directly in the Display and Countdown cards — no dialog — and is organized into labeled sections:

  • Common formats — one-click preset chips that show their live rendered output (e.g. "Sortable · 2026-07-06 13:16"), so users pick by result instead of decoding format strings. Countdown presets include "Automatic", which blanks the format and replaces the old Reset button.
  • Custom format — the familiar free-form text box, now with an "Insert:" row of building-block chips (Weekday, Day, Month, Year, Time, Seconds, UTC offset / Days, Hours, Minutes, Seconds) that insert their token at the cursor.
  • Preview — a live result panel that ticks every second, renders through the same TimeStringFormatter path as the clock itself, and turns red on invalid formats. With no countdown target set, previews use a sample target 3 days out so the chips aren't empty.

Edits bind straight to settings (UpdateSourceTrigger=PropertyChanged), so the desktop clock updates as you type — the app itself is the final preview.

The countdown target gets the same treatment via a CountdownTargetEditor: one-click preset targets (Midnight tonight, Tomorrow morning, Friday 5 PM, New Year's) computed at click time and labeled with the actual date they resolve to, the free-form box with Reset, and a plain-words preview that humanizes the target ("Friday, July 10, 2026 5:00 PM — 3 days from now") or states that countdown mode is off.

Removed

  • The examples ComboBox next to the clock format box (presets supersede it).
  • The countdown format Reset button (superseded by the "Automatic" preset).
  • The intermediate FormatEditorWindow dialog from the first prototype commit — feedback moved the editor inline.

Notes

  • The clock format keeps 12-hour presets alongside explicit 24-hour variants; both token sets avoid single-character tokens ({%d} etc. in countdown mode) so they survive the standard-format-string interpretation.
  • Verified by rendering the real SettingsWindow headlessly under the dark palette; 78/78 tests pass and dotnet format is clean.
  • DateFormatExample.DefaultExamples is no longer referenced from XAML but is kept since tests cover it; can drop it in a follow-up if preferred.

Before/after

image image

Adds a Format editor dialog (marked preview) reachable from the
Display and Countdown sections. It offers one-click presets for
common scenarios with live rendered examples, building-block chips
that insert tokens at the cursor, a live preview that updates every
second, and the raw format string as the escape hatch. Previews render
through the same Tokenizer/TimeStringFormatter pipeline as the clock,
including the humanized automatic countdown and error state.
Replace the dialog prototype with a FormatEditor control embedded in
the Display and Countdown cards, replacing the examples dropdown and
the countdown format reset button. Presets for common scenarios show
their live rendered output, building-block chips insert tokens at the
cursor, and a live preview updates as you type. Edits bind straight to
settings so the clock reflects changes immediately.
The presets, custom box, token chips, and preview ran together as one
undifferentiated dump. Add "Common formats" and "Custom format"
captions, an inline "Insert:" label on the token row, and anchor the
live preview in its own subtle bordered panel with a caption.
@danielchalmers danielchalmers changed the title Add an inline format editor for the clock and countdown Add inline format editor for clock and countdown Jul 6, 2026
The raw datetime box was the least approachable control left in the
card. Wrap it in the same inline-editor structure as the formats:
one-click preset targets (midnight tonight, tomorrow morning, Friday
5 PM, New Year) computed when clicked, the free-form box with Reset,
and a plain-words preview that humanizes the target ("in 4 days") or
explains that countdown mode is off.
@danielchalmers danielchalmers merged commit c9f8489 into master Jul 6, 2026
4 checks passed
@danielchalmers danielchalmers deleted the format-editor-prototype branch July 6, 2026 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant