UI: обновлены профиль/связи, статусы отношений и фикс верхней панели (работает)
This commit is contained in:
AidarKC
parent
28bbdb8b7c
commit
da12521517
@ -1,2 +1,2 @@
|
||||
client.version=1.2.15
|
||||
server.version=1.2.15
|
||||
client.version=1.2.16
|
||||
server.version=1.2.16
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
|
||||
? 'Аккаунт является официальным.'
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -1336,6 +1336,7 @@ textarea.input {
|
||||
.network-stage {
|
||||
position: relative;
|
||||
height: calc(100dvh - 74px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.network-board--full {
|
||||
@ -1347,12 +1348,17 @@ textarea.input {
|
||||
}
|
||||
|
||||
.network-header-overlay {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
position: sticky;
|
||||
top: max(8px, env(safe-area-inset-top));
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
margin-bottom: 0;
|
||||
z-index: 3;
|
||||
z-index: 12;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.network-header-overlay .icon-btn {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.network-header-overlay .page-title {
|
||||
@ -1584,13 +1590,35 @@ textarea.input {
|
||||
}
|
||||
|
||||
.user-rel-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 38px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(8, 14, 24, 0.34);
|
||||
color: #d8e3ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-rel-text {
|
||||
min-height: 1em;
|
||||
color: #dbe8ff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.user-rel-action {
|
||||
min-height: 32px;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-rel-row.is-empty .user-rel-text {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -3700,7 +3728,7 @@ textarea.input {
|
||||
background: #05070A;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
min-height: 100%;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profile-screen::before {
|
||||
@ -3729,13 +3757,13 @@ textarea.input {
|
||||
|
||||
.profile-top-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
grid-template-columns: 1.6fr 1fr 1fr;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.profile-top-action-btn {
|
||||
min-height: 30px;
|
||||
padding: 5px 8px;
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
@ -3744,8 +3772,8 @@ textarea.input {
|
||||
}
|
||||
|
||||
.profile-main-card {
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.profile-status-row {
|
||||
@ -3757,15 +3785,40 @@ textarea.input {
|
||||
flex: 1 1 auto;
|
||||
min-height: 16px;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-refresh-btn {
|
||||
min-height: 30px;
|
||||
min-height: 28px;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.profile-main-card > .row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-main-card .profile-identity-lines {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.profile-main-card .profile-identity-line {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.profile-main-card .profile-identity-login {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.profile-main-card .profile-param-list {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.profile-main-card .profile-param-item {
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.profile-screen .primary-btn {
|
||||
background: rgba(212, 175, 55, 0.2);
|
||||
border: 1px solid rgba(212, 175, 55, 0.45);
|
||||
|
||||
@ -52,6 +52,11 @@ body::before {
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.screen-content.network-scroll-lock {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-slot {
|
||||
position: absolute;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user