dev
62239a35a4
Карточка треда была вложенными <button>, поэтому кнопки действий внутри неё ломали HTML-структуру. Заменена на <div role="button" tabindex="0"> с обработкой Enter/Space; классы действий переименованы в chat-thread-act / chat-thread-act-danger, чтобы не путаться с .chat-act. Также ужата шапка списка диалогов: заголовок не сжимается, кнопки не переносятся, подпись у кнопки скрытых заменена на бейдж.
103 lines
5.1 KiB
HTML
103 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Чаты — Админ-панель</title>
|
|
<link rel="stylesheet" href="admin.css">
|
|
</head>
|
|
<body data-page="chat">
|
|
<div class="layout">
|
|
<div class="sidebar" id="sidebar"></div>
|
|
<div class="main">
|
|
<div class="page-head">
|
|
<h2>Чаты</h2>
|
|
<p class="page-sub">Переписка тьюторов с администратором: сообщения, фотографии и документы</p>
|
|
<span class="page-status" id="authStatus"><span class="spinner dark"></span> Загрузка…</span>
|
|
<button class="head-btn" id="chatReloadBtn" type="button" title="Обновить диалоги"><i data-lucide="rotate-ccw"></i> Обновить</button>
|
|
</div>
|
|
|
|
<div class="chat-layout" id="chatLayout">
|
|
<div class="chat-side" id="chatSide">
|
|
<div class="chat-side-head">
|
|
<span class="chat-side-title">Диалоги</span>
|
|
<span class="grow"></span>
|
|
<button class="btn-primary ghost chat-side-toggle" id="chatHiddenBtn" type="button" hidden title="Показать скрытые диалоги"><i data-lucide="archive"></i><span class="chat-hidden-count" id="chatHiddenCount" hidden></span></button>
|
|
<button class="btn-primary ghost chat-new-btn" id="chatNewBtn" type="button" hidden title="Начать диалог с тьютором"><i data-lucide="user-plus"></i> Начать диалог</button>
|
|
</div>
|
|
<div class="chat-side-hint" id="chatHiddenHint" hidden>Скрытые диалоги. Новое сообщение от тьютора вернёт диалог в список.</div>
|
|
<div class="chat-thread-list" id="chatThreadList"></div>
|
|
</div>
|
|
|
|
<div class="chat-pane" id="chatPane">
|
|
<div class="chat-empty" id="chatEmpty">
|
|
<i data-lucide="messages-square"></i>
|
|
<p class="chat-empty-title">Диалог не выбран</p>
|
|
<p class="chat-empty-sub">Выберите тьютора слева или начните новый диалог</p>
|
|
</div>
|
|
|
|
<div class="chat-main" id="chatMain" hidden>
|
|
<div class="chat-head">
|
|
<span class="chat-avatar" id="chatAvatar"></span>
|
|
<div class="chat-head-meta">
|
|
<div class="chat-head-name" id="chatPeerName"></div>
|
|
<div class="chat-head-sub" id="chatPeerSub"></div>
|
|
</div>
|
|
<span class="grow"></span>
|
|
</div>
|
|
|
|
<div class="chat-messages" id="chatMessages"></div>
|
|
|
|
<div class="chat-composer">
|
|
<div class="chat-attach-list" id="chatAttachList" hidden></div>
|
|
<div class="chat-compose-row">
|
|
<button class="chat-attach-btn" id="chatAttachBtn" type="button" title="Прикрепить файл или фото"><i data-lucide="paperclip"></i></button>
|
|
<input type="file" id="chatFileInput" multiple hidden>
|
|
<textarea class="chat-input" id="chatInput" rows="1" placeholder="Сообщение… (Ctrl+V — вставить фото)" maxlength="5000"></textarea>
|
|
<button class="btn-primary" id="chatSendBtn" type="button"><i data-lucide="send"></i> Отправить</button>
|
|
</div>
|
|
<div class="hint chat-hint" id="chatHint">Можно вставить скриншот или фото прямо из буфера обмена — Ctrl+V. Фото, документы и архивы, до 10 штук.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="chatNewModal">
|
|
<div class="edit-modal chat-new-modal">
|
|
<h3>Начать диалог</h3>
|
|
<div class="settings-field">
|
|
<label>Тьютор</label>
|
|
<select id="chatNewUser" class="settings-input"></select>
|
|
</div>
|
|
<div class="card-foot" style="justify-content:flex-end;gap:8px">
|
|
<button type="button" class="btn-primary ghost" id="chatNewCancel">Отмена</button>
|
|
<button type="submit" class="btn-primary" id="chatNewOk">Открыть диалог</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="chatEditModal">
|
|
<div class="edit-modal chat-edit-modal">
|
|
<h3>Редактировать сообщение</h3>
|
|
<textarea id="chatEditText" class="settings-input" maxlength="5000"></textarea>
|
|
<div class="hint">Ctrl+Enter — сохранить. Вложения сообщения останутся как есть.</div>
|
|
<div class="card-foot" style="justify-content:flex-end;gap:8px">
|
|
<button type="button" class="btn-primary ghost" id="chatEditCancel">Отмена</button>
|
|
<button type="submit" class="btn-primary" id="chatEditSave">Сохранить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="imgModal">
|
|
<img id="imgModalSrc">
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<script src="vendor/lucide.min.js"></script>
|
|
<script src="js/datetime.js"></script>
|
|
<script src="admin.js"></script>
|
|
<script src="js/chat.js"></script>
|
|
</body>
|
|
</html> |