UI: улучшить личные сообщения и поиск контактов
This commit is contained in:
AidarKC
parent
65fad993ad
commit
86eaf2139d
@ -1,2 +1,2 @@
|
||||
client.version=1.2.221
|
||||
server.version=1.2.209
|
||||
client.version=1.2.222
|
||||
server.version=1.2.210
|
||||
|
||||
@ -71,7 +71,7 @@ function openMessageActionsMenu({
|
||||
const menuId = `chat-message-actions-menu-${Date.now()}`;
|
||||
root.innerHTML = `
|
||||
<div class="dm-floating-menu-layer" id="chat-message-actions-layer">
|
||||
<div class="modal-card stack dm-dialog-card dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
|
||||
<div class="modal-card stack dm-message-actions-menu dm-message-actions-popover" id="${menuId}">
|
||||
<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-copy">Скопировать как текст</button>
|
||||
<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-read">Прочесть</button>
|
||||
${canEdit ? '<button class="secondary-btn dm-message-action-btn" type="button" id="msg-action-edit">Изменить</button>' : ''}
|
||||
@ -579,6 +579,10 @@ export function render({ navigate, route }) {
|
||||
}
|
||||
|
||||
renderLog(log, chatId, { onOpenActions: handleOpenActions });
|
||||
scrollToLatestMessage(log);
|
||||
window.requestAnimationFrame(() => scrollToLatestMessage(log));
|
||||
window.setTimeout(() => scrollToLatestMessage(log), 90);
|
||||
window.setTimeout(() => scrollToLatestMessage(log), 220);
|
||||
addAppLogEntry({
|
||||
level: 'info',
|
||||
source: 'outgoing-dm',
|
||||
|
||||
@ -61,9 +61,11 @@ function createSearchAvatar(login) {
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack dm-screen dm-search-screen';
|
||||
let searchTimer = 0;
|
||||
let searchSeq = 0;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.className = 'input dm-input';
|
||||
input.className = 'input dm-input contact-search-input';
|
||||
input.type = 'text';
|
||||
input.name = 'contact';
|
||||
input.placeholder = 'Введите начало логина';
|
||||
@ -71,26 +73,28 @@ export function render({ navigate }) {
|
||||
input.maxLength = 80;
|
||||
|
||||
const resultsCard = document.createElement('section');
|
||||
resultsCard.className = 'card stack dm-dialog-card';
|
||||
resultsCard.className = 'card stack contact-search-results-card';
|
||||
resultsCard.hidden = true;
|
||||
|
||||
const status = document.createElement('p');
|
||||
status.className = 'meta-muted';
|
||||
status.className = 'contact-search-results-title';
|
||||
|
||||
const resultsList = document.createElement('div');
|
||||
resultsList.className = 'stack dm-list';
|
||||
|
||||
const renderResults = (matches, query) => {
|
||||
resultsList.innerHTML = '';
|
||||
resultsCard.hidden = false;
|
||||
|
||||
if (!query.trim()) {
|
||||
status.textContent = 'Введите начало логина пользователя.';
|
||||
status.textContent = '';
|
||||
resultsCard.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
resultsCard.hidden = false;
|
||||
|
||||
if (!matches.length) {
|
||||
status.textContent = 'Совпадений не найдено.';
|
||||
status.textContent = 'Найдено пользователей: 0';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -101,11 +105,10 @@ export function render({ navigate }) {
|
||||
row.className = 'list-item dm-dialog-card';
|
||||
const avatarEl = createSearchAvatar(login);
|
||||
row.innerHTML = `
|
||||
<div>
|
||||
<strong>${login}</strong>
|
||||
<p class="meta-muted" style="margin-top:4px;">Пользователь сервера</p>
|
||||
<div class="contact-search-result-main">
|
||||
<strong class="dm-row-title">${login}</strong>
|
||||
</div>
|
||||
<div class="meta-muted">Профиль</div>
|
||||
<span class="dm-chevron" aria-hidden="true">›</span>
|
||||
`;
|
||||
row.prepend(avatarEl);
|
||||
row.addEventListener('click', () => {
|
||||
@ -115,12 +118,9 @@ export function render({ navigate }) {
|
||||
});
|
||||
};
|
||||
|
||||
const searchButton = document.createElement('button');
|
||||
searchButton.className = 'primary-btn dm-send-btn';
|
||||
searchButton.type = 'button';
|
||||
searchButton.textContent = 'Поиск';
|
||||
searchButton.addEventListener('click', async () => {
|
||||
const runSearch = async () => {
|
||||
const query = input.value.trim();
|
||||
const seq = ++searchSeq;
|
||||
if (!query) {
|
||||
renderResults([], '');
|
||||
return;
|
||||
@ -128,11 +128,38 @@ export function render({ navigate }) {
|
||||
|
||||
try {
|
||||
const logins = await authService.searchUsers(query);
|
||||
if (seq !== searchSeq) return;
|
||||
renderResults((logins || []).slice(0, 5), query);
|
||||
} catch (e) {
|
||||
if (seq !== searchSeq) return;
|
||||
status.textContent = `Ошибка поиска: ${e.message || 'unknown'}`;
|
||||
resultsCard.hidden = false;
|
||||
resultsList.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleSearch = () => {
|
||||
if (searchTimer) window.clearTimeout(searchTimer);
|
||||
searchTimer = window.setTimeout(() => {
|
||||
searchTimer = 0;
|
||||
void runSearch();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const searchButton = document.createElement('button');
|
||||
searchButton.className = 'primary-btn dm-send-btn';
|
||||
searchButton.type = 'button';
|
||||
searchButton.textContent = 'Поиск';
|
||||
searchButton.addEventListener('click', async () => {
|
||||
if (searchTimer) {
|
||||
window.clearTimeout(searchTimer);
|
||||
searchTimer = 0;
|
||||
}
|
||||
await runSearch();
|
||||
});
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
scheduleSearch();
|
||||
});
|
||||
|
||||
const controls = document.createElement('div');
|
||||
@ -140,7 +167,7 @@ export function render({ navigate }) {
|
||||
controls.append(searchButton);
|
||||
|
||||
const formCard = document.createElement('section');
|
||||
formCard.className = 'card stack dm-dialog-card';
|
||||
formCard.className = 'card stack contact-search-form-card';
|
||||
formCard.append(input, controls);
|
||||
|
||||
resultsCard.append(status, resultsList);
|
||||
@ -154,5 +181,9 @@ export function render({ navigate }) {
|
||||
resultsCard,
|
||||
);
|
||||
|
||||
screen.cleanup = () => {
|
||||
if (searchTimer) window.clearTimeout(searchTimer);
|
||||
};
|
||||
|
||||
return screen;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { renderHeader } from '../components/header.js';
|
||||
import { directMessages } from '../mock-data.js';
|
||||
import {
|
||||
getChatMessages,
|
||||
@ -66,7 +65,7 @@ function createDmAvatar(login) {
|
||||
|
||||
function formatChatRowTime(ts) {
|
||||
const value = Number(ts || 0);
|
||||
if (!Number.isFinite(value) || value <= 0) return '-';
|
||||
if (!Number.isFinite(value) || value <= 0) return '';
|
||||
return new Intl.DateTimeFormat('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
@ -75,17 +74,29 @@ function formatChatRowTime(ts) {
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
const SVG_CHEVRON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>';
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack dm-screen dm-list-screen';
|
||||
const login = String(state.session.login || '').trim();
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Личные сообщения',
|
||||
leftLabel: String(state.session.login || '').trim(),
|
||||
rightActions: [{ label: '+', onClick: () => navigate('contact-search-view') }],
|
||||
}),
|
||||
);
|
||||
const head = document.createElement('header');
|
||||
head.className = 'dm-head';
|
||||
head.innerHTML = `
|
||||
<div class="dm-head-brand">
|
||||
<div class="dm-head-hex">${(login[0] || 'A').toUpperCase()}</div>
|
||||
<div class="dm-head-id">
|
||||
<span class="dm-head-name">${login}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="dm-head-title">Контакты</h1>
|
||||
<button type="button" class="dm-head-plus" aria-label="Новый диалог">+</button>
|
||||
`;
|
||||
head.querySelector('.dm-head-plus')?.addEventListener('click', () => navigate('contact-search-view'));
|
||||
|
||||
const divider = document.createElement('div');
|
||||
divider.className = 'dm-divider';
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.className = 'stack dm-list';
|
||||
@ -95,20 +106,26 @@ export function render({ navigate }) {
|
||||
row.className = 'list-item dm-dialog-card';
|
||||
const avatarEl = createDmAvatar(item.id);
|
||||
avatarEl.classList.add('avatar');
|
||||
const avatarWrap = document.createElement('div');
|
||||
avatarWrap.className = 'dm-av dm-av--default';
|
||||
avatarWrap.append(avatarEl);
|
||||
row.innerHTML = `
|
||||
<div class="dm-row-main">
|
||||
<div class="dm-row-title-wrap">
|
||||
<div class="dm-row-titleline dm-row-titlewrap">
|
||||
<strong class="dm-row-title">${item.name}</strong>
|
||||
${item.notInContacts ? '<span class="meta-muted">не в контактах</span>' : ''}
|
||||
${item.notInContacts ? '<span class="dm-contact-note">не в контактах</span>' : ''}
|
||||
</div>
|
||||
<p class="meta-muted dm-row-last-message">${item.lastMessage}</p>
|
||||
<p class="dm-row-last-message">${item.lastMessage}</p>
|
||||
</div>
|
||||
<div class="dm-row-meta-col">
|
||||
${item.unread ? `<span class="unread">${item.unread}</span>` : '<span></span>'}
|
||||
<span class="meta-muted dm-row-time">${item.time}</span>
|
||||
${item.unread ? `<span class="dm-unread-badge">${item.unread > 99 ? '99+' : item.unread}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
|
||||
<div class="dm-row-meta-line">
|
||||
${item.time ? `<span class="dm-row-time">${item.time}</span>` : '<span class="dm-row-time dm-row-time--empty"></span>'}
|
||||
<span class="dm-chevron">${SVG_CHEVRON}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
row.prepend(avatarEl);
|
||||
row.prepend(avatarWrap);
|
||||
row.addEventListener('click', () => navigate(`chat-view/${encodeURIComponent(item.id)}`));
|
||||
return row;
|
||||
}
|
||||
@ -206,7 +223,7 @@ export function render({ navigate }) {
|
||||
}
|
||||
}
|
||||
|
||||
screen.append(list);
|
||||
screen.append(head, divider, list);
|
||||
loadList();
|
||||
return screen;
|
||||
}
|
||||
|
||||
@ -1168,6 +1168,35 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.contact-search-form-card,
|
||||
.contact-search-results-card {
|
||||
margin: 0 6px;
|
||||
padding: 14px;
|
||||
border-radius: 24px;
|
||||
background: rgba(7, 10, 18, 0.88);
|
||||
border: 1px solid rgba(140, 99, 255, 0.24);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.contact-search-input {
|
||||
min-height: 48px;
|
||||
border-radius: 16px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.contact-search-results-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: rgba(252, 234, 192, 0.92);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-search-result-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
@ -3573,8 +3602,8 @@ textarea.input {
|
||||
grid-template-columns: 60px minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 92px; /* карточки не ужимаем; тап-зона ≥44px */
|
||||
padding: 14px 16px 14px 14px;
|
||||
min-height: 74px;
|
||||
padding: 10px 12px 10px 10px;
|
||||
border-radius: 26px;
|
||||
background: rgba(7, 10, 18, 0.88);
|
||||
backdrop-filter: blur(24px);
|
||||
@ -3636,6 +3665,7 @@ textarea.input {
|
||||
.dm-head-name { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-head-sub { font-size: 11px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-head-title { font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; text-align: center; padding: 0 6px; }
|
||||
.dm-list-screen .dm-head-title { color: #FCEAC0; text-shadow: 0 0 6px rgba(240, 184, 46, 0.32), 0 0 14px rgba(240, 184, 46, 0.12); }
|
||||
/* Центр шапки — светящийся бренд «Shine» */
|
||||
.dm-head-shine {
|
||||
font-size: 21px; letter-spacing: 0.6px; color: #FCEAC0;
|
||||
@ -3648,7 +3678,7 @@ textarea.input {
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .dm-head-shine { animation: none; } }
|
||||
.dm-head-plus {
|
||||
justify-self: end; width: 48px; height: 48px; border-radius: 15px;
|
||||
justify-self: end; width: 48px; height: 48px; border-radius: 50%;
|
||||
display: grid; place-items: center; font-size: 24px; line-height: 1; font-weight: 300;
|
||||
color: #FFD98A; border: 1.5px solid rgba(240, 184, 46, 0.6);
|
||||
background: rgba(12, 12, 16, 0.66);
|
||||
@ -3660,20 +3690,34 @@ textarea.input {
|
||||
.dm-divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: var(--rel-family); box-shadow: 0 0 8px var(--rel-family-glow); }
|
||||
|
||||
/* список: скролл внутри контента, карточки не ужимаем, отступ снизу под bottom nav (86px) + 16px */
|
||||
.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; padding-bottom: calc(86px + 16px); }
|
||||
.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; padding-bottom: calc(86px + 16px); }
|
||||
|
||||
/* текст карточки */
|
||||
.dm-row-main { min-width: 0; }
|
||||
.dm-row-titleline { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
||||
.dm-row-titlewrap { flex-wrap: wrap; row-gap: 6px; }
|
||||
.dm-dialog-card .dm-row-title { font-size: 16px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-dialog-card .dm-row-last-message { font-size: 14px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dm-contact-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(244, 246, 255, 0.62);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* галочка-подтверждён у имени (золотая, без слова «Подтверждён») */
|
||||
.dm-name-check { display: inline-flex; flex: 0 0 auto; color: var(--rel-family); }
|
||||
.dm-name-check svg { width: 16px; height: 16px; }
|
||||
|
||||
/* AvatarRing — обод/свечение по тону (адаптация орбов «Связей», без тяжёлой магии) */
|
||||
.dm-av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; position: relative; }
|
||||
.dm-av .avatar { width: 56px; height: 56px; min-width: 56px; min-height: 56px; border: none; box-shadow: none; }
|
||||
.dm-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; }
|
||||
.dm-av .avatar { width: 50px; height: 50px; min-width: 50px; min-height: 50px; border: none; box-shadow: none; }
|
||||
/* Цветные обводки вокруг аватаров (violet/gold) убраны по просьбе. Свечение оставляем только у сияющих (ниже). */
|
||||
.dm-av--default { box-shadow: none; }
|
||||
.dm-av--family { box-shadow: none; }
|
||||
@ -3697,10 +3741,35 @@ textarea.input {
|
||||
.dm-av--shining::before { animation: none; }
|
||||
}
|
||||
|
||||
/* правая зона: один статус сверху, ниже [unread + chevron] */
|
||||
/* правая зона: один горизонтальный ряд [статус][unread][chevron] на общей оси */
|
||||
.dm-dialog-card .dm-row-meta { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
|
||||
.dm-dialog-card .dm-row-meta .dm-chevron { margin-left: 4px; } /* отступ бейдж→chevron ≈ 12px */
|
||||
.dm-row-meta-col {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
.dm-row-meta-line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.dm-row-meta-spacer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.dm-row-time {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(244, 246, 255, 0.44);
|
||||
}
|
||||
.dm-row-time--empty {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* непрочитанные — отдельная violet-сфера (НЕ изумруд) */
|
||||
.dm-unread-badge {
|
||||
min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
|
||||
@ -3711,6 +3780,17 @@ textarea.input {
|
||||
.dm-chevron { display: inline-flex; color: rgba(244, 246, 255, 0.32); }
|
||||
.dm-chevron svg { width: 16px; height: 16px; }
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.dm-dialog-card {
|
||||
grid-template-columns: 60px minmax(0, 1fr);
|
||||
row-gap: 10px;
|
||||
}
|
||||
.dm-row-meta-col {
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Значок «связь через кого» — ТОЛЬКО иконка (кликабельная); детали пути в попапе ниже */
|
||||
.dm-via {
|
||||
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
|
||||
@ -3894,9 +3974,14 @@ html, body { overflow-x: hidden; }
|
||||
}
|
||||
|
||||
.dm-message-actions-menu {
|
||||
width: min(52vw, 240px);
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
width: min(72vw, 220px);
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.22);
|
||||
background: rgba(10, 12, 18, 0.96);
|
||||
backdrop-filter: blur(22px);
|
||||
-webkit-backdrop-filter: blur(22px);
|
||||
}
|
||||
|
||||
.dm-floating-menu-layer {
|
||||
@ -3925,7 +4010,10 @@ html, body { overflow-x: hidden; }
|
||||
|
||||
.dm-message-action-btn {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
justify-content: flex-start;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.dm-message-action-btn--danger {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user