feat: добавить сворачивание по умолчанию и кнопку минимизации всех секций
- Все секции теперь свернуты по умолчанию при первом запуске - Добавлена кнопка минимизации всех секций в заголовке сайдбара - Кнопка переключается между 'свернуть все' и 'развернуть все' - Сохранение состояния всех секций в localStorage - Улучшен дизайн заголовка сайдбара с flexbox - Добавлены hover эффекты для кнопки минимизации - Оптимизирован интерфейс для максимального пространства для списка контейнеров Автор: Сергей Антропов Сайт: https://devops.org.ru
This commit is contained in:
parent
6dfc2d0104
commit
5a5d98784a
@ -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">
|
||||||
|
<div class="header-top">
|
||||||
<h1><i class="fas fa-terminal"></i> LogBoard+</h1>
|
<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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user