Sergey Antropoff
7cd7ba0653
- Универсальное исправление скролла для всех контейнеров в Multi View режиме - Более специфичные CSS селекторы для предотвращения влияния на другие элементы - Исправление проблемы с wrap text в options - Добавление вызовов applyWrapSettings() в ключевых местах - Обновление документации с описанием всех исправлений - Добавление CHANGELOG.md и SCROLL_FIX_SUMMARY.md - Добавление документации в app/docs/
78 lines
4.2 KiB
Markdown
78 lines
4.2 KiB
Markdown
# Новые функции интерфейса LogBoard+
|
||
|
||
## Сворачивание панелей
|
||
|
||
### Sidebar (боковая панель)
|
||
- **Кнопка сворачивания**: <i class="fas fa-chevron-left"></i> на границе sidebar и основного контента
|
||
- **Горячая клавиша**: `Ctrl+B` / `Ctrl+И`
|
||
- **Свернутое состояние**: ширина 60px
|
||
- **Логотип**: показывает <i class="fas fa-terminal"></i> в свернутом состоянии
|
||
- **Кнопка помощи**: <i class="fas fa-question-circle"></i> между options и logout
|
||
|
||
## Управление
|
||
|
||
### Кнопка сворачивания
|
||
- **Кнопка на границе**: сворачивает боковую панель
|
||
- **Расположение**: посередине экрана по высоте на границе sidebar и основного контента
|
||
- **Состояние сохраняется** в localStorage
|
||
|
||
### Горячая клавиша
|
||
- **Ctrl+B** / **Ctrl+И**: сворачивает/разворачивает sidebar и header
|
||
- Удобно для быстрого освобождения места на экране
|
||
|
||
### Header (заголовок)
|
||
- **Сворачивается вместе с sidebar**
|
||
- **В свернутом состоянии**: тонкая полоска 40px высотой
|
||
- **Содержит**: фильтр логов, кнопки уровней логирования, кнопку обновления
|
||
- **Стили**: кнопки выглядят точно так же, как в развернутом состоянии
|
||
- **log-header**: полностью скрывается в свернутом режиме
|
||
- **log-content**: минимальный padding 2px в свернутом состоянии
|
||
- **multi-view-panel**: показывает название контейнера в Single View режиме
|
||
|
||
## Визуальные элементы
|
||
|
||
### Логотип в свернутом sidebar
|
||
```
|
||
<i class="fas fa-terminal"></i>
|
||
```
|
||
- Отображается только когда sidebar свернут
|
||
- Расположен в самом верху sidebar
|
||
- Стилизован в цвете акцента
|
||
- Занимает минимальное место
|
||
|
||
### Модальное окно с горячими клавишами
|
||
- **Открытие**: кнопка <i class="fas fa-question-circle"></i> в свернутом sidebar
|
||
- **Закрытие**: кнопка X, клик вне окна, или повторный клик на кнопку помощи
|
||
- **Содержит**: полный список всех горячих клавиш с описанием
|
||
- **Анимация**: плавное появление и исчезновение
|
||
|
||
### Анимации
|
||
- Плавные переходы при сворачивании/разворачивании
|
||
- Длительность анимации: 0.3 секунды
|
||
- CSS transitions для всех элементов
|
||
- Кнопка сворачивания остается на месте при наведении
|
||
|
||
## Сохранение настроек
|
||
|
||
### localStorage ключи
|
||
- `lb_sidebar_collapsed` - состояние sidebar
|
||
- `lb_hotkeys_shown` - показ уведомления о горячих клавишах
|
||
|
||
### Восстановление состояния
|
||
- При перезапуске приложения состояния восстанавливаются
|
||
- Кнопки показывают правильные иконки
|
||
- Tooltip обновляется в соответствии с состоянием
|
||
|
||
## Примеры использования
|
||
|
||
### Освобождение места
|
||
1. Нажать `Ctrl+B` или кнопку sidebar - сворачивается панель
|
||
2. Получаем больше места для просмотра логов
|
||
|
||
### Быстрое переключение
|
||
1. Использовать `Ctrl+B` для быстрого переключения
|
||
2. Использовать кнопку на границе для точного управления
|
||
|
||
## Автор
|
||
Сергей Антропов - https://devops.org.ru
|