feat: добавить сворачивание по умолчанию и кнопку минимизации всех секций

- Все секции теперь свернуты по умолчанию при первом запуске
- Добавлена кнопка минимизации всех секций в заголовке сайдбара
- Кнопка переключается между 'свернуть все' и 'развернуть все'
- Сохранение состояния всех секций в localStorage
- Улучшен дизайн заголовка сайдбара с flexbox
- Добавлены hover эффекты для кнопки минимизации
- Оптимизирован интерфейс для максимального пространства для списка контейнеров

Автор: Сергей Антропов
Сайт: https://devops.org.ru
This commit is contained in:
Сергей Антропов 2025-08-16 12:56:19 +03:00
parent 6dfc2d0104
commit 5a5d98784a

View File

@ -46,9 +46,16 @@ a{color:var(--link)}
background: var(--panel); background: var(--panel);
} }
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.sidebar-header h1 { .sidebar-header h1 {
font-size: 18px; font-size: 18px;
margin: 0 0 8px 0; margin: 0;
color: var(--accent); color: var(--accent);
font-weight: 600; font-weight: 600;
} }
@ -59,6 +66,29 @@ a{color:var(--link)}
margin: 0; margin: 0;
} }
.minimize-all-btn {
background: var(--chip);
border: 1px solid var(--border);
color: var(--muted);
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.minimize-all-btn:hover {
background: var(--tab-active);
color: var(--fg);
border-color: var(--accent);
}
.minimize-all-btn i {
font-size: 12px;
}
/* Sidebar Controls */ /* Sidebar Controls */
.sidebar-controls { .sidebar-controls {
padding: 16px; padding: 16px;
@ -511,7 +541,12 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<h1><i class="fas fa-terminal"></i> LogBoard+</h1> <div class="header-top">
<h1><i class="fas fa-terminal"></i> LogBoard+</h1>
<button class="minimize-all-btn" id="minimizeAllBtn" title="Свернуть все секции">
<i class="fas fa-compress-alt"></i>
</button>
</div>
<p class="subtitle">Modern Log Viewer</p> <p class="subtitle">Modern Log Viewer</p>
</div> </div>
@ -725,6 +760,7 @@ const els = {
logTitle: document.getElementById('logTitle'), logTitle: document.getElementById('logTitle'),
logContent: document.getElementById('logContent'), logContent: document.getElementById('logContent'),
mobileToggle: document.getElementById('mobileToggle'), mobileToggle: document.getElementById('mobileToggle'),
minimizeAllBtn: document.getElementById('minimizeAllBtn'),
}; };
// ----- Theme toggle ----- // ----- Theme toggle -----
@ -1367,14 +1403,47 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
}); });
// Восстанавливаем состояние секций из localStorage // Восстанавливаем состояние секций из localStorage или сворачиваем по умолчанию
document.querySelectorAll('.control-group.collapsible').forEach(group => { document.querySelectorAll('.control-group.collapsible').forEach(group => {
const section = group.dataset.section; const section = group.dataset.section;
const isCollapsed = localStorage.getItem(`lb_collapsed_${section}`) === 'true'; const savedState = localStorage.getItem(`lb_collapsed_${section}`);
if (isCollapsed) {
// Если состояние не сохранено, сворачиваем по умолчанию
if (savedState === null) {
group.classList.add('collapsed');
localStorage.setItem(`lb_collapsed_${section}`, 'true');
} else if (savedState === 'true') {
group.classList.add('collapsed'); group.classList.add('collapsed');
} }
}); });
// Обработчик для кнопки минимизации всех секций
if (els.minimizeAllBtn) {
els.minimizeAllBtn.addEventListener('click', () => {
const allCollapsed = document.querySelectorAll('.control-group.collapsible').length ===
document.querySelectorAll('.control-group.collapsible.collapsed').length;
// Если все секции свернуты, разворачиваем их
if (allCollapsed) {
document.querySelectorAll('.control-group.collapsible').forEach(group => {
group.classList.remove('collapsed');
const section = group.dataset.section;
localStorage.setItem(`lb_collapsed_${section}`, 'false');
});
els.minimizeAllBtn.innerHTML = '<i class="fas fa-compress-alt"></i>';
els.minimizeAllBtn.title = 'Свернуть все секции';
} else {
// Иначе сворачиваем все секции
document.querySelectorAll('.control-group.collapsible').forEach(group => {
group.classList.add('collapsed');
const section = group.dataset.section;
localStorage.setItem(`lb_collapsed_${section}`, 'true');
});
els.minimizeAllBtn.innerHTML = '<i class="fas fa-expand-alt"></i>';
els.minimizeAllBtn.title = 'Развернуть все секции';
}
});
}
}); });
els.snapshotBtn.onclick = ()=>{ els.snapshotBtn.onclick = ()=>{
if (state.current) { if (state.current) {