docs: add task form dialog keyboard polish design
Spec for porting AddEventDialog UX patterns into TaskFormDialog: new header (title + description, no separator), full keyboard navigation (roving focus on pills, arrow nav, Enter to open popover, arrow nav inside list popovers and calendar), and date+time keyboard entry via extended DateField (withTime + flat props) and parseDate time suffix. Includes interactive HTML mockup demonstrating the keyboard flow. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Roberto
201
docs/2026-05-14-task-form-dialog-kbd-design.md
Normal file
201
docs/2026-05-14-task-form-dialog-kbd-design.md
Normal file
@@ -0,0 +1,201 @@
|
|||||||
|
# Task Form Dialog — keyboard + header polish — Design
|
||||||
|
|
||||||
|
**Date:** 2026-05-14
|
||||||
|
**Scope:** adiuvAI renderer (`src/renderer/components/tasks/TaskFormDialog.tsx`) + supporting libs
|
||||||
|
**Status:** Approved by user (mockup at `docs/mockups/2026-05-14-task-form-dialog-mockup.html`), ready for implementation plan
|
||||||
|
|
||||||
|
## Goal
|
||||||
|
|
||||||
|
Port three UX features shipped in the timeline batch-add `AddEventDialog` (`docs/2026-05-08-task-ux-evolution-design.md` § timeline batch) into `TaskFormDialog`:
|
||||||
|
|
||||||
|
1. **Header style** — `DialogTitle` + `DialogDescription` (no separator border), matching `AddEventDialog`.
|
||||||
|
2. **Full keyboard navigation** — Tab/Shift-Tab between fields & pills, arrow keys within pills row, Enter to open focused pill, arrow keys inside list popovers + calendar, Esc to close popover.
|
||||||
|
3. **Date + time via keyboard** — replace the Calendar + 2× hour/minute `Select` triplet with a typeable `DateField` that supports an optional `HH:MM` suffix and respects `FormatPrefs.dateFormat`.
|
||||||
|
|
||||||
|
## Non-goals
|
||||||
|
|
||||||
|
- Migrating `TaskFormDialog` to a Sheet (deferred — see `docs/2026-05-08-task-ux-evolution-plan.md`).
|
||||||
|
- Touching `NewTaskDialog` / `EditTaskDialog` wrappers (no behavior change).
|
||||||
|
- Changes to other property popovers' rendering beyond keyboard handling.
|
||||||
|
- Inline project creation flow (`InlineProjectForm`) — unchanged.
|
||||||
|
|
||||||
|
## 1. Header
|
||||||
|
|
||||||
|
Replace the current minimal header:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<DialogHeader className="px-5 py-3 border-b border-border/40">
|
||||||
|
<DialogTitle className="text-sm font-medium">{...}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
```
|
||||||
|
|
||||||
|
with the `AddEventDialog` style:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{mode === 'create' ? t('tasks.newTask') : t('tasks.editTask')}</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{mode === 'create' ? t('tasks.newTaskDescription') : t('tasks.editTaskDescription')}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
```
|
||||||
|
|
||||||
|
**No border-bottom** under the header — body flows directly under it. Keep the existing `bg-card/92 backdrop-blur-xl` overlay on `DialogContent`.
|
||||||
|
|
||||||
|
New i18n keys (all 5 languages): `tasks.newTaskDescription`, `tasks.editTaskDescription`.
|
||||||
|
|
||||||
|
## 2. Keyboard navigation
|
||||||
|
|
||||||
|
### Pills row — roving focus + arrow movement
|
||||||
|
|
||||||
|
The property pills (`Project · Priority · Status · Due · Assignees`) become a roving-tabindex group:
|
||||||
|
|
||||||
|
- Only one pill at a time has `tabindex={0}`; the rest have `tabindex={-1}`. Default focused pill = first (Project).
|
||||||
|
- `Tab` / `Shift+Tab` enters/exits the group as a single stop. Inside the group, `Tab` exits forward to the footer; on entry from the footer-side, focus restores to the last-focused pill.
|
||||||
|
- `ArrowRight` / `ArrowDown` → next pill (clamped at end).
|
||||||
|
- `ArrowLeft` / `ArrowUp` → previous pill (clamped at start).
|
||||||
|
- `Home` / `End` → first / last pill.
|
||||||
|
- `Enter` or `Space` on focused pill → open its popover.
|
||||||
|
|
||||||
|
Implementation: a small hook `useRovingFocus(ref, count)` returning `(index) => { tabIndex, onKeyDown, onFocus }`. Pills consume it inside `PropertyPill` (kept presentational) via a wrapping `<button>`.
|
||||||
|
|
||||||
|
`PropertyPill` is already a `<button>`-ish trigger via `<span>`. To support real focus rings + key events, change the trigger element rendered by `PopoverTrigger asChild` from `<span>` to a `<button type="button">`. Visible focus ring matches `--ring` via `focus-visible:ring-2 ring-ring/30`.
|
||||||
|
|
||||||
|
### List popovers — Project, Priority, Status, Assignees
|
||||||
|
|
||||||
|
shadcn `Popover` does not provide list semantics. Inside each popover content:
|
||||||
|
|
||||||
|
- Items render with `role="option"` (or `menuitem`) and roving `tabIndex` (active item = `0`, rest `-1`).
|
||||||
|
- When popover opens, focus moves to the currently-selected item (or first item).
|
||||||
|
- `ArrowDown` / `ArrowUp` move the active item; `Home`/`End` jump to ends.
|
||||||
|
- `Enter` / `Space` selects the active item.
|
||||||
|
- For single-select popovers (Project, Priority, Status) selection closes the popover and returns focus to the originating pill.
|
||||||
|
- For multi-select (Assignees) selection toggles; popover stays open. `Esc` closes and returns focus to the pill.
|
||||||
|
- `Tab` inside a popover closes the popover (focus returns to pill, then the next Tab advances normally).
|
||||||
|
|
||||||
|
Implementation: a single shared hook `useListboxKeys(items, opts)` consumed by each popover content. Items are sourced from existing data (`projectsList`, `knownAssignees`, hard-coded priority/status arrays).
|
||||||
|
|
||||||
|
### Calendar — keyboard
|
||||||
|
|
||||||
|
The shadcn `Calendar` already supports arrow-key day navigation and `Enter` to select (via react-day-picker). We need only to confirm that focus lands on the calendar grid when the Due popover opens. The new `DateField` (§3) replaces the current Popover+Calendar+Selects assembly and embeds the calendar.
|
||||||
|
|
||||||
|
### Description — Enter
|
||||||
|
|
||||||
|
Keep existing behavior: `Enter` inserts a newline in the description textarea. The form-level `⌘/Ctrl+Enter` submit handler already lives on the `<form>` element and continues to work; the footer's "⌘+Enter to create" hint is removed from the UI (the shortcut still works).
|
||||||
|
|
||||||
|
## 3. Date + time via keyboard
|
||||||
|
|
||||||
|
### Strategy — extend existing `DateField`
|
||||||
|
|
||||||
|
Reuse `src/renderer/components/ui/date-field.tsx` (already typeable, format-aware via `useFormatPrefs`, with embedded Calendar). Add **optional time** support behind a new prop `withTime?: boolean`.
|
||||||
|
|
||||||
|
When `withTime` is on:
|
||||||
|
- The text input accepts either a bare date (`30/04/2026`, `Apr 30`, `+3d`, `tomorrow`, …) or date-with-time suffix (`30/04/2026 14:30`).
|
||||||
|
- The Popover content gains a small `Time` row under the Calendar — two `Select`s (hour 00–23, minute in 5-min steps) identical to the current TaskFormDialog implementation. They edit the time portion of the committed `Date`.
|
||||||
|
- Display value after commit: `<date in FormatPrefs.dateFormat> HH:MM` when time component is non-midnight, otherwise just the date.
|
||||||
|
|
||||||
|
### Parser extension (`lib/parseDate.ts`)
|
||||||
|
|
||||||
|
`parseDate(input, prefs, keywords)` adopts optional trailing time:
|
||||||
|
|
||||||
|
- Regex split: `RE_TIME = /\s+(\d{1,2}):(\d{2})\s*$/`.
|
||||||
|
- If matched, parse `HH`/`MM` (`0–23` / `0–59`), strip the suffix, parse remaining string with the existing logic, then set `hours` and `minutes` on the result.
|
||||||
|
- If time match is invalid (e.g. `25:99`), whole input is invalid.
|
||||||
|
|
||||||
|
Unit-test cases (existing tests if any get extended; otherwise small new file):
|
||||||
|
|
||||||
|
| Input | Format pref | Expected |
|
||||||
|
|---|---|---|
|
||||||
|
| `30/04/2026 14:30` | `dd/MM/yyyy` | 2026-04-30 14:30 local |
|
||||||
|
| `04/30/2026 09:00` | `MM/dd/yyyy` | 2026-04-30 09:00 |
|
||||||
|
| `2026-04-30 23:59` | `yyyy-MM-dd` | 2026-04-30 23:59 |
|
||||||
|
| `tomorrow 08:15` | any | next-day 08:15 |
|
||||||
|
| `30/04/2026 25:00` | any | invalid |
|
||||||
|
| `30/04/2026` | dd/MM | 2026-04-30 00:00 (date only, time unchanged) |
|
||||||
|
|
||||||
|
### Caller change in `TaskFormDialog`
|
||||||
|
|
||||||
|
The whole Due Popover block (Calendar + hour/minute Selects + clear button) is replaced by:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<DateField
|
||||||
|
withTime
|
||||||
|
value={values.dueDate ? new Date(values.dueDate) : undefined}
|
||||||
|
onChange={(d) => setValues((v) => ({ ...v, dueDate: d ? d.getTime() : null }))}
|
||||||
|
placeholder={t('tasks.colDue')}
|
||||||
|
aria-label={t('tasks.colDue')}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
The pill itself remains for display when the field is collapsed. Two arrangements considered:
|
||||||
|
|
||||||
|
- **(A) Pill opens a popover containing the `DateField`** — keeps visual parity with the other pills. The `DateField` *inside* the popover is just an `Input` + Calendar, no nested Popover. Recommended.
|
||||||
|
- **(B) `DateField` replaces the pill inline in the row** — visually breaks the pill row.
|
||||||
|
|
||||||
|
Going with **(A)**. To avoid a nested-popover (`Popover` inside `PopoverContent`), `DateField` gains a `flat?: boolean` prop. When `flat` is set, it renders:
|
||||||
|
|
||||||
|
- the typeable `Input`,
|
||||||
|
- the `Calendar` inline (no internal `Popover` wrapper),
|
||||||
|
- the Time row (when `withTime`).
|
||||||
|
|
||||||
|
The Due pill's `PopoverContent` renders `<DateField withTime flat />`. Outside the task dialog, existing callers (e.g. `AddEventDialog`) keep using the default (non-flat) DateField with its own popover trigger.
|
||||||
|
|
||||||
|
The Due popover content:
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─ Due popover ───────────────────┐
|
||||||
|
│ [📅 30/04/2026 14:30 ] │ ← typeable Input (parses date + time)
|
||||||
|
│ Calendar grid (kbd nav) │
|
||||||
|
│ ── ── ── ── ── ── ── ── ── ── │
|
||||||
|
│ Time: [HH ⌄] : [MM ⌄] [Clear] │ ← shown only when withTime
|
||||||
|
└─────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
(The mockup illustrated standalone segments; that was a sketch — the real impl reuses `DateField`'s single-input typeable parser, which is already keyboard-driven via `parseDate`.)
|
||||||
|
|
||||||
|
## 4. Files
|
||||||
|
|
||||||
|
**Modified:**
|
||||||
|
|
||||||
|
```
|
||||||
|
src/renderer/components/tasks/TaskFormDialog.tsx — new header; roving focus on pills row; replace Due popover with <DateField withTime />; drop the "⌘+Enter" hint
|
||||||
|
src/renderer/components/ui/date-field.tsx — new props withTime + flat; Time Selects; expanded onCommit/text-display logic
|
||||||
|
src/renderer/lib/parseDate.ts — accept optional trailing " HH:MM"
|
||||||
|
src/renderer/locales/{en,it,es,fr,de}/translation.json
|
||||||
|
— add tasks.newTaskDescription, tasks.editTaskDescription
|
||||||
|
```
|
||||||
|
|
||||||
|
**New (small, kept local to features):**
|
||||||
|
|
||||||
|
```
|
||||||
|
src/renderer/hooks/useRovingFocus.ts — generic roving-tabindex hook
|
||||||
|
src/renderer/hooks/useListboxKeys.ts — popover-list arrow/enter/esc handler
|
||||||
|
```
|
||||||
|
|
||||||
|
If a unit-test setup is later introduced for `parseDate`, add cases there. Not blocking.
|
||||||
|
|
||||||
|
## 5. Accessibility
|
||||||
|
|
||||||
|
- Pills row: `role="toolbar"` with `aria-label={t('tasks.properties')}`; pills are `<button>` with descriptive `aria-label` (e.g. `Project: Acme · Communications`).
|
||||||
|
- Listbox popovers: container `role="listbox"`, items `role="option"`, `aria-selected` on the chosen one. Single-select popovers also set `aria-activedescendant` on the listbox when convenient; otherwise rely on `.focus()`.
|
||||||
|
- Multi-select Assignees uses `aria-multiselectable="true"`.
|
||||||
|
- `DateField` keeps existing `aria-invalid` + `aria-describedby` semantics.
|
||||||
|
|
||||||
|
## 6. Out-of-scope follow-ups
|
||||||
|
|
||||||
|
- Project popover inline-create flow keyboard polish (currently a sub-form inside the popover — separate effort).
|
||||||
|
- `DateField` natural-language time keywords (e.g. `tomorrow 9am`) — only `HH:MM` accepted.
|
||||||
|
- Migrating `TaskFormDialog` shell to a Sheet — already deferred.
|
||||||
|
|
||||||
|
## 7. Implementation order (suggested)
|
||||||
|
|
||||||
|
1. `useRovingFocus` + `useListboxKeys` hooks (no UI changes).
|
||||||
|
2. `parseDate` time-suffix support; refresh existing parseDate tests.
|
||||||
|
3. `DateField` `withTime` prop + time Selects in Popover.
|
||||||
|
4. `TaskFormDialog`:
|
||||||
|
- Header swap (Title + Description, no border).
|
||||||
|
- Pills row wired to `useRovingFocus`; pill trigger element switched to `<button>`.
|
||||||
|
- Each list popover wired to `useListboxKeys`.
|
||||||
|
- Due popover content replaced by `<DateField withTime />`.
|
||||||
|
- Remove footer `⌘+Enter` hint.
|
||||||
|
5. i18n strings in all five languages.
|
||||||
852
docs/mockups/2026-05-14-task-form-dialog-mockup.html
Normal file
852
docs/mockups/2026-05-14-task-form-dialog-mockup.html
Normal file
@@ -0,0 +1,852 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Task Form Dialog — keyboard-driven mockup</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #f4edf3;
|
||||||
|
--canvas: #ebe4ea;
|
||||||
|
--card: #ffffff;
|
||||||
|
--card-soft: #fbf7fa;
|
||||||
|
--border: #c8c3cd;
|
||||||
|
--border-soft: #d8d4dc;
|
||||||
|
--text: #1a1a1a;
|
||||||
|
--muted: #6e6a73;
|
||||||
|
--primary: #fbc881;
|
||||||
|
--primary-fg: #4a3210;
|
||||||
|
--accent: #e9e5ee;
|
||||||
|
--ring: #8a8ea9;
|
||||||
|
--danger: #c4423a;
|
||||||
|
--green: #5a8a55;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #0c0c0c;
|
||||||
|
--canvas: #161616;
|
||||||
|
--card: #1a1a1a;
|
||||||
|
--card-soft: #202020;
|
||||||
|
--border: #323232;
|
||||||
|
--border-soft: #2a2a2a;
|
||||||
|
--text: #f5f5f5;
|
||||||
|
--muted: #9a9a9a;
|
||||||
|
--primary: #fbc881;
|
||||||
|
--primary-fg: #4a3210;
|
||||||
|
--accent: #2a2a2a;
|
||||||
|
--ring: #8a8ea9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html, body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Geist", system-ui, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
.page-hint {
|
||||||
|
position: fixed; left: 16px; top: 16px;
|
||||||
|
background: var(--card); border: 1px solid var(--border);
|
||||||
|
border-radius: 8px; padding: 10px 12px;
|
||||||
|
font-size: 12px; max-width: 280px; line-height: 1.5;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.page-hint strong { color: var(--text); }
|
||||||
|
.page-hint kbd {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
background: var(--accent); border: 1px solid var(--border-soft);
|
||||||
|
border-radius: 4px; padding: 1px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialog */
|
||||||
|
.overlay {
|
||||||
|
width: 580px; max-width: 100%;
|
||||||
|
background: rgba(255,255,255,0.92);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 20px 50px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.4) inset;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.overlay { background: rgba(26,26,26,0.92); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header — AddEventDialog style: title + description, no separator */
|
||||||
|
.dlg-header {
|
||||||
|
padding: 18px 22px 8px;
|
||||||
|
}
|
||||||
|
.dlg-title {
|
||||||
|
font-size: 16px; font-weight: 600; margin: 0;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.dlg-desc {
|
||||||
|
margin: 4px 0 0; font-size: 13px; color: var(--muted);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body */
|
||||||
|
.dlg-body { padding: 18px 22px 12px; }
|
||||||
|
.title-input {
|
||||||
|
width: 100%;
|
||||||
|
border: none; outline: none; background: transparent;
|
||||||
|
font: inherit; color: inherit;
|
||||||
|
font-size: 22px; font-weight: 500;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.title-input::placeholder { color: var(--muted); opacity: 0.7; }
|
||||||
|
.desc-input {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 100%;
|
||||||
|
border: none; outline: none; background: transparent;
|
||||||
|
font: inherit; color: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
resize: none;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.desc-input::placeholder { color: var(--muted); opacity: 0.7; }
|
||||||
|
|
||||||
|
/* Properties section */
|
||||||
|
.props-label {
|
||||||
|
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
|
||||||
|
color: var(--muted); margin: 14px 0 8px;
|
||||||
|
}
|
||||||
|
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||||
|
|
||||||
|
/* Pill */
|
||||||
|
.pill {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
height: 28px; padding: 0 10px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
background: var(--card-soft);
|
||||||
|
font-size: 12px; color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms, border-color 120ms, box-shadow 120ms;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.pill[data-empty="true"] {
|
||||||
|
border-style: dashed;
|
||||||
|
color: var(--muted);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.pill:focus-visible,
|
||||||
|
.pill[data-focused="true"] {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--ring);
|
||||||
|
box-shadow: 0 0 0 3px rgba(138,142,169,0.25);
|
||||||
|
}
|
||||||
|
.pill .pill-label { color: var(--muted); }
|
||||||
|
.pill .pill-value { font-weight: 500; }
|
||||||
|
.pill .pill-sep { color: var(--muted); opacity: 0.5; }
|
||||||
|
.pill-icon { font-size: 11px; line-height: 1; }
|
||||||
|
.pill .pi-up { color: #c4423a; }
|
||||||
|
.pill .pi-mid { color: #b97a14; }
|
||||||
|
.pill .pi-down { color: var(--muted); }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.dlg-footer {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 22px;
|
||||||
|
border-top: 1px solid var(--border-soft);
|
||||||
|
background: rgba(0,0,0,0.015);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dlg-footer { background: rgba(255,255,255,0.02); }
|
||||||
|
}
|
||||||
|
.kbd-hint { font-size: 11px; color: var(--muted); }
|
||||||
|
.kbd-hint kbd {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||||
|
font-size: 10px;
|
||||||
|
background: var(--accent); border: 1px solid var(--border-soft);
|
||||||
|
border-radius: 4px; padding: 1px 5px;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
height: 30px; padding: 0 14px; border-radius: 8px;
|
||||||
|
font: inherit; font-size: 13px; font-weight: 500;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: transparent; color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px rgba(138,142,169,0.25);
|
||||||
|
border-color: var(--ring);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--primary-fg);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
.footer-actions { display: flex; gap: 6px; }
|
||||||
|
|
||||||
|
/* Popover */
|
||||||
|
.popover {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
min-width: 220px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 12px 32px -8px rgba(0,0,0,0.2);
|
||||||
|
padding: 4px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.popover[data-open="true"] { display: block; }
|
||||||
|
.pop-item {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.pop-item:hover,
|
||||||
|
.pop-item:focus,
|
||||||
|
.pop-item[data-active="true"] { background: var(--accent); }
|
||||||
|
.pop-item:focus { box-shadow: inset 0 0 0 1px var(--ring); }
|
||||||
|
.pop-item .check { width: 14px; color: var(--muted); }
|
||||||
|
.pop-item[data-selected="true"] .check::before { content: "✓"; color: var(--text); }
|
||||||
|
|
||||||
|
/* DateField segments */
|
||||||
|
.datefield {
|
||||||
|
display: inline-flex; align-items: center;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: var(--card-soft);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.datefield:focus-within {
|
||||||
|
border-color: var(--ring);
|
||||||
|
box-shadow: 0 0 0 3px rgba(138,142,169,0.25);
|
||||||
|
}
|
||||||
|
.segment {
|
||||||
|
min-width: 1.8ch; text-align: center; padding: 2px 1px;
|
||||||
|
border-radius: 3px; outline: none; cursor: text;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.segment[data-placeholder="true"] { color: var(--muted); opacity: 0.6; }
|
||||||
|
.segment:focus { background: var(--accent); }
|
||||||
|
.seg-sep { color: var(--muted); padding: 0 1px; user-select: none; }
|
||||||
|
|
||||||
|
.date-pop {
|
||||||
|
padding: 12px;
|
||||||
|
min-width: 280px;
|
||||||
|
}
|
||||||
|
.date-pop .field-label {
|
||||||
|
font-size: 11px; color: var(--muted);
|
||||||
|
text-transform: uppercase; letter-spacing: 0.06em;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.date-pop .cal {
|
||||||
|
margin-top: 12px;
|
||||||
|
border-top: 1px solid var(--border-soft);
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.cal-head {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
font-size: 12px; margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.cal-head .month { font-weight: 600; }
|
||||||
|
.cal-head button {
|
||||||
|
border: 1px solid var(--border); background: transparent;
|
||||||
|
border-radius: 6px; width: 22px; height: 22px;
|
||||||
|
color: var(--text); cursor: pointer;
|
||||||
|
}
|
||||||
|
.cal-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(7, 1fr);
|
||||||
|
gap: 2px; font-size: 11px;
|
||||||
|
}
|
||||||
|
.cal-dow {
|
||||||
|
color: var(--muted); text-align: center;
|
||||||
|
padding: 4px 0; font-weight: 500;
|
||||||
|
}
|
||||||
|
.cal-day {
|
||||||
|
text-align: center; padding: 5px 0;
|
||||||
|
border-radius: 5px; cursor: pointer; outline: none;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.cal-day:focus,
|
||||||
|
.cal-day[data-active="true"] { background: var(--accent); }
|
||||||
|
.cal-day[data-selected="true"] {
|
||||||
|
background: var(--primary); color: var(--primary-fg);
|
||||||
|
}
|
||||||
|
.cal-day[data-other-month="true"] { color: var(--muted); opacity: 0.4; }
|
||||||
|
|
||||||
|
.pop-anchor { position: relative; display: inline-flex; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-hint">
|
||||||
|
<strong>Keyboard demo</strong><br>
|
||||||
|
<kbd>Tab</kbd>/<kbd>Shift+Tab</kbd> cycles fields + pills.<br>
|
||||||
|
<kbd>Enter</kbd> opens focused pill.<br>
|
||||||
|
<kbd>↑</kbd>/<kbd>↓</kbd> inside popovers and calendar.<br>
|
||||||
|
<kbd>Esc</kbd> closes popover.<br>
|
||||||
|
Due pill: type date directly (segment edit).
|
||||||
|
<hr style="border:none; border-top:1px solid var(--border-soft); margin:8px 0;">
|
||||||
|
<label style="font-size:11px;">FormatPrefs.dateFormat:
|
||||||
|
<select id="fmt-pref" style="margin-top:4px; width:100%; padding:4px; font: inherit; font-size:11px;">
|
||||||
|
<option value="dd/MM/yyyy">dd/MM/yyyy</option>
|
||||||
|
<option value="MM/dd/yyyy">MM/dd/yyyy</option>
|
||||||
|
<option value="yyyy-MM-dd">yyyy-MM-dd</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" role="dialog" aria-modal="true" aria-labelledby="dlg-title">
|
||||||
|
<header class="dlg-header">
|
||||||
|
<h2 id="dlg-title" class="dlg-title">New task</h2>
|
||||||
|
<p class="dlg-desc">Capture what needs doing. Set properties below or skip and refine later.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="dlg-body">
|
||||||
|
<input class="title-input" id="f-title" placeholder="What needs to be done?" autofocus />
|
||||||
|
<textarea class="desc-input" id="f-desc" rows="3" placeholder="Add a description…"></textarea>
|
||||||
|
|
||||||
|
<div class="props-label">Properties</div>
|
||||||
|
<div class="pills" id="pills">
|
||||||
|
|
||||||
|
<!-- Project pill -->
|
||||||
|
<span class="pop-anchor">
|
||||||
|
<button type="button" class="pill" data-pill="project" data-empty="true" tabindex="0">
|
||||||
|
<span class="pill-icon">📁</span>
|
||||||
|
<span class="pill-label">Project</span>
|
||||||
|
</button>
|
||||||
|
<div class="popover" data-popover="project" role="listbox">
|
||||||
|
<div class="pop-item" data-active="true" data-value="">
|
||||||
|
<span class="check"></span>No project
|
||||||
|
</div>
|
||||||
|
<div class="pop-item" data-value="acme-comm">
|
||||||
|
<span class="check"></span>Acme · Communications
|
||||||
|
</div>
|
||||||
|
<div class="pop-item" data-value="testing-bot">
|
||||||
|
<span class="check"></span>Testing · AI ChatBot
|
||||||
|
</div>
|
||||||
|
<div class="pop-item" data-value="adiuvai-app">
|
||||||
|
<span class="check"></span>AdiuvAI · App
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Priority pill -->
|
||||||
|
<span class="pop-anchor">
|
||||||
|
<button type="button" class="pill" data-pill="priority" tabindex="0">
|
||||||
|
<span class="pill-icon pi-mid">→</span>
|
||||||
|
<span class="pill-label">Priority</span>
|
||||||
|
<span class="pill-sep">·</span>
|
||||||
|
<span class="pill-value">Medium</span>
|
||||||
|
</button>
|
||||||
|
<div class="popover" data-popover="priority" role="listbox" style="min-width:160px;">
|
||||||
|
<div class="pop-item" data-value="high"><span class="check"></span>High</div>
|
||||||
|
<div class="pop-item" data-active="true" data-selected="true" data-value="medium"><span class="check"></span>Medium</div>
|
||||||
|
<div class="pop-item" data-value="low"><span class="check"></span>Low</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Status pill -->
|
||||||
|
<span class="pop-anchor">
|
||||||
|
<button type="button" class="pill" data-pill="status" tabindex="0">
|
||||||
|
<span class="pill-icon">○</span>
|
||||||
|
<span class="pill-label">Status</span>
|
||||||
|
<span class="pill-sep">·</span>
|
||||||
|
<span class="pill-value">To do</span>
|
||||||
|
</button>
|
||||||
|
<div class="popover" data-popover="status" role="listbox" style="min-width:170px;">
|
||||||
|
<div class="pop-item" data-active="true" data-selected="true" data-value="todo"><span class="check"></span>To do</div>
|
||||||
|
<div class="pop-item" data-value="in_progress"><span class="check"></span>In progress</div>
|
||||||
|
<div class="pop-item" data-value="done"><span class="check"></span>Done</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Due pill -->
|
||||||
|
<span class="pop-anchor">
|
||||||
|
<button type="button" class="pill" data-pill="due" data-empty="true" tabindex="0">
|
||||||
|
<span class="pill-icon">📅</span>
|
||||||
|
<span class="pill-label">Due</span>
|
||||||
|
</button>
|
||||||
|
<div class="popover date-pop" data-popover="due" role="dialog" style="min-width:300px;">
|
||||||
|
<div class="field-label">Date</div>
|
||||||
|
<div class="datefield" id="datefield" tabindex="-1"><!-- segments injected by JS --></div>
|
||||||
|
<div class="cal" id="calendar">
|
||||||
|
<div class="cal-head">
|
||||||
|
<button type="button" data-nav="-1">‹</button>
|
||||||
|
<span class="month" id="cal-month">May 2026</span>
|
||||||
|
<button type="button" data-nav="1">›</button>
|
||||||
|
</div>
|
||||||
|
<div class="cal-grid" id="cal-grid"><!-- filled by JS --></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Assignees pill -->
|
||||||
|
<span class="pop-anchor">
|
||||||
|
<button type="button" class="pill" data-pill="assignees" data-empty="true" tabindex="0">
|
||||||
|
<span class="pill-icon">＋</span>
|
||||||
|
<span class="pill-label">Add assignees</span>
|
||||||
|
</button>
|
||||||
|
<div class="popover" data-popover="assignees" role="listbox">
|
||||||
|
<div class="pop-item" data-active="true" data-value="alex"><span class="check"></span>Alex Morgan</div>
|
||||||
|
<div class="pop-item" data-value="priya"><span class="check"></span>Priya Shah</div>
|
||||||
|
<div class="pop-item" data-value="yo"><span class="check"></span>You</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="dlg-footer">
|
||||||
|
<div></div>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button type="button" class="btn">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-primary">Create task</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/* ---------- popover open/close + arrow nav ---------- */
|
||||||
|
const pills = document.querySelectorAll('.pill');
|
||||||
|
const popovers = document.querySelectorAll('.popover');
|
||||||
|
|
||||||
|
function closeAllPopovers() {
|
||||||
|
popovers.forEach((p) => p.setAttribute('data-open', 'false'));
|
||||||
|
}
|
||||||
|
|
||||||
|
const pillArr = Array.from(pills);
|
||||||
|
pills.forEach((pill) => {
|
||||||
|
pill.addEventListener('click', (e) => openPopoverFor(pill));
|
||||||
|
pill.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
openPopoverFor(pill);
|
||||||
|
} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
const idx = pillArr.indexOf(pill);
|
||||||
|
const next = pillArr[Math.min(idx + 1, pillArr.length - 1)];
|
||||||
|
next && next.focus();
|
||||||
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
const idx = pillArr.indexOf(pill);
|
||||||
|
const prev = pillArr[Math.max(idx - 1, 0)];
|
||||||
|
prev && prev.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function openPopoverFor(pill) {
|
||||||
|
const which = pill.dataset.pill;
|
||||||
|
const pop = document.querySelector(`.popover[data-popover="${which}"]`);
|
||||||
|
if (!pop) return;
|
||||||
|
closeAllPopovers();
|
||||||
|
pop.setAttribute('data-open', 'true');
|
||||||
|
if (which === 'due') {
|
||||||
|
// focus first date segment
|
||||||
|
const firstSeg = pop.querySelector('.segment');
|
||||||
|
if (firstSeg) firstSeg.focus();
|
||||||
|
} else {
|
||||||
|
const items = pop.querySelectorAll('.pop-item');
|
||||||
|
items.forEach((i) => i.setAttribute('tabindex', '-1'));
|
||||||
|
const active = pop.querySelector('.pop-item[data-active="true"]') || items[0];
|
||||||
|
if (active) {
|
||||||
|
active.setAttribute('tabindex', '0');
|
||||||
|
active.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
const open = document.querySelector('.popover[data-open="true"]');
|
||||||
|
if (open) {
|
||||||
|
e.preventDefault();
|
||||||
|
closePopover(open);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- list popover keyboard ---------- */
|
||||||
|
popovers.forEach((pop) => {
|
||||||
|
if (pop.dataset.popover === 'due') return;
|
||||||
|
const items = Array.from(pop.querySelectorAll('.pop-item'));
|
||||||
|
items.forEach((it) => {
|
||||||
|
it.setAttribute('tabindex', '-1');
|
||||||
|
it.addEventListener('click', () => selectPopItem(pop, it));
|
||||||
|
it.addEventListener('keydown', (e) => onPopItemKey(e, pop, items, it));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function onPopItemKey(e, pop, items, item) {
|
||||||
|
const idx = items.indexOf(item);
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
moveFocus(items, Math.min(idx + 1, items.length - 1));
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
moveFocus(items, Math.max(idx - 1, 0));
|
||||||
|
} else if (e.key === 'Home') {
|
||||||
|
e.preventDefault(); moveFocus(items, 0);
|
||||||
|
} else if (e.key === 'End') {
|
||||||
|
e.preventDefault(); moveFocus(items, items.length - 1);
|
||||||
|
} else if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
selectPopItem(pop, item);
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
closePopover(pop);
|
||||||
|
} else if (e.key === 'Tab') {
|
||||||
|
closePopover(pop);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function moveFocus(items, target) {
|
||||||
|
items.forEach((i) => i.setAttribute('tabindex', '-1'));
|
||||||
|
const el = items[target];
|
||||||
|
el.setAttribute('tabindex', '0');
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
|
function closePopover(pop) {
|
||||||
|
pop.setAttribute('data-open', 'false');
|
||||||
|
const pill = document.querySelector(`.pill[data-pill="${pop.dataset.popover}"]`);
|
||||||
|
pill && pill.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectPopItem(pop, item) {
|
||||||
|
const which = pop.dataset.popover;
|
||||||
|
if (which === 'assignees') {
|
||||||
|
item.toggleAttribute('data-selected');
|
||||||
|
} else {
|
||||||
|
pop.querySelectorAll('.pop-item').forEach((i) => i.removeAttribute('data-selected'));
|
||||||
|
item.setAttribute('data-selected', 'true');
|
||||||
|
}
|
||||||
|
updatePillFrom(pop);
|
||||||
|
if (which !== 'assignees') closePopover(pop);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePillFrom(pop) {
|
||||||
|
const which = pop.dataset.popover;
|
||||||
|
const pill = document.querySelector(`.pill[data-pill="${which}"]`);
|
||||||
|
if (!pill) return;
|
||||||
|
if (which === 'assignees') {
|
||||||
|
const sel = Array.from(pop.querySelectorAll('.pop-item[data-selected="true"]'));
|
||||||
|
if (sel.length === 0) {
|
||||||
|
pill.setAttribute('data-empty', 'true');
|
||||||
|
pill.innerHTML = '<span class="pill-icon">＋</span><span class="pill-label">Add assignees</span>';
|
||||||
|
} else {
|
||||||
|
pill.removeAttribute('data-empty');
|
||||||
|
const names = sel.map((s) => s.textContent.trim());
|
||||||
|
pill.innerHTML = `<span class="pill-icon">👤</span><span class="pill-label">Assignees</span><span class="pill-sep">·</span><span class="pill-value">${names.join(', ')}</span>`;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const cur = pop.querySelector('.pop-item[data-selected="true"]');
|
||||||
|
if (which === 'project') {
|
||||||
|
if (!cur || cur.dataset.value === '') {
|
||||||
|
pill.setAttribute('data-empty', 'true');
|
||||||
|
pill.innerHTML = '<span class="pill-icon">📁</span><span class="pill-label">Project</span>';
|
||||||
|
} else {
|
||||||
|
pill.removeAttribute('data-empty');
|
||||||
|
pill.innerHTML = `<span class="pill-icon">📁</span><span class="pill-label">Project</span><span class="pill-sep">·</span><span class="pill-value">${cur.textContent.trim()}</span>`;
|
||||||
|
}
|
||||||
|
} else if (which === 'priority') {
|
||||||
|
const v = cur.dataset.value;
|
||||||
|
const icon = v === 'high' ? '<span class="pill-icon pi-up">↑</span>'
|
||||||
|
: v === 'low' ? '<span class="pill-icon pi-down">↓</span>'
|
||||||
|
: '<span class="pill-icon pi-mid">→</span>';
|
||||||
|
const label = v[0].toUpperCase() + v.slice(1);
|
||||||
|
pill.innerHTML = `${icon}<span class="pill-label">Priority</span><span class="pill-sep">·</span><span class="pill-value">${label}</span>`;
|
||||||
|
} else if (which === 'status') {
|
||||||
|
const v = cur.dataset.value;
|
||||||
|
const icon = v === 'done' ? '✓' : v === 'in_progress' ? '◐' : '○';
|
||||||
|
const label = v === 'in_progress' ? 'In progress' : v === 'todo' ? 'To do' : 'Done';
|
||||||
|
pill.innerHTML = `<span class="pill-icon">${icon}</span><span class="pill-label">Status</span><span class="pill-sep">·</span><span class="pill-value">${label}</span>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- DateField — format-aware segments ---------- */
|
||||||
|
const SEG_DEFS = {
|
||||||
|
day: { len: 2, min: 1, max: 31, ph: 'DD' },
|
||||||
|
month: { len: 2, min: 1, max: 12, ph: 'MM' },
|
||||||
|
year: { len: 4, min: 1900, max: 2100, ph: 'YYYY' },
|
||||||
|
hour: { len: 2, min: 0, max: 23, ph: 'HH' },
|
||||||
|
minute: { len: 2, min: 0, max: 59, ph: 'MM' },
|
||||||
|
};
|
||||||
|
const FMT_LAYOUT = {
|
||||||
|
'dd/MM/yyyy': [['day','/'],['month','/'],['year',null]],
|
||||||
|
'MM/dd/yyyy': [['month','/'],['day','/'],['year',null]],
|
||||||
|
'yyyy-MM-dd': [['year','-'],['month','-'],['day',null]],
|
||||||
|
};
|
||||||
|
let currentFmt = 'dd/MM/yyyy';
|
||||||
|
|
||||||
|
function renderDateField() {
|
||||||
|
const df = document.getElementById('datefield');
|
||||||
|
const cur = readDateField();
|
||||||
|
df.innerHTML = '';
|
||||||
|
const layout = FMT_LAYOUT[currentFmt].concat([null, ['hour',':'], ['minute', null]]);
|
||||||
|
layout.forEach((entry) => {
|
||||||
|
if (entry === null) {
|
||||||
|
const sp = document.createElement('span');
|
||||||
|
sp.className = 'seg-sep'; sp.innerHTML = ' ';
|
||||||
|
df.appendChild(sp); return;
|
||||||
|
}
|
||||||
|
const [key, sep] = entry;
|
||||||
|
const def = SEG_DEFS[key];
|
||||||
|
const seg = document.createElement('span');
|
||||||
|
seg.className = 'segment';
|
||||||
|
seg.contentEditable = 'true';
|
||||||
|
seg.dataset.seg = key;
|
||||||
|
seg.dataset.len = def.len; seg.dataset.min = def.min; seg.dataset.max = def.max;
|
||||||
|
const v = cur[key];
|
||||||
|
if (v == null) {
|
||||||
|
seg.dataset.placeholder = 'true';
|
||||||
|
seg.textContent = def.ph;
|
||||||
|
} else {
|
||||||
|
seg.dataset.placeholder = 'false';
|
||||||
|
seg.textContent = String(v).padStart(def.len, '0');
|
||||||
|
}
|
||||||
|
df.appendChild(seg);
|
||||||
|
if (sep) {
|
||||||
|
const s = document.createElement('span');
|
||||||
|
s.className = 'seg-sep'; s.textContent = sep;
|
||||||
|
df.appendChild(s);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
bindDateSegments();
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindDateSegments() {
|
||||||
|
const dfSegments = Array.from(document.querySelectorAll('.segment'));
|
||||||
|
dfSegments.forEach((seg, idx) => {
|
||||||
|
seg.addEventListener('focus', () => {
|
||||||
|
if (seg.dataset.placeholder === 'true') {
|
||||||
|
seg.textContent = '';
|
||||||
|
}
|
||||||
|
// select all
|
||||||
|
const range = document.createRange();
|
||||||
|
range.selectNodeContents(seg);
|
||||||
|
const sel = window.getSelection();
|
||||||
|
sel.removeAllRanges();
|
||||||
|
sel.addRange(range);
|
||||||
|
});
|
||||||
|
seg.addEventListener('blur', () => {
|
||||||
|
const len = parseInt(seg.dataset.len, 10);
|
||||||
|
const min = parseInt(seg.dataset.min, 10);
|
||||||
|
const max = parseInt(seg.dataset.max, 10);
|
||||||
|
let v = seg.textContent.replace(/\D/g, '');
|
||||||
|
if (!v) {
|
||||||
|
seg.dataset.placeholder = 'true';
|
||||||
|
seg.textContent = seg.dataset.seg.toUpperCase().slice(0,len).padEnd(len, seg.dataset.seg[0].toUpperCase());
|
||||||
|
// reset to nice placeholder
|
||||||
|
const ph = { day:'DD', month:'MM', year:'YYYY', hour:'HH', minute:'MM' }[seg.dataset.seg];
|
||||||
|
seg.textContent = ph;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let n = parseInt(v, 10);
|
||||||
|
if (n < min) n = min;
|
||||||
|
if (n > max) n = max;
|
||||||
|
seg.dataset.placeholder = 'false';
|
||||||
|
seg.textContent = String(n).padStart(len, '0');
|
||||||
|
refreshSelectedDay();
|
||||||
|
});
|
||||||
|
seg.addEventListener('keydown', (e) => {
|
||||||
|
const len = parseInt(seg.dataset.len, 10);
|
||||||
|
if (e.key === 'ArrowRight' || (e.key === '/' || e.key === ':') ) {
|
||||||
|
e.preventDefault();
|
||||||
|
const next = dfSegments[idx + 1];
|
||||||
|
if (next) next.focus();
|
||||||
|
} else if (e.key === 'ArrowLeft') {
|
||||||
|
e.preventDefault();
|
||||||
|
const prev = dfSegments[idx - 1];
|
||||||
|
if (prev) prev.focus();
|
||||||
|
} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
const min = parseInt(seg.dataset.min, 10);
|
||||||
|
const max = parseInt(seg.dataset.max, 10);
|
||||||
|
const cur = parseInt(seg.textContent.replace(/\D/g,''), 10);
|
||||||
|
const base = isNaN(cur) ? min : cur;
|
||||||
|
let n = base + (e.key === 'ArrowUp' ? 1 : -1);
|
||||||
|
if (n < min) n = max;
|
||||||
|
if (n > max) n = min;
|
||||||
|
seg.dataset.placeholder = 'false';
|
||||||
|
seg.textContent = String(n).padStart(len, '0');
|
||||||
|
refreshSelectedDay();
|
||||||
|
} else if (/^\d$/.test(e.key)) {
|
||||||
|
const cur = seg.textContent.replace(/\D/g,'');
|
||||||
|
if (cur.length >= len) {
|
||||||
|
e.preventDefault();
|
||||||
|
seg.textContent = e.key;
|
||||||
|
// place caret at end
|
||||||
|
}
|
||||||
|
// when reaching len, advance to next segment after this char
|
||||||
|
setTimeout(() => {
|
||||||
|
if ((seg.textContent || '').replace(/\D/g,'').length >= len) {
|
||||||
|
const next = dfSegments[idx + 1];
|
||||||
|
if (next) next.focus();
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
} else if (e.key === 'Backspace' && seg.textContent === '') {
|
||||||
|
const prev = dfSegments[idx - 1];
|
||||||
|
if (prev) { e.preventDefault(); prev.focus(); }
|
||||||
|
} else if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
seg.blur();
|
||||||
|
const pop = document.querySelector('.popover[data-popover="due"]');
|
||||||
|
closePopover(pop);
|
||||||
|
updateDuePill();
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
const pop = document.querySelector('.popover[data-popover="due"]');
|
||||||
|
closePopover(pop);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function readDateFieldFromDOM() {
|
||||||
|
return readDateField();
|
||||||
|
}
|
||||||
|
renderDateField();
|
||||||
|
document.getElementById('fmt-pref').addEventListener('change', (e) => {
|
||||||
|
currentFmt = e.target.value;
|
||||||
|
renderDateField();
|
||||||
|
updateDuePill();
|
||||||
|
});
|
||||||
|
|
||||||
|
function readDateField() {
|
||||||
|
const get = (k) => {
|
||||||
|
const s = document.querySelector(`.segment[data-seg="${k}"]`);
|
||||||
|
if (!s || s.dataset.placeholder === 'true') return null;
|
||||||
|
const v = s.textContent.replace(/\D/g,'');
|
||||||
|
return v ? parseInt(v, 10) : null;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
day: get('day'), month: get('month'), year: get('year'),
|
||||||
|
hour: get('hour'), minute: get('minute'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDateValue(d) {
|
||||||
|
const day = String(d.day).padStart(2,'0');
|
||||||
|
const month = String(d.month).padStart(2,'0');
|
||||||
|
const year = String(d.year);
|
||||||
|
switch (currentFmt) {
|
||||||
|
case 'MM/dd/yyyy': return `${month}/${day}/${year}`;
|
||||||
|
case 'yyyy-MM-dd': return `${year}-${month}-${day}`;
|
||||||
|
default: return `${day}/${month}/${year}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function updateDuePill() {
|
||||||
|
const d = readDateField();
|
||||||
|
const pill = document.querySelector('.pill[data-pill="due"]');
|
||||||
|
if (d.day && d.month && d.year) {
|
||||||
|
pill.removeAttribute('data-empty');
|
||||||
|
const time = d.hour != null && d.minute != null
|
||||||
|
? ` ${String(d.hour).padStart(2,'0')}:${String(d.minute).padStart(2,'0')}` : '';
|
||||||
|
pill.innerHTML = `<span class="pill-icon">📅</span><span class="pill-label">Due</span><span class="pill-sep">·</span><span class="pill-value">${formatDateValue(d)}${time}</span>`;
|
||||||
|
} else {
|
||||||
|
pill.setAttribute('data-empty', 'true');
|
||||||
|
pill.innerHTML = '<span class="pill-icon">📅</span><span class="pill-label">Due</span>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Mini calendar ---------- */
|
||||||
|
let calYear = 2026, calMonth = 5; // May 2026
|
||||||
|
function renderCalendar() {
|
||||||
|
const grid = document.getElementById('cal-grid');
|
||||||
|
document.getElementById('cal-month').textContent =
|
||||||
|
new Date(calYear, calMonth - 1, 1).toLocaleString(undefined, { month: 'long', year: 'numeric' });
|
||||||
|
grid.innerHTML = '';
|
||||||
|
const dows = ['Mo','Tu','We','Th','Fr','Sa','Su'];
|
||||||
|
dows.forEach((d) => {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'cal-dow'; el.textContent = d;
|
||||||
|
grid.appendChild(el);
|
||||||
|
});
|
||||||
|
const first = new Date(calYear, calMonth - 1, 1);
|
||||||
|
const offset = (first.getDay() + 6) % 7; // Mon-first
|
||||||
|
const daysInMonth = new Date(calYear, calMonth, 0).getDate();
|
||||||
|
const daysPrev = new Date(calYear, calMonth - 1, 0).getDate();
|
||||||
|
for (let i = offset - 1; i >= 0; i--) {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'cal-day';
|
||||||
|
el.dataset.otherMonth = 'true';
|
||||||
|
el.textContent = daysPrev - i;
|
||||||
|
grid.appendChild(el);
|
||||||
|
}
|
||||||
|
for (let d = 1; d <= daysInMonth; d++) {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'cal-day';
|
||||||
|
el.tabIndex = 0;
|
||||||
|
el.textContent = d;
|
||||||
|
el.dataset.day = d;
|
||||||
|
el.addEventListener('click', () => pickCalDay(d));
|
||||||
|
el.addEventListener('keydown', (e) => onCalKey(e, d));
|
||||||
|
grid.appendChild(el);
|
||||||
|
}
|
||||||
|
refreshSelectedDay();
|
||||||
|
}
|
||||||
|
function refreshSelectedDay() {
|
||||||
|
const d = readDateField();
|
||||||
|
const days = document.querySelectorAll('.cal-day[data-day]');
|
||||||
|
days.forEach((el) => el.removeAttribute('data-selected'));
|
||||||
|
if (d.day && d.month === calMonth && d.year === calYear) {
|
||||||
|
const tgt = document.querySelector(`.cal-day[data-day="${d.day}"]`);
|
||||||
|
if (tgt) tgt.setAttribute('data-selected', 'true');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function pickCalDay(d) {
|
||||||
|
const segDay = document.querySelector('.segment[data-seg="day"]');
|
||||||
|
const segMonth = document.querySelector('.segment[data-seg="month"]');
|
||||||
|
const segYear = document.querySelector('.segment[data-seg="year"]');
|
||||||
|
segDay.dataset.placeholder = 'false'; segDay.textContent = String(d).padStart(2,'0');
|
||||||
|
segMonth.dataset.placeholder = 'false'; segMonth.textContent = String(calMonth).padStart(2,'0');
|
||||||
|
segYear.dataset.placeholder = 'false'; segYear.textContent = String(calYear);
|
||||||
|
refreshSelectedDay();
|
||||||
|
updateDuePill();
|
||||||
|
}
|
||||||
|
function onCalKey(e, d) {
|
||||||
|
const grid = document.getElementById('cal-grid');
|
||||||
|
const days = Array.from(grid.querySelectorAll('.cal-day[data-day]'));
|
||||||
|
const idx = days.findIndex((el) => parseInt(el.dataset.day,10) === d);
|
||||||
|
let target = null;
|
||||||
|
if (e.key === 'ArrowRight') target = days[idx + 1];
|
||||||
|
else if (e.key === 'ArrowLeft') target = days[idx - 1];
|
||||||
|
else if (e.key === 'ArrowDown') target = days[idx + 7];
|
||||||
|
else if (e.key === 'ArrowUp') target = days[idx - 7];
|
||||||
|
else if (e.key === 'Enter') { e.preventDefault(); pickCalDay(d); return; }
|
||||||
|
if (target) { e.preventDefault(); target.focus(); }
|
||||||
|
}
|
||||||
|
document.querySelectorAll('[data-nav]').forEach((b) => {
|
||||||
|
b.addEventListener('click', () => {
|
||||||
|
const dir = parseInt(b.dataset.nav, 10);
|
||||||
|
calMonth += dir;
|
||||||
|
if (calMonth < 1) { calMonth = 12; calYear--; }
|
||||||
|
if (calMonth > 12) { calMonth = 1; calYear++; }
|
||||||
|
renderCalendar();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
renderCalendar();
|
||||||
|
|
||||||
|
/* ---------- click outside closes popovers ---------- */
|
||||||
|
document.addEventListener('mousedown', (e) => {
|
||||||
|
const inPop = e.target.closest('.popover');
|
||||||
|
const inPill = e.target.closest('.pill');
|
||||||
|
if (!inPop && !inPill) closeAllPopovers();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user