From 2be5ad0b7d1b22f8b7f0985321b2c16e30cc77f1a034cebb166218676de6e526 Mon Sep 17 00:00:00 2001 From: AidarKC Date: Fri, 18 Sep 2026 00:00:42 +0300 Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D1=80=D0=BE=D0=B2=D0=BD=D1=8F?= =?UTF-8?q?=D1=82=D1=8C=20=D0=B2=D0=B5=D1=80=D1=85=D0=BD=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- VERSION.properties | 2 +- shine-UI/js/app.js | 1 - shine-UI/js/pages/chat-view.js | 2 +- shine-UI/js/pages/messages-list.js | 2 +- shine-UI/js/pages/notifications-view.js | 8 +++- shine-UI/js/pages/profile-view.js | 2 +- shine-UI/styles/components/overflow-dots.css | 9 +++++ shine-UI/styles/components/topbar.css | 8 ++++ shine-UI/styles/features/notifications.css | 41 +++++++++++++------- shine-UI/styles/features/profile.css | 26 ++++++++++++- 10 files changed, 79 insertions(+), 22 deletions(-) diff --git a/VERSION.properties b/VERSION.properties index 12e6b19f..08f9664b 100644 --- a/VERSION.properties +++ b/VERSION.properties @@ -1,2 +1,2 @@ -client.version=1.12.18 +client.version=1.12.19 server.version=1.10.7 diff --git a/shine-UI/js/app.js b/shine-UI/js/app.js index f8dad777..dafd5c52 100644 --- a/shine-UI/js/app.js +++ b/shine-UI/js/app.js @@ -218,7 +218,6 @@ const SCROLL_TO_BOTTOM_PAGE_IDS = new Set([ 'chat-view', 'channel-view', 'channel-thread-view', - 'notifications-view', ]); const FILLED_ACTION_BUTTON_PAGE_IDS = new Set([ diff --git a/shine-UI/js/pages/chat-view.js b/shine-UI/js/pages/chat-view.js index fa1429b2..5875d940 100644 --- a/shine-UI/js/pages/chat-view.js +++ b/shine-UI/js/pages/chat-view.js @@ -1426,7 +1426,7 @@ export function render({ navigate, route, chrome }) { iconNode: createOverflowDots(), title: 'Действия чата', ariaLabel: 'Открыть меню действий чата', - className: 'chat-header-icon-btn chat-header-menu-btn', + className: 'chat-header-icon-btn chat-header-menu-btn topbar-overflow-action--raised', menu: { minWidth: 230, items: () => [ diff --git a/shine-UI/js/pages/messages-list.js b/shine-UI/js/pages/messages-list.js index 34f9382c..4ba73056 100644 --- a/shine-UI/js/pages/messages-list.js +++ b/shine-UI/js/pages/messages-list.js @@ -251,7 +251,7 @@ export function render({ navigate, chrome }) { iconNode: createOverflowDots(), title: 'Меню чатов', ariaLabel: 'Меню чатов', - className: 'messages-topbar-menu-btn', + className: 'messages-topbar-menu-btn topbar-overflow-action--raised', menu: { minWidth: 210, items: [ diff --git a/shine-UI/js/pages/notifications-view.js b/shine-UI/js/pages/notifications-view.js index 7e4f0cf6..d1f90bee 100644 --- a/shine-UI/js/pages/notifications-view.js +++ b/shine-UI/js/pages/notifications-view.js @@ -320,11 +320,15 @@ function renderItem(item, activeTab, navigate) { export function render({ navigate, chrome } = {}) { const screen = document.createElement('section'); screen.className = 'stack notifications-screen'; - chrome?.setTopbar(createTopBar({ title: 'Уведомления' })); const tabs = document.createElement('div'); tabs.className = 'notification-feed-tabs app-top-tabs'; const tabDefs = [['replies','Ответы'],['connections','Связи'],['events','События']]; + chrome?.setTopbar(createTopBar({ + center: tabs, + className: 'notifications-topbar', + })); + const list = document.createElement('div'); list.className = 'stack notifications-list'; let payloadCache = null; @@ -415,7 +419,7 @@ export function render({ navigate, chrome } = {}) { observer?.disconnect(); Object.values(pendingSeenTimers).forEach((timer) => clearTimeout(timer)); }; - screen.append(tabs,list); + screen.append(list); void load(); return screen; } diff --git a/shine-UI/js/pages/profile-view.js b/shine-UI/js/pages/profile-view.js index bb7d426e..e47c647b 100644 --- a/shine-UI/js/pages/profile-view.js +++ b/shine-UI/js/pages/profile-view.js @@ -84,7 +84,7 @@ export function render({ navigate, chrome }) { iconNode: createOverflowDots(), title: 'Меню профиля', ariaLabel: 'Меню профиля', - className: 'profile-head-menu-btn', + className: 'profile-head-menu-btn topbar-overflow-action--raised', menu: { className: 'profile-head-menu', minWidth: 250, diff --git a/shine-UI/styles/components/overflow-dots.css b/shine-UI/styles/components/overflow-dots.css index f65ccd7d..1a595873 100644 --- a/shine-UI/styles/components/overflow-dots.css +++ b/shine-UI/styles/components/overflow-dots.css @@ -26,3 +26,12 @@ 0 0 5px rgba(92, 190, 255, 0.72), 0 0 10px rgba(72, 145, 255, 0.34); } + + +/* Явный вариант для шапок, где overflow-кнопку нужно выровнять по эталонной + * позиции экрана «Связи». Поднимаем кнопку вместе с зоной нажатия и якорем + * выпадающего меню, не меняя базовый TopBar для остальных экранов. */ +.topbar-overflow-action--raised { + position: relative; + top: -2px; +} diff --git a/shine-UI/styles/components/topbar.css b/shine-UI/styles/components/topbar.css index 8cf2d510..a3d464e4 100644 --- a/shine-UI/styles/components/topbar.css +++ b/shine-UI/styles/components/topbar.css @@ -97,6 +97,14 @@ text-shadow: 0 0 5px var(--app-topbar-blue-glow), 0 0 12px var(--app-topbar-blue-glow-soft); } +.topbar-slot .topbar__action { + min-width: 40px; + padding-block: 0; + display: inline-flex; + align-items: center; + justify-content: center; +} + .topbar-slot .topbar__action svg, .topbar-slot .topbar__back svg { filter: drop-shadow(0 0 3px var(--app-topbar-blue-glow)) drop-shadow(0 0 7px var(--app-topbar-blue-glow-soft)); diff --git a/shine-UI/styles/features/notifications.css b/shine-UI/styles/features/notifications.css index 460a54df..62a8d841 100644 --- a/shine-UI/styles/features/notifications.css +++ b/shine-UI/styles/features/notifications.css @@ -186,14 +186,32 @@ -/* Уведомления: переключатели лент повторяют стеклянные чипы экрана «Связи». */ -.notifications-screen .notification-feed-tabs { +/* Уведомления: переключатели лент занимают место заголовка в закреплённом + * TopBar и повторяют стеклянные чипы экрана «Связи». */ +.notifications-topbar { + grid-template-columns: minmax(0, 1fr); +} + + +.notifications-topbar .topbar__left, +.notifications-topbar .topbar__right { + display: none; +} + + +.notifications-topbar .topbar__center { + width: 100%; +} + + +.notifications-topbar .notification-feed-tabs { + width: 100%; display: flex; align-items: center; justify-content: center; - flex-wrap: wrap; + flex-wrap: nowrap; gap: 8px; - padding: 8px 12px 4px; + padding: 0; margin: 0; background: transparent; border: 0; @@ -201,25 +219,22 @@ } -.notifications-screen .notification-feed-tabs .notification-tab-btn { - min-width: 92px; +.notifications-topbar .notification-feed-tabs .notification-tab-btn { + flex: 1 1 0; + min-width: 0; + padding-inline: 8px; text-align: center; } -/* На обычных экранах отступ создаёт стандартный padding screen-content (14px). */ -.notifications-screen .notification-feed-tabs.app-top-tabs { +/* Высота панели остаётся стандартной: перенос фильтров не увеличивает TopBar. */ +.notifications-topbar .notification-feed-tabs.app-top-tabs { min-height: var(--app-primary-tab-min-height); padding: 0; margin: 0; } -.notifications-screen .notification-feed-tabs .notification-tab-btn { - min-width: 92px; -} - - /* Уведомления: информационные блоки без рамок. Hover/focus не возвращает * обводку — различение сохраняется фоном и лёгкой реакцией на нажатие. */ .notifications-screen .notifications-list > .notification-card, diff --git a/shine-UI/styles/features/profile.css b/shine-UI/styles/features/profile.css index 6dd785ae..471df775 100644 --- a/shine-UI/styles/features/profile.css +++ b/shine-UI/styles/features/profile.css @@ -798,15 +798,37 @@ } -.user-profile-screen .user-profile-hero-avatar.avatar-glow::before { - inset: -12%; +.user-profile-screen .user-profile-hero-avatar.avatar-glow { + box-shadow: + 0 0 8.3px rgba(146, 243, 255, 0.57), + 0 0 18.3px rgba(121, 235, 255, 0.39), + 0 0 33px rgba(100, 220, 255, 0.24); +} + + +/* Повторяем стационарное сияние узлов экрана «Связи»: тот же градиент, + * интенсивность, масштаб и радиус размытия. CSS blur здесь эквивалентен + * SVG-фильтру fg-shine-glow со stdDeviation 3.4, который создаёт граф. */ +.user-profile-screen .user-profile-hero-avatar.avatar.avatar-image.avatar-framed.avatar-glow::before { + inset: -12px; + border: 0; background: radial-gradient(circle, rgba(140, 240, 255, 0.5) 0%, rgba(130, 235, 255, 0.18) 46%, rgba(130, 235, 255, 0) 72%); + box-shadow: none; filter: blur(3.4px); transform: scale(1.07); opacity: 0.91; } +/* На крупном аватаре профиля официальный знак на 20% компактнее базового. + * Левый и нижний края остаются на месте, поэтому сокращение приходится на + * верхнюю и правую стороны знака. */ +.user-profile-screen .user-profile-hero-avatar.avatar-framed > .avatar-official-badge { + width: 25.6%; + height: 25.6%; +} + + .user-profile-screen .user-profile-hero-avatar .avatar-fallback { font-size: clamp(34px, 9vw, 58px); font-weight: 800;