68 lines
7.8 KiB
Markdown
68 lines
7.8 KiB
Markdown
 
|
# План: 020 — выпадающие списки в стиле меню действий
|
|||
|
|
|
|||
|
|
## Context
|
|||
|
|
|
|||
|
|
Фильтры и поле «Группа» используют стандартный `<select>`: раскрытый список рисует браузер/ОС, он не совпадает
|
|||
|
|
с дизайном приложения (шрифт, скругления, тени, тёмная тема). Пользователь просит заменить **все** выпадающие списки
|
|||
|
|
на оформление меню действий строки устройства («⋯»: `details.menu` + `.menu-panel` + пункты `.mi`, выбранный — `.mi.on` с «✓»).
|
|||
|
|
|
|||
|
|
Где сейчас `<select class="field">`:
|
|||
|
|
- `dashboard.html` — фильтры «Статус», «Обновления», «Канал» (форма `#dev-filters`, `hx-trigger="input delay:300ms, change"`);
|
|||
|
|
- `backups.html` — «Группа», «Устройство», «Тип файла» (`onchange="this.form.submit()"`);
|
|||
|
|
- `events.html` — «Тип», «Актор», «Устройство» (`onchange="this.form.submit()"`);
|
|||
|
|
- `_device_form.html` — «Группа» в окне/странице устройства (`data-newgroup`, пункт «+ Новая группа…» показывает поле названия; окно приходит через HTMX).
|
|||
|
|
|
|||
|
|
Решение (технический выбор оркестратора, UX — по запросу пользователя): **прогрессивное улучшение в `app.js`**.
|
|||
|
|
Нативный `<select>` остаётся в разметке (значение уходит с формой, работает без JavaScript, текущая логика
|
|||
|
|
`syncFilters`, `data-newgroup`, `onchange`/`hx-trigger` не меняется), скрывается, а рядом строится меню в стиле «⋯».
|
|||
|
|
|
|||
|
|
## Изменения
|
|||
|
|
|
|||
|
|
### `app/ui/static/app.js`
|
|||
|
|
- `enhanceSelects(root = document)`: для каждого `select.field` без отметки `data-enhanced` строит
|
|||
|
|
`<details class="menu select-menu">` + `<summary class="field select-btn">` (текст выбранного `<option>` + шеврон, как у кнопок меню)
|
|||
|
|
+ `<div class="menu-panel">` с `<button type="button" class="mi" data-value="…">` на каждый `<option>`; выбранный — `.mi.on` («✓» уже есть в CSS).
|
|||
|
|
Ширина берётся из `style.width` селекта (у фильтров заданы 150–200px, в форме — 100%); панель не уже кнопки.
|
|||
|
|
`aria-label` селекта (или текст связанной подписи) переносится на `summary`; `aria-haspopup="listbox"`.
|
|||
|
|
Селект получает `hidden` и `data-enhanced`, его `tabindex` = -1.
|
|||
|
|
- Выбор пункта: `select.value = …`, `select.dispatchEvent(new Event("change", { bubbles: true }))` — срабатывают
|
|||
|
|
inline `onchange`, `hx-trigger="change"` формы `#dev-filters` и обработчик `data-newgroup`; обновить текст кнопки и `.on`; закрыть меню.
|
|||
|
|
- Синхронизация: класс `.on` (включённый фильтр) — зеркалить с селекта на `summary` в `syncFilters` и при выборе
|
|||
|
|
(сейчас `.on` ставится на `select.field` — перенести подсветку на кнопку).
|
|||
|
|
- Вызов: при `init` и в `htmx:afterSwap` для вставленного фрагмента (окно устройства, таблица с OOB-фильтрами).
|
|||
|
|
- Клавиатура: `summary` фокусируется Tab; Enter/Space открывают; в открытом меню ↑/↓ — между пунктами, Enter — выбрать,
|
|||
|
|
Escape — закрыть (существующий обработчик) и вернуть фокус на кнопку.
|
|||
|
|
- **Переиспользовать** существующее: `placeMenu` (позиционирование fixed, раскрытие вверх, не обрезается таблицей/окном),
|
|||
|
|
`closeMenus`, закрытие по клику вне и после выбора пункта, `reflowMenu`. Новый код позиционирования не писать.
|
|||
|
|
- Автообновление таблицы (`autoRefresh`) уже не срабатывает при открытом `details` — поведение сохраняется.
|
|||
|
|
|
|||
|
|
### `app/ui/static/style.css`
|
|||
|
|
- `.select-btn`: вид как у `select.field` (высота 36, `padding: 0 36px 0 14px`, `font-weight: 500`, шеврон справа, `cursor: pointer`,
|
|||
|
|
обрезка длинного текста `text-overflow: ellipsis`), `list-style: none` и скрытие маркера `details`; `.select-btn.on` — как `select.field.on`.
|
|||
|
|
- `.select-menu .menu-panel`: `max-height` с прокруткой (длинные списки устройств/типов событий), `min-width` = ширина кнопки.
|
|||
|
|
- Только существующие токены (`--surf`, `--line`, `--acc50`, `--accd`, `--shadow-menu` …); литеральных цветов нет, тёмная тема — через токены.
|
|||
|
|
|
|||
|
|
### Шаблоны
|
|||
|
|
- По возможности без изменений. Исключение — `_device_form.html`: `<select>` внутри `<label>`; убедиться, что клик по кнопке списка
|
|||
|
|
внутри `<label>` не вызывает побочного действия подписи (двойное переключение `details`). Если вызывает — заменить `<label class="lbl">`
|
|||
|
|
у этого поля на `<div class="lbl">` с подписью `<span id>` и `aria-labelledby` у кнопки.
|
|||
|
|
|
|||
|
|
## Тесты (минимально)
|
|||
|
|
Логика на клиенте, автотестов JS в проекте нет. Серверные тесты не меняются; проверка — вручную (раздел «Проверка»).
|
|||
|
|
|
|||
|
|
## Документация
|
|||
|
|
README, раздел «Интерфейс»: выпадающие списки в стиле меню действий (без JavaScript — стандартные). Строка 020 в «История изменений».
|
|||
|
|
`summary.md` — оркестратор.
|
|||
|
|
|
|||
|
|
## Исполнение
|
|||
|
|
Исполнитель (Sonnet): `app.js`, `style.css`, при необходимости `_device_form.html`, README; пересборка стенда. Тесты не запускает, не коммитит.
|
|||
|
|
Изменение 019 в рабочем дереве не закоммичено — файлы 019 не трогать (кроме README: строка 020 добавляется после строки 019).
|
|||
|
|
|
|||
|
|
## Проверка
|
|||
|
|
- Стенд (override 8001) отдаёт новый `app.js` (`curl -s localhost:8001/static/app.js | grep -c enhanceSelects` ≥ 1).
|
|||
|
|
- `pytest` — без регрессий.
|
|||
|
|
- Ручная проверка UI — пользователь (светлая и тёмная тема, Ctrl+F5):
|
|||
|
|
- «Устройства»: фильтры Статус/Обновления/Канал — выбор применяет фильтр, «Сбросить (N)» считает, подсветка включённого фильтра;
|
|||
|
|
- «Бэкапы», «Журнал»: выбор перезагружает страницу с фильтром, выбранный пункт отмечен «✓»;
|
|||
|
|
- окно устройства: «Группа» → «+ Новая группа…» показывает поле названия; сохранение привязывает группу;
|
|||
|
|
- список открывается над таблицей/окном без обрезки, вверх у нижнего края; клавиатура: Tab, Enter, ↑/↓, Escape.
|