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
This commit is contained in:
196
REFRESH_BUTTON_VISIBILITY.md
Normal file
196
REFRESH_BUTTON_VISIBILITY.md
Normal file
@@ -0,0 +1,196 @@
|
||||
# Управление кнопками Refresh и Update
|
||||
|
||||
## Описание изменений
|
||||
|
||||
Реализована функциональность автоматического управления кнопками "Refresh" и "Update" в header в зависимости от состояния AJAX autoupdate.
|
||||
|
||||
### Основные изменения:
|
||||
1. **AJAX autoupdate по умолчанию включен** - изменено значение `ajaxUpdateEnabled` с `false` на `true`
|
||||
2. **Добавлена кнопка Update** - новая кнопка справа от кнопки WebSocket состояния
|
||||
3. **Улучшено управление кнопками** - кнопка refresh скрывается, кнопка update показывает состояние
|
||||
|
||||
## Логика работы
|
||||
|
||||
### Кнопка Refresh
|
||||
- **AJAX autoupdate включен** → Кнопка refresh **скрыта**
|
||||
- **AJAX autoupdate выключен** → Кнопка refresh **показана**
|
||||
|
||||
### Кнопка Update
|
||||
- **AJAX autoupdate включен** → Кнопка update **зеленая**
|
||||
- **AJAX autoupdate выключен** → Кнопка update **красная**
|
||||
- **Клик по кнопке** → Переключает состояние AJAX autoupdate
|
||||
|
||||
## Реализованные функции
|
||||
|
||||
### updateRefreshButtonVisibility()
|
||||
Основная функция для управления видимостью кнопки refresh и состоянием кнопки update:
|
||||
|
||||
```javascript
|
||||
function updateRefreshButtonVisibility() {
|
||||
const refreshButtons = document.querySelectorAll('.log-refresh-btn');
|
||||
refreshButtons.forEach(btn => {
|
||||
if (ajaxUpdateEnabled) {
|
||||
// Если ajax autoupdate включен, скрываем кнопку refresh
|
||||
btn.style.display = 'none';
|
||||
} else {
|
||||
// Если ajax autoupdate выключен, показываем кнопку refresh
|
||||
btn.style.display = 'inline-flex';
|
||||
}
|
||||
});
|
||||
|
||||
// Обновляем состояние кнопки update
|
||||
setAjaxUpdateState(ajaxUpdateEnabled);
|
||||
}
|
||||
```
|
||||
|
||||
### setAjaxUpdateState(enabled)
|
||||
Функция для управления визуальным состоянием кнопки update:
|
||||
|
||||
```javascript
|
||||
function setAjaxUpdateState(enabled) {
|
||||
if (els.ajaxUpdateBtn) {
|
||||
// Удаляем все классы состояний
|
||||
els.ajaxUpdateBtn.classList.remove('ajax-on', 'ajax-off');
|
||||
|
||||
// Добавляем соответствующий класс
|
||||
if (enabled) {
|
||||
els.ajaxUpdateBtn.classList.add('ajax-on');
|
||||
els.ajaxUpdateBtn.textContent = 'update';
|
||||
} else {
|
||||
els.ajaxUpdateBtn.classList.add('ajax-off');
|
||||
els.ajaxUpdateBtn.textContent = 'update';
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Интеграция с существующим кодом
|
||||
|
||||
Функция `updateRefreshButtonVisibility()` вызывается в следующих местах:
|
||||
|
||||
1. **updateAjaxUpdateCheckbox()** - при обновлении состояния чекбокса
|
||||
2. **enableAjaxLogUpdate()** - при включении AJAX обновления
|
||||
3. **disableAjaxLogUpdate()** - при выключении AJAX обновления
|
||||
4. **toggleAjaxLogUpdate()** - при переключении состояния
|
||||
5. **initAjaxUpdateCheckbox()** - при инициализации чекбокса
|
||||
6. **initAjaxUpdate()** - при инициализации AJAX update
|
||||
7. **Обработчик изменения чекбокса** - при изменении состояния пользователем
|
||||
|
||||
## CSS стили
|
||||
|
||||
### Кнопка Refresh
|
||||
Кнопка refresh использует класс `.log-refresh-btn` и стили:
|
||||
|
||||
```css
|
||||
.log-refresh-btn {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### Кнопка Update
|
||||
Кнопка update использует класс `.ajax-update-btn` и стили:
|
||||
|
||||
```css
|
||||
.ajax-update-btn {
|
||||
background: var(--chip);
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ajax-update-btn.ajax-on {
|
||||
background: #7ea855; /* Зеленый цвет */
|
||||
color: white;
|
||||
border-color: #7ea855;
|
||||
}
|
||||
|
||||
.ajax-update-btn.ajax-off {
|
||||
background: #f7768e; /* Красный цвет */
|
||||
color: white;
|
||||
border-color: #f7768e;
|
||||
}
|
||||
|
||||
.ajax-update-btn:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
```
|
||||
|
||||
## HTML структура
|
||||
|
||||
### Кнопка Refresh
|
||||
Кнопка refresh находится в header:
|
||||
|
||||
```html
|
||||
<button class="btn btn-small log-refresh-btn" title="Обновить логи и счетчики">
|
||||
<i class="fas fa-sync-alt"></i> Refresh
|
||||
</button>
|
||||
```
|
||||
|
||||
### Кнопка Update
|
||||
Кнопка update находится в header справа от кнопки WebSocket состояния:
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
## Автоматическое обновление видимости
|
||||
|
||||
Видимость кнопки refresh автоматически обновляется в следующих случаях:
|
||||
|
||||
1. **При инициализации AJAX update** - устанавливается начальное состояние
|
||||
2. **При изменении состояния чекбокса "Auto-update logs"** - пользователь включает/выключает autoupdate
|
||||
3. **При программном включении/выключении AJAX update** - через функции enable/disable
|
||||
4. **При переключении состояния через функцию toggleAjaxLogUpdate** - программное переключение
|
||||
|
||||
## Преимущества реализации
|
||||
|
||||
1. **Улучшенный UX** - пользователь видит только актуальные элементы управления
|
||||
2. **Логическая связность** - кнопка refresh скрыта, когда она не нужна (при включенном autoupdate)
|
||||
3. **Автоматическое управление** - не требует ручного вмешательства пользователя
|
||||
4. **Совместимость** - работает с существующим кодом без нарушений
|
||||
|
||||
## Тестирование
|
||||
|
||||
Для тестирования функциональности:
|
||||
|
||||
1. Откройте приложение в браузере
|
||||
2. Проверьте, что при включенном чекбоксе "Auto-update logs" кнопка refresh скрыта
|
||||
3. Отключите чекбокс "Auto-update logs" - кнопка refresh должна появиться
|
||||
4. Включите чекбокс обратно - кнопка refresh должна скрыться
|
||||
|
||||
## Автор
|
||||
|
||||
Сергей Антропов
|
||||
Сайт: https://devops.org.ru
|
||||
|
||||
## Дата реализации
|
||||
|
||||
2024 год
|
||||
Reference in New Issue
Block a user