42 lines
4.1 KiB
Markdown
42 lines
4.1 KiB
Markdown
# Меню пользователя в шапке: логин с выпадающим списком (изменение 036)
|
||||
|
|
|
|||
|
|
## Context
|
|||
|
|
Сейчас справа в шапке (`web/app.js::shell`) три элемента: серый логин (`span.user`) и две кнопки `btn ghost` — «Сменить пароль» и «Выйти».
|
|||
|
|
Их нужно свернуть в один элемент. В шапке остаётся только логин; по нажатию раскрывается список «Сменить пароль» / «Выйти»
|
|||
|
|
в том же стиле, что все выпадающие списки сайта (`popMenu` + `.pop`). Логин стоит на месте нынешней кнопки «Выйти»,
|
|||
|
|
шрифт тот же, что у неё: `.btn.ghost` — `500 14px var(--sans)`, цвет `--muted`.
|
|||
|
|
|
|||
|
|
## Изменения — `web/app.js`
|
|||
|
|
- `shell()`: вместо `span.user` и двух `btn(...)` — один триггер по образцу `bulkMenu`/`filterBtn`:
|
|||
|
|
```
|
|||
|
|
<span class="rel user-menu"><button type="button" class="btn ghost" data-action="menu" data-menu="user" title="<роль>">
|
|||
|
|
<логин>${I.chevD(14)}</button>${popMenu("user", [{label:"Сменить пароль", value:"pw"}, {label:"Выйти", value:"logout"}], "row-pop")}</span>
|
|||
|
|
```
|
|||
|
|
- `btn ghost` даёт шрифт и цвет нынешней «Выйти»; шеврон — как у остальных триггеров списков.
|
|||
|
|
- `row-pop` (`top:40px; right:0`) выравнивает список по правому краю, чтобы он не уходил за край окна.
|
|||
|
|
- Роль остаётся во всплывающей подсказке (`title`), как сейчас у `span.user`.
|
|||
|
|
- `actions.pick`: ветка `id === "user"` — снять открытый `.pop` (как для `rowActions`), затем `value === "logout"` → `actions.logout()`,
|
|||
|
|
иначе → `passwordDialog()`. Существующие действия `logout` и `pw-change` не меняются.
|
|||
|
|
- Открытие и закрытие по клику вне списка, навигация стрелками — уже есть в общих обработчиках `menu`/`.pop` (≈стр. 1036, 1059), новых не нужно.
|
|||
|
|
- Комментарии — «изменение 036».
|
|||
|
|
|
|||
|
|
## Изменения — `web/styles.css`
|
|||
|
|
- Удалить неиспользуемое правило `.appbar .user`.
|
|||
|
|
- При необходимости `.user-menu .pop{min-width:180px}`, если `row-pop` уже задаёт ширину — не добавлять.
|
|||
|
|
|
|||
|
|
## Документация (правила проекта)
|
|||
|
|
- `docs/changes/036-user-menu/PLAN.md` — этот план; по завершении — `SUMMARY.md`.
|
|||
|
|
- `README.md`, «Интерфейс»: логин в шапке раскрывает меню «Сменить пароль» / «Выйти»; строка 036 в истории.
|
|||
|
|
|
|||
|
|
## Исполнение
|
|||
|
|
По принятой схеме: правки делает агент на Sonnet (только `node --check`, без стенда); ревью, пересборка стенда, проверки и SUMMARY — моя часть.
|
|||
|
|
Тесты не нужны: API не меняется, UI автотестами не покрыт.
|
|||
|
|
|
|||
|
|
## Проверка
|
|||
|
|
- `node --check web/app.js`; пересборка `docker compose -p ipam_control_006 up -d --build app`; стенд отдаёт новый `app.js`.
|
|||
|
|
- В браузере на `https://rxipam.rxmsk.ru` (или `:8088`):
|
|||
|
|
- в шапке справа только логин с шевроном, шрифт как у прежней «Выйти»;
|
|||
|
|
- клик раскрывает список в стиле остальных, выровненный вправо;
|
|||
|
|
- «Сменить пароль» открывает диалог, «Выйти» — экран входа;
|
|||
|
|
- клик вне списка и Esc закрывают его, стрелки перемещают фокус.
|
|||
|
|
- Визуальную проверку выполняет пользователь (либо через `claude-in-chrome`, если он подключён).
|