UI: правки клавиатуры и дневника

This commit is contained in:
AidarKC
2026-08-11 16:26:31 +04:00
parent 801a4697ea
commit bc11b60147
7 changed files with 40 additions and 7 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
client.version=1.5.32 client.version=1.5.33
server.version=1.4.10 server.version=1.4.10
+4
View File
@@ -212,6 +212,10 @@ function setShellMetricVar(name, valuePx) {
appShellEl.style.setProperty(name, `${Math.max(0, Math.ceil(Number(valuePx || 0)))}px`); appShellEl.style.setProperty(name, `${Math.max(0, Math.ceil(Number(valuePx || 0)))}px`);
} }
function setKeyboardOffsetPx(valuePx = 0) {
setShellMetricVar('--keyboard-offset', valuePx);
}
function attachSlotHeightObserver(slotEl, cssVarName) { function attachSlotHeightObserver(slotEl, cssVarName) {
if (!slotEl || typeof ResizeObserver !== 'function') return null; if (!slotEl || typeof ResizeObserver !== 'function') return null;
const sync = () => { const sync = () => {
+4 -1
View File
@@ -14,6 +14,7 @@ import {
import { makeShineChannelRoute } from '../services/shine-routes.js'; import { makeShineChannelRoute } from '../services/shine-routes.js';
import { navigateBack } from '../router.js'; import { navigateBack } from '../router.js';
import { buildArweaveDataUrl } from '../services/arweave-file-service.js'; import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
export const pageMeta = { id: 'channels-list', title: 'Каналы' }; export const pageMeta = { id: 'channels-list', title: 'Каналы' };
@@ -26,7 +27,9 @@ const DIARY_DISPLAY_NAME = 'Дневник';
function cleanChannelMessagePreview(text) { function cleanChannelMessagePreview(text) {
const parsed = parseMessageAttachments(text); const parsed = parseMessageAttachments(text);
return String(parsed.text || '').trim() || (parsed.attachments.length ? 'Вложение' : 'Ждем ваших начинаний'); const dmParsed = parseDmTechBlocks(String(parsed.text || ''));
return String(dmParsed.displayText || dmParsed.visibleText || '').trim()
|| (parsed.attachments.length ? 'Вложение' : 'Ждем ваших начинаний');
} }
function isChannelsDemoMode() { function isChannelsDemoMode() {
+13 -1
View File
@@ -783,6 +783,7 @@ async function mergeDirectMessagesPage(chatId, payloadMessages) {
function setChatKeyboardOpen(isOpen) { function setChatKeyboardOpen(isOpen) {
document.body.classList.toggle('chat-keyboard-open', !!isOpen); document.body.classList.toggle('chat-keyboard-open', !!isOpen);
document.body.classList.toggle('chat-toolbar-persistent', !!isOpen);
} }
export function render({ navigate, route, chrome }) { export function render({ navigate, route, chrome }) {
@@ -1010,10 +1011,20 @@ export function render({ navigate, route, chrome }) {
let emojiPickerOpen = false; let emojiPickerOpen = false;
let emojiSelection = null; let emojiSelection = null;
const baseViewportHeight = Math.max(window.visualViewport?.height || 0, window.innerHeight || 0); const baseViewportHeight = Math.max(window.visualViewport?.height || 0, window.innerHeight || 0);
const appShell = document.querySelector('.app-shell');
const setKeyboardInset = (valuePx = 0) => {
appShell?.style.setProperty('--keyboard-offset', `${Math.max(0, Math.ceil(Number(valuePx || 0)))}px`);
};
const syncKeyboardUi = () => { const syncKeyboardUi = () => {
const viewportHeight = Math.max(window.visualViewport?.height || 0, window.innerHeight || 0); const viewport = window.visualViewport || null;
const viewportHeight = Math.max(viewport?.height || 0, window.innerHeight || 0);
const viewportShrunk = baseViewportHeight - viewportHeight > 120; const viewportShrunk = baseViewportHeight - viewportHeight > 120;
const keyboardInset = viewportShrunk
? Math.max(0, (window.innerHeight || 0) - viewportHeight - Number(viewport?.offsetTop || 0))
: 0;
setKeyboardInset(keyboardInset);
setChatKeyboardOpen(inputFocused && viewportShrunk); setChatKeyboardOpen(inputFocused && viewportShrunk);
if (inputFocused) { if (inputFocused) {
window.requestAnimationFrame(() => scrollToLatestMessage(log)); window.requestAnimationFrame(() => scrollToLatestMessage(log));
@@ -1511,6 +1522,7 @@ export function render({ navigate, route, chrome }) {
}); });
screen.cleanup = () => { screen.cleanup = () => {
setChatKeyboardOpen(false); setChatKeyboardOpen(false);
setKeyboardInset(0);
stopAllTwemojiAnimations(); stopAllTwemojiAnimations();
window.removeEventListener('shine-chat-messages-updated', handleIncomingChatRefresh); window.removeEventListener('shine-chat-messages-updated', handleIncomingChatRefresh);
window.visualViewport?.removeEventListener('resize', syncKeyboardUi); window.visualViewport?.removeEventListener('resize', syncKeyboardUi);
-2
View File
@@ -101,8 +101,6 @@ export function render({ navigate, chrome }) {
const topbar = document.createElement('header'); const topbar = document.createElement('header');
topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile'; topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile';
topbar.innerHTML = ` topbar.innerHTML = `
<div class="header-left"></div>
<h1 class="page-title">Профиль пользователя</h1>
<div class="header-actions profile-top-actions"> <div class="header-actions profile-top-actions">
<button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="profile" aria-label="Редактировать профиль" title="Редактировать профиль"> <button class="ghost-btn profile-top-action-btn profile-top-icon-btn" type="button" data-top-action="profile" aria-label="Редактировать профиль" title="Редактировать профиль">
<img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" /> <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
+9
View File
@@ -39,6 +39,15 @@
text-align: center; text-align: center;
} }
.app-topbar-shell--profile {
justify-content: flex-end;
}
.app-topbar-shell--profile .header-actions {
min-width: 0;
margin-left: auto;
}
.app-topbar-shell .header-left, .app-topbar-shell .header-left,
.app-topbar-shell .header-actions { .app-topbar-shell .header-actions {
min-width: 92px; min-width: 92px;
+9 -2
View File
@@ -28,6 +28,7 @@ body::before {
--topbar-height: 0px; --topbar-height: 0px;
--composer-height: 0px; --composer-height: 0px;
--toolbar-height: 78px; --toolbar-height: 78px;
--keyboard-offset: 0px;
background: transparent; background: transparent;
border-left: 1px solid rgba(211, 170, 86, 0.2); border-left: 1px solid rgba(211, 170, 86, 0.2);
border-right: 1px solid rgba(211, 170, 86, 0.2); border-right: 1px solid rgba(211, 170, 86, 0.2);
@@ -110,12 +111,12 @@ body::before {
} }
body.chat-keyboard-open .screen-content { body.chat-keyboard-open .screen-content {
bottom: var(--composer-height, 0px); bottom: calc(var(--composer-height, 0px) + var(--keyboard-offset, 0px));
padding-bottom: calc(14px + env(safe-area-inset-bottom)); padding-bottom: calc(14px + env(safe-area-inset-bottom));
} }
body.chat-keyboard-open .composer-slot { body.chat-keyboard-open .composer-slot {
bottom: 0; bottom: var(--keyboard-offset, 0px);
padding-bottom: calc(8px + env(safe-area-inset-bottom)); padding-bottom: calc(8px + env(safe-area-inset-bottom));
} }
@@ -125,6 +126,12 @@ body.chat-keyboard-open .toolbar-slot {
transform: translateY(calc(100% + env(safe-area-inset-bottom))); transform: translateY(calc(100% + env(safe-area-inset-bottom)));
} }
body.chat-keyboard-open.chat-toolbar-persistent .toolbar-slot {
opacity: 1;
pointer-events: auto;
transform: none;
}
.connection-retry-banner { .connection-retry-banner {
position: absolute; position: absolute;
left: 12px; left: 12px;