154 lines
5.8 KiB
Markdown
154 lines
5.8 KiB
Markdown
# Исправления выделения сообщений
|
||
|
||
## Исправленные проблемы
|
||
|
||
### 1. ✅ Чекбоксы теперь внутри окна чата
|
||
|
||
**Было:** Чекбоксы рисовались за пределами окна (`left: -35px`)
|
||
|
||
**Стало:**
|
||
- Чекбоксы внутри сообщений (`left: 8px`, `right: 8px`)
|
||
- Добавлены отступы для сообщений в режиме выделения:
|
||
- Левые сообщения: `padding-left: 40px`
|
||
- Правые сообщения: `padding-right: 40px`
|
||
- Адаптивные размеры для мобильных
|
||
|
||
### 2. ✅ Убрано долгое нажатие мышью на десктопе
|
||
|
||
**Было:** Долгое нажатие (500мс) активировало режим выделения
|
||
|
||
**Стало:**
|
||
- Только для мобильных устройств (touchstart/touchend)
|
||
- На десктопе работает только через контекстное меню
|
||
|
||
### 3. ✅ Вход в режим через контекстное меню
|
||
|
||
**Механизм:**
|
||
1. Правый клик по сообщению → открывается контекстное меню
|
||
2. Клик на "Выбрать" → активируется режим выделения
|
||
3. Это сообщение автоматически выделяется
|
||
4. Остальные сообщения можно выделять левым кликом
|
||
|
||
**Реализация:**
|
||
- Добавлен обработчик `handleSelectAction()` в `messageContextMenu.js`
|
||
- Отправка события `message-context-menu` с action='select'
|
||
- Прием события в `messageSelection.js` и вызов `enterSelectionMode()`
|
||
|
||
## Изменённые файлы
|
||
|
||
### 1. `backend/static/css/message-selection.css`
|
||
|
||
```css
|
||
/* Основные изменения */
|
||
.selection-mode .msg {
|
||
padding-left: 40px !important; /* Место для чекбокса */
|
||
}
|
||
|
||
.msg-select-checkbox {
|
||
left: 8px; /* Внутри сообщения, было -35px */
|
||
}
|
||
|
||
.msg.justify-content-end .msg-select-checkbox {
|
||
right: 8px; /* Внутри сообщения, было -35px */
|
||
}
|
||
```
|
||
|
||
### 2. `backend/static/js/components/messageSelection.js`
|
||
|
||
**Удалено:**
|
||
- Обработчики `mousedown`, `mouseup`, `mousemove` для десктопа
|
||
- Таймер долгого нажатия мышью
|
||
|
||
**Оставлено:**
|
||
- Touch события для мобильных
|
||
- Обработчик события `message-context-menu`
|
||
- Метод `enterSelectionMode()` как публичный API
|
||
|
||
### 3. `backend/static/js/components/messageContextMenu.js`
|
||
|
||
**Добавлено:**
|
||
```javascript
|
||
case 'select':
|
||
this.handleSelectAction(messageId);
|
||
break;
|
||
|
||
handleSelectAction(messageId) {
|
||
const messageElement = document.querySelector(`[data-id="${messageId}"]`);
|
||
window.dispatchEvent(new CustomEvent('message-context-menu', {
|
||
detail: {
|
||
action: 'select',
|
||
messageId: messageId,
|
||
messageElement: messageElement
|
||
}
|
||
}));
|
||
}
|
||
```
|
||
|
||
## Как использовать
|
||
|
||
### На компьютере:
|
||
1. **Правый клик** по любому сообщению
|
||
2. В меню выбрать **"Выбрать"**
|
||
3. Сообщение выделится автоматически
|
||
4. **Левый клик** по другим сообщениям для выделения
|
||
5. Кнопки действий внизу экрана
|
||
|
||
### На телефоне:
|
||
1. **Долгое нажатие** (500мс) на сообщение
|
||
2. Или правый клик → "Выбрать"
|
||
3. Тап по другим сообщениям для выделения
|
||
4. Кнопки действий внизу экрана
|
||
|
||
## Визуальные улучшения
|
||
|
||
### Чекбоксы:
|
||
- ✅ Находятся внутри границ окна чата
|
||
- ✅ Не перекрывают содержимое сообщений
|
||
- ✅ Адаптивный размер (24px → 20px на мобильных)
|
||
- ✅ Правильное позиционирование для своих/чужих сообщений
|
||
|
||
### Режим выделения:
|
||
- ✅ Hover эффект на сообщениях
|
||
- ✅ Подсветка выделенных сообщений
|
||
- ✅ Синие чекбоксы с галочкой
|
||
- ✅ Счетчик выделенных сообщений
|
||
|
||
### Панель действий:
|
||
- ✅ Фиксированная позиция внизу
|
||
- ✅ Анимация появления
|
||
- ✅ Кнопки: Отмена, Удалить, Переслать
|
||
- ✅ Адаптивный дизайн
|
||
|
||
## Проверка
|
||
|
||
Обновите страницу и проверьте:
|
||
|
||
1. **Чекбоксы видны полностью**
|
||
- Не выходят за границы чата
|
||
- Не перекрывают текст сообщений
|
||
|
||
2. **Десктоп работает правильно**
|
||
- Нет реакции на долгое нажатие ЛКМ
|
||
- ПКМ → "Выбрать" → режим активируется
|
||
- ЛКМ выделяет/снимает выделение
|
||
|
||
3. **Мобильный работает правильно**
|
||
- Долгое нажатие активирует режим
|
||
- Вибрация при активации
|
||
- Тап выделяет/снимает выделение
|
||
|
||
## Совместимость
|
||
|
||
- ✅ Chrome/Edge/Opera
|
||
- ✅ Firefox
|
||
- ✅ Safari (desktop/mobile)
|
||
- ✅ Chrome Mobile
|
||
- ✅ Планшеты
|
||
|
||
## Производительность
|
||
|
||
- Минимальное использование DOM манипуляций
|
||
- Делегирование событий
|
||
- Оптимизированные CSS transitions
|
||
- Отсутствие утечек памяти (cleanup при выходе)
|