UI: обновлены профиль/связи, статусы отношений и фикс верхней панели (работает)

This commit is contained in:
AidarKC
2026-04-26 19:13:08 +03:00
parent 28bbdb8b7c
commit da12521517
6 changed files with 111 additions and 34 deletions
+3
View File
@@ -514,6 +514,8 @@ export function render({ navigate, route }) {
const screen = document.createElement('section');
screen.className = 'network-screen';
const appScreenEl = document.getElementById('app-screen');
appScreenEl?.classList.add('network-scroll-lock');
const stage = document.createElement('div');
stage.className = 'network-stage';
@@ -834,6 +836,7 @@ export function render({ navigate, route }) {
screen.cleanup = () => {
window.removeEventListener('resize', onResize);
if (observer) observer.disconnect();
appScreenEl?.classList.remove('network-scroll-lock');
};
if (keepHistory && centerLogin) {
-1
View File
@@ -182,7 +182,6 @@ export function render({ navigate }) {
const item = currentToggles.find((entry) => entry.key === toggleKey);
const isEnabled = Boolean(item?.enabled);
if (toggleKey === 'official') {
status.className = 'status-line is-available';
if (statusLineEl instanceof HTMLElement) statusLineEl.className = 'status-line is-available';
if (statusLineEl instanceof HTMLElement) statusLineEl.textContent = isEnabled
? 'Аккаунт является официальным.'
+35 -18
View File
@@ -18,10 +18,6 @@ function escapeHtml(text) {
.replaceAll("'", ''');
}
function boolText(flag) {
return flag ? 'Да' : 'Нет';
}
function genderText(value) {
const normalized = String(value || '').trim().toLowerCase();
if (normalized === 'male') return 'Мужской';
@@ -31,7 +27,7 @@ function genderText(value) {
function relationButtonLabel(kind, flags) {
if (kind === 'follow') return flags.outFollow ? 'Отписаться' : 'Подписаться';
if (kind === 'friend') return flags.outFriend ? 'Убрать из друзей' : 'Добавить в друзья';
if (kind === 'friend') return flags.outFriend ? 'Убрать из близких друзей' : 'Добавить в близкие друзья';
return flags.outContact ? 'Убрать из контактов' : 'Добавить в контакты';
}
@@ -43,10 +39,29 @@ function relationNextState(kind, flags) {
function relationConfirmLabel(kind) {
if (kind === 'follow') return 'подписку';
if (kind === 'friend') return 'дружбу';
if (kind === 'friend') return 'статус близкого друга';
return 'контакт';
}
function relationStateText(kind, flags) {
if (kind === 'follow') {
if (flags.outFollow && flags.inFollow) return 'Вы взаимно подписаны.';
if (flags.outFollow) return 'Вы подписаны на этот профиль.';
if (flags.inFollow) return 'Этот профиль подписан на вас.';
return '';
}
if (kind === 'friend') {
if (flags.outFriend && flags.inFriend) return 'Вы взаимно близкие друзья.';
if (flags.outFriend) return 'Вы считаете этот профиль близким другом.';
if (flags.inFriend) return 'Этот профиль считает вас близким другом.';
return '';
}
if (flags.outContact && flags.inContact) return 'Вы обменялись контактами.';
if (flags.outContact) return 'Вы добавили этот профиль в контакты.';
if (flags.inContact) return 'Этот профиль добавил вас в контакты.';
return '';
}
function renderIdentity(card) {
const lines = buildIdentityLines({
login: card.login,
@@ -91,14 +106,20 @@ function renderReadOnlyBadges(card) {
}
function renderRelations(flags) {
const rows = [
{ kind: 'follow', text: relationStateText('follow', flags), button: relationButtonLabel('follow', flags) },
{ kind: 'friend', text: relationStateText('friend', flags), button: relationButtonLabel('friend', flags) },
{ kind: 'contact', text: relationStateText('contact', flags), button: relationButtonLabel('contact', flags) },
];
return `
<div class="card stack user-relations-list">
<div class="user-rel-row"><span>Вы подписаны:</span><strong>${boolText(flags.outFollow)}</strong></div>
<div class="user-rel-row"><span>Подписан на вас:</span><strong>${boolText(flags.inFollow)}</strong></div>
<div class="user-rel-row"><span>Вы добавили в друзья:</span><strong>${boolText(flags.outFriend)}</strong></div>
<div class="user-rel-row"><span>Добавил вас в друзья:</span><strong>${boolText(flags.inFriend)}</strong></div>
<div class="user-rel-row"><span>Вы добавили в контакты:</span><strong>${boolText(flags.outContact)}</strong></div>
<div class="user-rel-row"><span>Добавил вас в контакты:</span><strong>${boolText(flags.inContact)}</strong></div>
${rows.map((row) => `
<div class="user-rel-row ${row.text ? '' : 'is-empty'}">
<span class="user-rel-text">${escapeHtml(row.text)}</span>
<button class="ghost-btn user-rel-action" type="button" data-relation-action="${row.kind}">${escapeHtml(row.button)}</button>
</div>
`).join('')}
</div>
`;
}
@@ -192,11 +213,6 @@ export function render({ navigate, route }) {
${renderReadOnlyBadges(card)}
${renderRelations(flags)}
${renderReadOnlyParams(card)}
<div class="stack">
<button class="primary-btn" type="button" data-relation-action="follow"></button>
<button class="ghost-btn" type="button" data-relation-action="friend"></button>
<button class="ghost-btn" type="button" data-relation-action="contact"></button>
</div>
`;
const identityCard = document.createElement('div');
identityCard.className = 'card stack';
@@ -257,7 +273,8 @@ export function render({ navigate, route }) {
body.addEventListener('click', (event) => {
const target = event.target;
if (!(target instanceof HTMLElement)) return;
const kind = target.dataset.relationAction;
const actionBtn = target.closest('[data-relation-action]');
const kind = String(actionBtn?.getAttribute('data-relation-action') || '');
if (!kind) return;
onRelationAction(kind);
});