feat: добавить кнопку Options для скрытия всех настроек

- Добавлена кнопка Options (шестеренка) в заголовок сайдбара
- Кнопка полностью скрывает/показывает все секции настроек
- Сохранение состояния скрытия в localStorage
- Визуальная индикация активного состояния кнопки
- Максимальное освобождение места для списка контейнеров
- Улучшенный дизайн заголовка с группировкой кнопок
- Интуитивные подсказки для кнопок

Автор: Сергей Антропов
Сайт: https://devops.org.ru
This commit is contained in:
Сергей Антропов 2025-08-16 13:01:04 +03:00
parent 277e88faac
commit 0af84ce0c3

View File

@ -53,6 +53,12 @@ a{color:var(--link)}
margin-bottom: 8px;
}
.header-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.sidebar-header h1 {
font-size: 18px;
margin: 0;
@ -66,6 +72,7 @@ a{color:var(--link)}
margin: 0;
}
.options-btn,
.minimize-all-btn {
background: var(--chip);
border: 1px solid var(--border);
@ -79,12 +86,20 @@ a{color:var(--link)}
justify-content: center;
}
.options-btn:hover,
.minimize-all-btn:hover {
background: var(--tab-active);
color: var(--fg);
border-color: var(--accent);
}
.options-btn.active {
background: var(--accent);
color: #0b0d12;
border-color: var(--accent);
}
.options-btn i,
.minimize-all-btn i {
font-size: 12px;
}
@ -194,6 +209,11 @@ a{color:var(--link)}
display: none;
}
/* Скрытие всех секций при активной кнопке Options */
.sidebar-controls.hidden {
display: none;
}
.control-group label {
display: block;
font-size: 11px;
@ -563,9 +583,14 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
<div class="sidebar-header">
<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 class="header-buttons">
<button class="options-btn" id="optionsBtn" title="Показать/скрыть настройки">
<i class="fas fa-cog"></i>
</button>
<button class="minimize-all-btn" id="minimizeAllBtn" title="Свернуть все секции">
<i class="fas fa-compress-alt"></i>
</button>
</div>
</div>
<p class="subtitle">Modern Log Viewer</p>
</div>
@ -781,6 +806,7 @@ const els = {
logContent: document.getElementById('logContent'),
mobileToggle: document.getElementById('mobileToggle'),
minimizeAllBtn: document.getElementById('minimizeAllBtn'),
optionsBtn: document.getElementById('optionsBtn'),
};
// ----- Theme toggle -----
@ -1463,6 +1489,36 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// Обработчик для кнопки Options
if (els.optionsBtn) {
els.optionsBtn.addEventListener('click', () => {
const sidebarControls = document.querySelector('.sidebar-controls');
const isHidden = sidebarControls.classList.contains('hidden');
if (isHidden) {
// Показываем настройки
sidebarControls.classList.remove('hidden');
els.optionsBtn.classList.remove('active');
els.optionsBtn.title = 'Скрыть настройки';
localStorage.setItem('lb_options_hidden', 'false');
} else {
// Скрываем настройки
sidebarControls.classList.add('hidden');
els.optionsBtn.classList.add('active');
els.optionsBtn.title = 'Показать настройки';
localStorage.setItem('lb_options_hidden', 'true');
}
});
// Восстанавливаем состояние кнопки Options
const optionsHidden = localStorage.getItem('lb_options_hidden') === 'true';
if (optionsHidden) {
document.querySelector('.sidebar-controls').classList.add('hidden');
els.optionsBtn.classList.add('active');
els.optionsBtn.title = 'Показать настройки';
}
}
// Обработчик для кнопки минимизации всех секций
if (els.minimizeAllBtn) {
els.minimizeAllBtn.addEventListener('click', () => {