mirror of
https://github.com/discourse/discourse.git
synced 2026-08-06 06:24:48 +08:00
4dc52d48beThis commit replaces the admin dashboard's period selector, a segmented control of preset chips alongside a separate custom control, with a single trigger that opens a new `DDateRangePicker` ui-kit primitive. The trigger shows the active preset's name, or the literal date range when a custom range is active. On desktop the picker opens as an anchored popover with a preset rail, a dual-month calendar, and read-only range inputs. On mobile it renders as a bottom-sheet and the dashboard controls float at the bottom of the viewport. Sidebar presets apply immediately, while hand-picked ranges require an explicit Apply. When the active range spans more than two calendar months, the calendar shows the start and end months side by side so both endpoints stay visible. Technical decisions: - Discourse's only shipped date picker (Pikaday, via `DDatePicker` / `DDateInput`) is single-date: it has no range selection, two-month view, hover preview, or presets. The legacy range flow worked around this with two separate Pikaday inputs, which is the heavy flow this redesign replaces. - Rather than fork Pikaday or stack two inputs, the calendar grid is hand-built on moment.js, which is already a core dependency, so no new package is added. - The component owns the month-grid generation, range-selection state, hover preview, and keyboard navigation (roving tabindex, arrow / Page / Home / End keys) directly. - Trade-off: full control over the range-selection visuals and a leaner path than patching Pikaday, at the cost of owning the accessibility and keyboard-interaction code rather than inheriting it from a library. - The picker is a general-purpose ui-kit primitive that owns its preset constants (7d / 30d / 3m / 6m / 1y). The admin dashboard is its first consumer; dedicated report surfaces can reuse it later. |
||
|---|---|---|
| .. | ||
| images | ||
| stylesheets | ||
