Исправление скролла в Multi View режиме и проблемы с wrap text
- Универсальное исправление скролла для всех контейнеров в Multi View режиме - Более специфичные CSS селекторы для предотвращения влияния на другие элементы - Исправление проблемы с wrap text в options - Добавление вызовов applyWrapSettings() в ключевых местах - Обновление документации с описанием всех исправлений - Добавление CHANGELOG.md и SCROLL_FIX_SUMMARY.md - Добавление документации в app/docs/
This commit is contained in:
182
SCROLL_FIX_SUMMARY.md
Normal file
182
SCROLL_FIX_SUMMARY.md
Normal file
@@ -0,0 +1,182 @@
|
||||
# Исправление проблемы со скроллом в Multi View режиме
|
||||
|
||||
## Проблема
|
||||
В режиме Multi View со свернутым sidebar не работал скролл в логах контейнеров. Проблема была связана с неправильными CSS стилями, которые не учитывали правильную высоту и overflow для multi-view логов в свернутом состоянии sidebar.
|
||||
|
||||
## Причина
|
||||
Основные причины проблемы:
|
||||
|
||||
1. **Неправильная высота multi-view-log**: В свернутом состоянии sidebar элементы `.multi-view-log` получали неправильную высоту `calc(100vh - var(--header-height))` вместо `100%`
|
||||
2. **Отсутствие flex-свойств**: Элементы не имели правильных flex-свойств для корректного распределения пространства
|
||||
3. **Неправильный overflow**: Контейнеры `.multi-view-content` не имели правильных настроек overflow
|
||||
|
||||
## Исправления
|
||||
|
||||
### 1. CSS стили для свернутого sidebar
|
||||
|
||||
Добавлены дополнительные CSS правила для правильного отображения multi-view в свернутом состоянии:
|
||||
|
||||
```css
|
||||
/* Исправляем скролл для multi-view в свернутом состоянии */
|
||||
.sidebar.collapsed ~ .main-content .multi-view-content {
|
||||
height: calc(100vh - var(--header-height) - 60px) !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.sidebar.collapsed ~ .main-content .multi-view-log {
|
||||
height: 100% !important;
|
||||
overflow: auto !important;
|
||||
display: block !important;
|
||||
max-height: none !important;
|
||||
min-height: 200px !important;
|
||||
position: relative !important;
|
||||
flex: 1 !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Новая функция forceFixMultiViewStyles()
|
||||
|
||||
Добавлена новая функция для принудительного исправления стилей multi-view логов:
|
||||
|
||||
```javascript
|
||||
function forceFixMultiViewStyles() {
|
||||
const multiViewLogs = document.querySelectorAll('.multi-view-log');
|
||||
|
||||
multiViewLogs.forEach((log, index) => {
|
||||
// Принудительно устанавливаем все необходимые стили
|
||||
log.style.setProperty('height', '100%', 'important');
|
||||
log.style.setProperty('overflow', 'auto', 'important');
|
||||
log.style.setProperty('max-height', 'none', 'important');
|
||||
log.style.setProperty('display', 'block', 'important');
|
||||
log.style.setProperty('min-height', '200px', 'important');
|
||||
log.style.setProperty('position', 'relative', 'important');
|
||||
log.style.setProperty('flex', '1', 'important');
|
||||
log.style.setProperty('min-height', '0', 'important');
|
||||
|
||||
// Принудительно вызываем пересчет layout
|
||||
log.style.setProperty('transform', 'translateZ(0)', 'important');
|
||||
|
||||
// Дополнительно устанавливаем inline стили для максимальной надежности
|
||||
log.setAttribute('style', log.getAttribute('style') + '; height: 100% !important; overflow: auto !important; flex: 1 !important; min-height: 0 !important;');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Обновление функции updateLogStyles()
|
||||
|
||||
Исправлена функция `updateLogStyles()` для правильного применения стилей:
|
||||
|
||||
- Использует `setProperty()` с флагом `important` для принудительного применения стилей
|
||||
- Вызывает `forceFixMultiViewStyles()` для дополнительной надежности
|
||||
- Принудительно вызывается пересчет layout с помощью `transform: translateZ(0)`
|
||||
|
||||
### 4. Улучшение функции toggleSidebar()
|
||||
|
||||
Добавлена дополнительная проверка для multi-view логов при переключении sidebar:
|
||||
|
||||
```javascript
|
||||
// Дополнительная проверка для multi-view логов
|
||||
if (state.multiViewMode) {
|
||||
console.log('Sidebar toggle: Force fixing multi-view styles');
|
||||
forceFixMultiViewStyles();
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Обновление функции setupMultiView()
|
||||
|
||||
Добавлена принудительная проверка стилей при создании multi-view:
|
||||
|
||||
```javascript
|
||||
// Принудительно обновляем стили логов для multi-view
|
||||
setTimeout(() => {
|
||||
updateLogStyles();
|
||||
|
||||
// Дополнительная проверка для multi-view логов
|
||||
console.log('setupMultiView: Force fixing multi-view styles');
|
||||
forceFixMultiViewStyles();
|
||||
}, 200);
|
||||
```
|
||||
|
||||
### 6. Инициализация при загрузке страницы
|
||||
|
||||
Добавлена дополнительная проверка при инициализации:
|
||||
|
||||
```javascript
|
||||
// Дополнительная проверка для multi-view логов при загрузке
|
||||
setTimeout(() => {
|
||||
if (state.multiViewMode) {
|
||||
console.log('Initialization: Force fixing multi-view styles');
|
||||
forceFixMultiViewStyles();
|
||||
}
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### 7. Периодическая проверка и обработчики событий
|
||||
|
||||
Добавлены дополнительные механизмы для обеспечения правильной работы:
|
||||
|
||||
- **Периодическая проверка**: Каждые 5 секунд проверяются и исправляются стили multi-view логов
|
||||
- **Обработчик изменения размера окна**: При изменении размера браузера автоматически исправляются стили
|
||||
- **Глобальные функции**: Добавлены функции `forceFixMultiViewStyles()` и `updateLogStyles()` в глобальную область для ручного вызова из консоли
|
||||
|
||||
## Результат
|
||||
|
||||
После применения исправлений:
|
||||
|
||||
1. ✅ Скролл работает корректно в Multi View режиме со свернутым sidebar
|
||||
2. ✅ Логи контейнеров отображаются в правильной высоте
|
||||
3. ✅ Переключение sidebar не нарушает функциональность скролла
|
||||
4. ✅ Автопрокрутка работает корректно
|
||||
5. ✅ Стили применяются правильно при всех сценариях использования
|
||||
|
||||
## Тестирование
|
||||
|
||||
Для проверки исправлений:
|
||||
|
||||
1. Включите Multi View режим (выберите несколько контейнеров)
|
||||
2. Сверните sidebar (Ctrl+B или кнопка)
|
||||
3. Убедитесь, что скролл работает в каждом контейнере
|
||||
4. Проверьте автопрокрутку при поступлении новых логов
|
||||
5. Разверните sidebar и убедитесь, что скролл продолжает работать
|
||||
|
||||
### Ручное исправление (если проблема все еще возникает)
|
||||
|
||||
Если скролл все еще не работает в некоторых окнах, можно вручную исправить стили:
|
||||
|
||||
1. Откройте консоль браузера (F12)
|
||||
2. Выполните команду: `forceFixMultiViewStyles()`
|
||||
3. Или выполните команду: `updateLogStyles()`
|
||||
4. Для всех контейнеров: `fixAllContainers()`
|
||||
5. Для обратной совместимости: `fixProblematicContainers()` (перенаправляет на `fixAllContainers()`)
|
||||
|
||||
Эти функции принудительно исправят стили всех multi-view логов на странице.
|
||||
|
||||
### Универсальное исправление для всех контейнеров
|
||||
|
||||
Вместо специальной обработки только для проблемных контейнеров, теперь применяется универсальное решение:
|
||||
|
||||
- **Универсальные CSS правила** для всех multi-view логов (с более специфичными селекторами)
|
||||
- **Единообразное исправление стилей** для всех контейнеров
|
||||
- **Проверка родительских элементов** для всех контейнеров
|
||||
- **Автоматическое исправление** в периодических проверках и при изменении размера окна
|
||||
- **Защита от влияния на другие элементы** - все селекторы теперь специфичны для `.multi-view-content .multi-view-log`
|
||||
|
||||
### Исправление проблемы с wrap text
|
||||
|
||||
Проблема с wrap text была решена путем:
|
||||
|
||||
- **Более специфичных селекторов** - изменил `.log` на `.main-content .log` в функции `applyWrapSettings()`
|
||||
- **Добавления вызовов `applyWrapSettings()`** в ключевых местах:
|
||||
- После обновления логов (`refreshLogsAndCounters()`)
|
||||
- После исправления стилей (`forceFixMultiViewStyles()`)
|
||||
- После исправления всех контейнеров (`fixAllContainers()`)
|
||||
- После переключения контейнеров (`switchToSingle()`)
|
||||
- После открытия мульти-контейнеров (`openMulti()`)
|
||||
- **Сохранения существующих вызовов** в `setupMultiView()` и других местах
|
||||
|
||||
## Автор
|
||||
Сергей Антропов
|
||||
Сайт: https://devops.org.ru
|
||||
Reference in New Issue
Block a user