33 lines
5.7 KiB
Markdown
33 lines
5.7 KiB
Markdown
 
|
# План: 006 — редизайн UI (макет на ревью)
|
||
|
|
|
||
|
|
Статус: **макет принят заказчиком, внедрено** (см. `summary.md`). Ниже — исходное предложение. Макет: https://claude.ai/artifact/QdhgQWbQEWRYtBoAWMjGq6 (7 листов: разбор текущего UI, компоненты и уровни, «Устройства» в трёх состояниях, «Бэкапы», «Группы»).
|
||
|
|
|
||
|
|
## Проблемы текущего UI
|
||
|
|
1. Над таблицей три-четыре панели подряд (вкладки групп, фильтры, действия над выбранными, перенос в группу) выглядят одинаково — уровни не отделены.
|
||
|
|
2. Разные формы контролов: вкладки-пилюли (r16), кнопки и поля (r5), бейджи (r10), пунктирная «вкладка».
|
||
|
|
3. Действия над выбранными видны всегда; «Применить канал» и «Переместить» — двухшаговые.
|
||
|
|
4. 12 колонок, выпадающий список канала в каждой строке.
|
||
|
|
|
||
|
|
## Предложение
|
||
|
|
- **Одна форма контролов**: высота 36, радиус 8; три вида кнопок (primary — одна на экран, secondary, ghost); список-фильтр выглядит как secondary с шевроном; активный фильтр — контур и тон акцента. Метки: высота 22, радиус 6. Вкладки — подчёркивание, не кнопки.
|
||
|
|
- **Уровни экрана**: 1 приложение (навигация) → 2 страница (заголовок, счётчики, главное действие) → 3 область (вкладки групп) → 4 инструменты таблицы → 5 данные → задачи отдельной карточкой.
|
||
|
|
- **Инструменты таблицы — одна полоса двух состояний**: нет выбора — фильтры; выбрано N — действия над выбранными (Создать бэкап, Обновить статус, Обновление ▾, Канал ▾, В группу ▾, Снять выбор). ROS/FW — в меню с пояснением про перезагрузку.
|
||
|
|
- **Таблица**: модель уходит второй строкой в ячейку устройства; канал только показывается (смена — через «Канал ▾» и меню строки); меню «⋯» сгруппировано разделителями.
|
||
|
|
- «Управление группами» — ссылка справа от вкладок и пункт верхнего меню (не вкладка). Бэкапы: та же полоса фильтров, действия в строке — «Скачать» (иконка) и «⋯».
|
||
|
|
|
||
|
|
## Вопросы к ревью
|
||
|
|
1. Убрать выбор канала из строк? 2. Слить «Модель» в ячейку устройства? 3. Действия заменяют фильтры при выборе — ок?
|
||
|
|
4. «Управление группами» в двух местах — оставить оба? 5. Подтверждение обновлений: окно браузера или модальное со списком устройств? 6. Тёмная тема — сохраняем (палитра на тех же токенах).
|
||
|
|
|
||
|
|
## Внедрение (после утверждения макета)
|
||
|
|
1. Токены и компоненты в `app/ui/static/style.css` (кнопки, поля, метки, вкладки, карточка, меню), убрать разнобой радиусов.
|
||
|
|
2. `base.html`, `dashboard.html`: заголовок страницы, вкладки-подчёркивание, единая полоса инструментов (фильтры ⇄ действия при выборе — HTMX + небольшой JS для счётчика выбора).
|
||
|
|
3. `_devices.html`: слияние колонки «Модель», канал — текстом, сгруппированное меню строки; меню «Обновление / Канал / В группу» вместо отдельных форм (маршрут `/ui/move` сохраняется).
|
||
|
|
4. `backups.html`, `groups.html`, `device_form.html` — на тех же компонентах.
|
||
|
|
5. Проверка: pytest, рендер шаблонов и `curl`; внешний вид — на ревью у заказчика (браузера на машине разработки нет). Итоги в `summary.md`, README — в «Историю изменений».
|
||
|
|
|
||
|
|
|
||
|
|
## Принято к внедрению (дополнение)
|
||
|
|
- Стиль макета переносится в точности; окна добавления/изменения устройства и групп проектируются в том же стиле (листы «Окно: …» в макете).
|
||
|
|
- Два бага, найденные заказчиком: (1) перезагрузка после обновления FW должна идти по записи в журнале «Firmware upgraded successfully, please reboot for changes to take effect!»; (2) при добавлении устройства нельзя привязать его к группе.
|
||
|
|
- Причины и подробный план внедрения — `docs/changes/006-ui-redesign/summary.md` (раздел «Баги») и утверждённый план в истории работ.
|