Sergey Antropoff 749b40a494 feat: улучшения UI/UX LogBoard+

- Добавлена кнопка Update для управления AJAX auto-update
- AJAX auto-update включен по умолчанию
- Улучшено управление видимостью кнопки Refresh
- Переупорядочены кнопки в header (Update, Refresh)
- Унифицированы стили кнопок (высота, шрифт, границы)
- Добавлен hover эффект для кнопки options с цветом warning
- Позиционирование help-btn в свернутом sidebar
- Уменьшена ширина свернутого sidebar на 30%
- Добавлена логика разворачивания sidebar при клике на options
- Отображение внешнего порта в статусе контейнера
- Показ 'standalone' для контейнеров без проекта
- Обновлена документация

Автор: Сергей Антропов
Сайт: https://devops.org.ru

2025-08-18 20:32:46 +03:00

3.7 KiB

Raw Blame History

Изменение порядка кнопок в Header

Описание изменений

Изменен порядок кнопок в header для улучшения логической группировки элементов управления.

Новый порядок кнопок

До изменений:

Счетчики логов (DEBUG, INFO, WARN, ERROR, OTHER)
Кнопка Refresh
Переключатель темы (Theme)
Кнопка WebSocket состояния (ws: off)
Кнопка Update

После изменений:

Счетчики логов (DEBUG, INFO, WARN, ERROR, OTHER)
Переключатель темы (Theme)
Кнопка WebSocket состояния (ws: off)
Кнопка Update
Кнопка Refresh

Логика нового порядка

Группировка по функциональности:

Счетчики логов - отображение статистики
Настройки интерфейса - переключатель темы
Состояние соединений - WebSocket и AJAX update
Управление обновлением - кнопки update и refresh

Преимущества нового порядка:

Логическая группировка - связанные элементы находятся рядом
Улучшенный UX - пользователь интуитивно понимает назначение кнопок
Последовательность действий - сначала управление состоянием, потом ручное обновление

HTML структура

<div class="header-controls">
  <div class="header-compact-controls">
    <!-- Счетчики логов -->
    <button class="counter-btn debug-btn" title="DEBUG">...</button>
    <button class="counter-btn info-btn" title="INFO">...</button>
    <button class="counter-btn warn-btn" title="WARN">...</button>
    <button class="counter-btn error-btn" title="ERROR">...</button>
    <button class="counter-btn other-btn" title="OTHER">...</button>
  </div>
  
  <!-- Настройки интерфейса -->
  <div class="theme-toggle">
    <span>Theme</span>
    <input id="themeSwitch" type="checkbox" />
  </div>
  
  <!-- Состояние соединений -->
  <button id="wsstate" class="ws-status-btn">ws: off</button>
  <button id="ajaxUpdateBtn" class="ajax-update-btn" title="AJAX Auto-update">update</button>
  
  <!-- Управление обновлением -->
  <button class="btn btn-small log-refresh-btn" title="Обновить логи и счетчики">
    <i class="fas fa-sync-alt"></i> Refresh
  </button>
</div>

Визуальное представление

Header layout:

[DEBUG: 0] [INFO: 0] [WARN: 0] [ERROR: 0] [OTHER: 0] | Theme [☐] | ws: off | update | Refresh

Логические группы:

Счетчики: [DEBUG: 0] [INFO: 0] [WARN: 0] [ERROR: 0] [OTHER: 0]
Настройки: Theme [☐]
Состояние: ws: off | update
Управление: Refresh

Совместимость

Изменение порядка кнопок не влияет на:

Функциональность кнопок
JavaScript обработчики
CSS стили
Логику показа/скрытия кнопок

Все существующие функции продолжают работать без изменений.

Автор

Сергей Антропов
Сайт: https://devops.org.ru

Дата реализации

2024 год

3.7 KiB Raw Blame History Unescape Escape