From 36eef6a08d69504a1b8098cfafc604950d986368 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9=20=D0=90=D0=BD=D1=82?= =?UTF-8?q?=D1=80=D0=BE=D0=BF=D0=BE=D0=B2?= Date: Sat, 16 Aug 2025 13:05:32 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D0=B2?= =?UTF-8?q?=D1=8B=D1=85=D0=BE=D0=B4=D0=B0=20=D0=B8=20=D1=83=D0=BB=D1=83?= =?UTF-8?q?=D1=87=D1=88=D0=B8=D1=82=D1=8C=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80?= =?UTF-8?q?=D1=84=D0=B5=D0=B9=D1=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Добавлена кнопка выхода (sign-out-alt) в заголовок сайдбара - Цветовая индикация состояния WebSocket: зеленый (on), красный (off), желтый (err) - Удалена кнопка минимизации, оставлена только кнопка Options - Кнопка Options по умолчанию свернута (настройки скрыты) - Добавлено подтверждение при выходе - Очистка localStorage при выходе - Улучшенный дизайн кнопок с hover эффектами - Максимальное пространство для списка контейнеров по умолчанию Автор: Сергей Антропов Сайт: https://devops.org.ru --- templates/index.html | 95 ++++++++++++++++++++++++++------------------ 1 file changed, 57 insertions(+), 38 deletions(-) diff --git a/templates/index.html b/templates/index.html index ca08f0d..3fd3139 100644 --- a/templates/index.html +++ b/templates/index.html @@ -73,7 +73,7 @@ a{color:var(--link)} } .options-btn, -.minimize-all-btn { +.logout-btn { background: var(--chip); border: 1px solid var(--border); color: var(--muted); @@ -87,7 +87,7 @@ a{color:var(--link)} } .options-btn:hover, -.minimize-all-btn:hover { +.logout-btn:hover { background: var(--tab-active); color: var(--fg); border-color: var(--accent); @@ -99,11 +99,33 @@ a{color:var(--link)} border-color: var(--accent); } +.logout-btn:hover { + background: var(--err); + color: #fff; + border-color: var(--err); +} + .options-btn i, -.minimize-all-btn i { +.logout-btn i { font-size: 12px; } +/* Цвета для ws состояния */ +#wsstate.ws-on { + color: var(--ok); + font-weight: 500; +} + +#wsstate.ws-off { + color: var(--err); + font-weight: 500; +} + +#wsstate.ws-err { + color: var(--warn); + font-weight: 500; +} + /* Sidebar Controls */ .sidebar-controls { padding: 16px; @@ -587,8 +609,8 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px} - @@ -805,8 +827,8 @@ const els = { logTitle: document.getElementById('logTitle'), logContent: document.getElementById('logContent'), mobileToggle: document.getElementById('mobileToggle'), - minimizeAllBtn: document.getElementById('minimizeAllBtn'), optionsBtn: document.getElementById('optionsBtn'), + logoutBtn: document.getElementById('logoutBtn'), }; // ----- Theme toggle ----- @@ -821,7 +843,21 @@ const els = { }); })(); -function setWsState(s){ els.wsstate.textContent = 'ws: ' + s; } +function setWsState(s){ + els.wsstate.textContent = 'ws: ' + s; + + // Удаляем все классы состояний + els.wsstate.classList.remove('ws-on', 'ws-off', 'ws-err'); + + // Добавляем соответствующий класс + if (s === 'on') { + els.wsstate.classList.add('ws-on'); + } else if (s === 'off') { + els.wsstate.classList.add('ws-off'); + } else if (s === 'err') { + els.wsstate.classList.add('ws-err'); + } +} // Функция для обновления всех логов при изменении фильтров function refreshAllLogs() { @@ -1510,46 +1546,29 @@ document.addEventListener('DOMContentLoaded', () => { } }); - // Восстанавливаем состояние кнопки Options - const optionsHidden = localStorage.getItem('lb_options_hidden') === 'true'; - if (optionsHidden) { + // Восстанавливаем состояние кнопки Options (по умолчанию скрыто) + const optionsHidden = localStorage.getItem('lb_options_hidden'); + if (optionsHidden === null || optionsHidden === 'true') { document.querySelector('.sidebar-controls').classList.add('hidden'); els.optionsBtn.classList.add('active'); els.optionsBtn.title = 'Показать настройки'; + localStorage.setItem('lb_options_hidden', 'true'); } } - // Обработчик для кнопки минимизации всех секций - if (els.minimizeAllBtn) { - els.minimizeAllBtn.addEventListener('click', () => { - const allMinimized = document.querySelectorAll('.control-group.collapsible').length === - document.querySelectorAll('.control-group.collapsible.minimized').length; - - // Если все секции минимизированы, разворачиваем их - if (allMinimized) { - document.querySelectorAll('.control-group.collapsible').forEach(group => { - group.classList.remove('minimized'); - group.classList.add('collapsed'); // Возвращаем к обычному свернутому состоянию - const section = group.dataset.section; - localStorage.setItem(`lb_collapsed_${section}`, 'true'); - localStorage.setItem(`lb_minimized_${section}`, 'false'); - }); - els.minimizeAllBtn.innerHTML = ''; - els.minimizeAllBtn.title = 'Минимизировать все секции'; - } else { - // Иначе минимизируем все секции до полоски - document.querySelectorAll('.control-group.collapsible').forEach(group => { - group.classList.add('minimized'); - group.classList.remove('collapsed'); - const section = group.dataset.section; - localStorage.setItem(`lb_collapsed_${section}`, 'false'); - localStorage.setItem(`lb_minimized_${section}`, 'true'); - }); - els.minimizeAllBtn.innerHTML = ''; - els.minimizeAllBtn.title = 'Развернуть все секции'; + // Обработчик для кнопки выхода + if (els.logoutBtn) { + els.logoutBtn.addEventListener('click', () => { + if (confirm('Вы уверены, что хотите выйти?')) { + // Очищаем localStorage + localStorage.clear(); + // Перенаправляем на страницу входа + window.location.href = '/'; } }); } + + }); els.snapshotBtn.onclick = ()=>{ if (state.current) {