feat(room): компактная шторка настроек устройств на мобильном
На ширине ≤600px (брейкпоинт комнаты) DeviceSettingsDialog рендерит те же поля не модалкой по центру, а шторкой снизу (`room-sheet-overlay`/ `room-sheet-panel`) — по образцу решения оператора: так быстрее и привычнее с телефона. Десктоп не меняется. Закрытие — клик вне панели (было и раньше), Escape и возврат фокуса через существующий useModalDismiss, и свайп вниз за ручку (JS считает смещение пальца и либо закрывает панель, либо возвращает её на место пружиной).
This commit is contained in:
@@ -381,6 +381,46 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
|
||||
.room-field-label { display: block; font: var(--text-body); font-weight: 600; color: var(--color-room-text-primary); margin-bottom: var(--space-2); }
|
||||
.room-field-hint { font: var(--text-body); color: var(--color-room-text-secondary); margin: 0; }
|
||||
|
||||
/*
|
||||
* ---------- Шторка «Настройки устройств» на мобильном ----------
|
||||
* Тот же диалог (`DeviceSettingsDialog`), что модалка выше, — только контейнер
|
||||
* снизу вместо центра экрана: `.room-sheet-overlay`/`.room-sheet-panel` вместо
|
||||
* `.room-modal-overlay`/`.room-modal-panel`, разметка полей (`.room-field` и
|
||||
* ниже) общая. Ручка `.room-sheet-handle` — свайп вниз для закрытия (JS считает
|
||||
* смещение пальца и сам решает, закрывать или вернуть панель на место;
|
||||
* `transition` тут — только пружина возврата, во время самого драга
|
||||
* компонент подставляет инлайновый `transition: none`).
|
||||
*/
|
||||
.room-sheet-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
.room-sheet-panel {
|
||||
background: var(--color-room-surface-raised);
|
||||
border: 1px solid var(--color-room-tile-border);
|
||||
border-bottom: none;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
box-shadow: var(--shadow-room-panel);
|
||||
padding: var(--space-4) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
transition: transform 160ms ease-out;
|
||||
}
|
||||
.room-sheet-handle {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-room-tile-border);
|
||||
margin: 0 auto var(--space-4);
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------- Чип «Вы демонстрируете экран» ----------
|
||||
* Рендерится внутри `RoomParticipantTile` (см. её `TileBody`) — т.е. внутри
|
||||
|
||||
Reference in New Issue
Block a user