aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновить UI-кнопки и прокрутку

Browse Source
This commit is contained in:
tram
2026-08-22 11:28:12 +03:00
parent d3e6aa2be2
commit bc8c7f318b
9 changed files with 286 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/js/app.js
+24 -1
View File
@@ -5,6 +5,7 @@ import {
syncTrackedRouteHistory,
} from './router.js';
import { renderToolbar } from './components/toolbar.js';
import { attachScrollToBottomButton } from './components/scroll-to-bottom-button.js';
import { captureClientError, setClientErrorSentNotifier, setClientErrorTransport } from './services/client-error-reporter.js';
import { initPwaInstallPromptHandling } from './services/pwa-install-service.js';
import { initPwaPush } from './services/pwa-push-service.js';
@@ -190,6 +191,15 @@ let initialConnectionCompleted = false;
let orientationLockInFlight = false;
let currentChromeCleanup = null;
const CALL_PUSH_PENDING_ACTION_KEY = 'shine-ui-call-push-pending-action-v1';
const SCROLL_TO_BOTTOM_PAGE_IDS = new Set([
'messages-list',
'chat-view',
'channels-list',
'channel-view',
'channel-thread-view',
'notifications-view',
]);
const GUEST_ALLOWED_PAGES = new Set([
'start-view',
'entry-settings-view',
@@ -1128,6 +1138,14 @@ function renderPageFailureFallback(pageId, error) {
refreshConnectionUi();
}
function attachPageScrollToBottom(pageId, screen) {
if (!SCROLL_TO_BOTTOM_PAGE_IDS.has(pageId)) return null;
return attachScrollToBottomButton({
scrollContainer: () => screen.querySelector('.dm-chat-wrap') || screenEl,
});
}
function renderApp() {
syncTrackedRouteHistory(window.location.pathname || '/');
const route = getRoute();
@@ -1164,7 +1182,12 @@ function renderApp() {
}
screenEl.append(screen);
currentCleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null;
const pageCleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null;
const scrollToBottomControl = attachPageScrollToBottom(pageId, screen);
currentCleanup = () => {
pageCleanup?.();
scrollToBottomControl?.cleanup();
};
screenEl.classList.toggle('no-app-chrome', !showAppChrome);
screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId));
shine-UI/js/components/scroll-to-bottom-button.js
+3
View File
@@ -30,6 +30,7 @@ export function attachScrollToBottomButton({
button.className = 'scroll-to-bottom-btn';
button.title = title;
button.setAttribute('aria-label', 'Прокрутить ленту вниз');
button.tabIndex = -1;
button.append(buildArrowIcon());
target.append(button);
@@ -42,6 +43,7 @@ export function attachScrollToBottomButton({
const hide = () => {
button.classList.remove('is-visible');
button.setAttribute('aria-hidden', 'true');
button.tabIndex = -1;
};
const scheduleRefresh = () => {
@@ -103,6 +105,7 @@ export function attachScrollToBottomButton({
button.classList.toggle('is-visible', shouldShow);
button.setAttribute('aria-hidden', shouldShow ? 'false' : 'true');
button.tabIndex = shouldShow ? 0 : -1;
}
const scrollToBottom = () => {
shine-UI/js/pages/channel-thread-view.js
-4
View File
@@ -1,5 +1,4 @@
import { renderHeader } from '../components/header.js';
import { attachScrollToBottomButton } from '../components/scroll-to-bottom-button.js';
import { authService, getMessageReactionState, setMessageReactionState, state } from '../state.js';
import { captureClientError } from '../services/client-error-reporter.js';
import { toUserMessage } from '../services/ui-error-texts.js';
@@ -1144,7 +1143,6 @@ export function render({ navigate, route, chrome }) {
screen.className = 'stack channels-screen channels-screen--thread';
const appScreen = document.getElementById('app-screen');
appScreen?.classList.add('channels-scroll-clean');
const scrollToBottomControl = attachScrollToBottomButton({ scrollContainer: appScreen });
const header = renderHeader({
title: '',
@@ -1356,7 +1354,6 @@ export function render({ navigate, route, chrome }) {
invalid.textContent = 'Некорректный идентификатор треда в адресе страницы.';
screen.append(invalid);
screen.cleanup = () => {
scrollToBottomControl.cleanup();
appScreen?.classList.remove('channels-scroll-clean');
};
return screen;
@@ -1545,7 +1542,6 @@ export function render({ navigate, route, chrome }) {
})();
screen.cleanup = () => {
scrollToBottomControl.cleanup();
appScreen?.classList.remove('channels-scroll-clean');
};
shine-UI/js/pages/channel-view.js
-3
View File
@@ -1,5 +1,4 @@
import { renderHeader } from '../components/header.js';
import { attachScrollToBottomButton } from '../components/scroll-to-bottom-button.js';
import {
authService,
getMessageReactionState,
@@ -2042,7 +2041,6 @@ export function render({ navigate, route, chrome }) {
screen.className = 'stack channels-screen channels-screen--channel';
const appScreen = document.getElementById('app-screen');
appScreen?.classList.add('channels-scroll-clean');
const scrollToBottomControl = attachScrollToBottomButton({ scrollContainer: appScreen });
const statusBox = document.createElement('div');
statusBox.className = 'card status-line is-unavailable channels-status';
@@ -2488,7 +2486,6 @@ export function render({ navigate, route, chrome }) {
})();
screen.cleanup = () => {
scrollToBottomControl.cleanup();
appScreen?.classList.remove('channels-scroll-clean');
if (typeof cleanupSeenTracking === 'function') cleanupSeenTracking();
};
shine-UI/js/pages/chat-view.js
-6
View File
@@ -1,5 +1,4 @@
import { renderHeader } from '../components/header.js';
import { attachScrollToBottomButton } from '../components/scroll-to-bottom-button.js';
import { directMessages } from '../mock-data.js';
import {
addAppLogEntry,
@@ -907,10 +906,6 @@ export function render({ navigate, route, chrome }) {
const wrap = document.createElement('div');
wrap.className = 'chat-wrap dm-chat-wrap';
const scrollToBottomControl = attachScrollToBottomButton({
scrollContainer: () => boundScrollContainer || wrap,
});
const historyLoader = document.createElement('div');
historyLoader.className = 'dm-history-loader';
historyLoader.hidden = true;
@@ -1563,7 +1558,6 @@ export function render({ navigate, route, chrome }) {
void loadHistoryPage({ preserveScroll: true });
});
screen.cleanup = () => {
scrollToBottomControl.cleanup();
hideUnreadSeparator({ rerender: false });
stopAllTwemojiAnimations();
window.removeEventListener('shine-chat-messages-updated', handleIncomingChatRefresh);
shine-UI/js/pages/notifications-view.js
+38 -8
View File
@@ -306,8 +306,20 @@ export function render({ navigate, chrome } = {}) {
const tabs = document.createElement('div');
tabs.className = 'tabs';
tabs.innerHTML = `
<button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
<button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
<button
type="button"
class="tab-btn notification-tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}"
data-tab="replies"
data-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
aria-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
>Ответы</button>
<button
type="button"
class="tab-btn notification-tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}"
data-tab="events"
data-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
aria-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
>События</button>
`;
const list = document.createElement('div');
@@ -347,13 +359,31 @@ export function render({ navigate, chrome } = {}) {
}
}
tabs.querySelectorAll('.tab-btn').forEach((btn) => {
function setActiveNotificationTab(nextTab) {
const normalizedTab = nextTab === 'events' ? 'events' : 'replies';
state.notificationsTab = normalizedTab;
tabs.querySelectorAll('.notification-tab-btn').forEach((node) => {
const selected = node.dataset.tab === normalizedTab;
node.classList.toggle('active', selected);
node.dataset.selected = selected ? 'true' : 'false';
node.setAttribute('aria-selected', selected ? 'true' : 'false');
});
}
// Активная кнопка остаётся визуально нажатой до выбора второй вкладки.
// При переключении класс active и aria-selected синхронно переходят на новую кнопку.
setActiveNotificationTab(state.notificationsTab);
tabs.querySelectorAll('.notification-tab-btn').forEach((btn) => {
btn.addEventListener('click', () => {
const nextTab = String(btn.dataset.tab || 'replies');
if (state.notificationsTab === nextTab) return;
state.notificationsTab = nextTab;
tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
btn.classList.add('active');
const nextTab = btn.dataset.tab === 'events' ? 'events' : 'replies';
if (state.notificationsTab === nextTab) {
setActiveNotificationTab(nextTab);
return;
}
setActiveNotificationTab(nextTab);
void load();
});
});