Компоненты
Окна
Окно (Modal), форма в окне, подтверждение, нижнее окно, боковое меню.
Окно (Modal)
Окно поверх страницы: заголовок, ×, содержимое. Нативный <dialog> — поверх липких панелей, закрывается Esc и ×, фокус на первом поле.
Правила
- Три ширины: sm 28rem (пароль, причина), md 36rem (несколько полей), lg 48rem (список, QR).
- На телефоне окно подстраивается под ширину экрана (100vw − 2rem), длинное прокручивается внутри, заголовок прилипает.
- Закрывается только ×, кнопки «Закрыть» внизу нет.
Форма в окне (FormDialog)
Правило dashboard: на странице данные и кнопка («Изменить», ✎), поля — в окне. Внизу «Отмена» и действие; если сервер отказал — текст внутри окна, при успехе окно закрывается.
Правила
- Во время отправки кнопка «Выполняется…» и неактивна.
- Ошибка сервера — в красном блоке внутри окна; окно не закрывается, введённое сохраняется.
- После успеха — короткое уведомление (Состояния → Уведомление).
Подтверждение (опасное действие)
Удаление, остановка, блокировка — красная кнопка, ваш пароль и причина (3–300 символов, пишется в журнал). Браузерный confirm() не используется.
Окно подтверждения (ConfirmDialog)
Вместо браузерных confirm(), alert() и prompt(): вопрос, что произойдёт, «Отмена» и действие. Если нужна причина — поле в самом окне.
Правила
- Заголовок — вопрос: «Удалить платёж?»; в тексте — что произойдёт и что это необратимо.
- Кнопка действия — глагол («Удалить», «Отменить»), опасное — красное; «OK» не пишется.
- Причина, если нужна, — 3–300 символов, пишется в журнал; пустая — ошибка внутри окна.
- Где ждут ответа — useConfirm: отмена — null, иначе причина.
Матрица доступов (AccessMatrix)
Права одной учётки по разделам: галочка — право, которое у учётки действительно есть. В Dashboard открывает главный супер-админ, в Cabinet — CEO; свою учётку никто не меняет.
Правила
- У каждого права его источник: «роль» — даёт роль, «выдано» — сверх роли, «отобрано» — право роли забрано; ↺ — как у роли.
- Право, которое менять нельзя, — с выключенной галочкой (например, само право на матрицу).
- Одно «Сохранить», причина необязательна; каждое изменение пишется в аудит отдельной строкой.
Меню действий (⋯)
Редкие действия строки. Опасное — последним, отделено линией, красное.
Нижнее окно (телефон) и боковое меню
На телефоне окно с большим выбором (фильтры, сортировка) выезжает снизу; шире 640 px — обычное окно. Боковое меню на телефоне выезжает слева.
Правила
- В нижнем окне сверху полоска-ручка, внизу — «Сбросить» и «Показать (24)».
- Нажатие на фон закрывает.