Выровнять верхние панели UI

This commit is contained in:
AidarKC
2026-09-18 00:00:42 +03:00
parent f44ab75c64
commit 2be5ad0b7d
10 changed files with 79 additions and 22 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
client.version=1.12.18 client.version=1.12.19
server.version=1.10.7 server.version=1.10.7
-1
View File
@@ -218,7 +218,6 @@ const SCROLL_TO_BOTTOM_PAGE_IDS = new Set([
'chat-view', 'chat-view',
'channel-view', 'channel-view',
'channel-thread-view', 'channel-thread-view',
'notifications-view',
]); ]);
const FILLED_ACTION_BUTTON_PAGE_IDS = new Set([ const FILLED_ACTION_BUTTON_PAGE_IDS = new Set([
+1 -1
View File
@@ -1426,7 +1426,7 @@ export function render({ navigate, route, chrome }) {
iconNode: createOverflowDots(), iconNode: createOverflowDots(),
title: 'Действия чата', title: 'Действия чата',
ariaLabel: 'Открыть меню действий чата', ariaLabel: 'Открыть меню действий чата',
className: 'chat-header-icon-btn chat-header-menu-btn', className: 'chat-header-icon-btn chat-header-menu-btn topbar-overflow-action--raised',
menu: { menu: {
minWidth: 230, minWidth: 230,
items: () => [ items: () => [
+1 -1
View File
@@ -251,7 +251,7 @@ export function render({ navigate, chrome }) {
iconNode: createOverflowDots(), iconNode: createOverflowDots(),
title: 'Меню чатов', title: 'Меню чатов',
ariaLabel: 'Меню чатов', ariaLabel: 'Меню чатов',
className: 'messages-topbar-menu-btn', className: 'messages-topbar-menu-btn topbar-overflow-action--raised',
menu: { menu: {
minWidth: 210, minWidth: 210,
items: [ items: [
+6 -2
View File
@@ -320,11 +320,15 @@ function renderItem(item, activeTab, navigate) {
export function render({ navigate, chrome } = {}) { export function render({ navigate, chrome } = {}) {
const screen = document.createElement('section'); const screen = document.createElement('section');
screen.className = 'stack notifications-screen'; screen.className = 'stack notifications-screen';
chrome?.setTopbar(createTopBar({ title: 'Уведомления' }));
const tabs = document.createElement('div'); const tabs = document.createElement('div');
tabs.className = 'notification-feed-tabs app-top-tabs'; tabs.className = 'notification-feed-tabs app-top-tabs';
const tabDefs = [['replies','Ответы'],['connections','Связи'],['events','События']]; const tabDefs = [['replies','Ответы'],['connections','Связи'],['events','События']];
chrome?.setTopbar(createTopBar({
center: tabs,
className: 'notifications-topbar',
}));
const list = document.createElement('div'); const list = document.createElement('div');
list.className = 'stack notifications-list'; list.className = 'stack notifications-list';
let payloadCache = null; let payloadCache = null;
@@ -415,7 +419,7 @@ export function render({ navigate, chrome } = {}) {
observer?.disconnect(); observer?.disconnect();
Object.values(pendingSeenTimers).forEach((timer) => clearTimeout(timer)); Object.values(pendingSeenTimers).forEach((timer) => clearTimeout(timer));
}; };
screen.append(tabs,list); screen.append(list);
void load(); void load();
return screen; return screen;
} }
+1 -1
View File
@@ -84,7 +84,7 @@ export function render({ navigate, chrome }) {
iconNode: createOverflowDots(), iconNode: createOverflowDots(),
title: 'Меню профиля', title: 'Меню профиля',
ariaLabel: 'Меню профиля', ariaLabel: 'Меню профиля',
className: 'profile-head-menu-btn', className: 'profile-head-menu-btn topbar-overflow-action--raised',
menu: { menu: {
className: 'profile-head-menu', className: 'profile-head-menu',
minWidth: 250, minWidth: 250,
@@ -26,3 +26,12 @@
0 0 5px rgba(92, 190, 255, 0.72), 0 0 5px rgba(92, 190, 255, 0.72),
0 0 10px rgba(72, 145, 255, 0.34); 0 0 10px rgba(72, 145, 255, 0.34);
} }
/* Явный вариант для шапок, где overflow-кнопку нужно выровнять по эталонной
* позиции экрана «Связи». Поднимаем кнопку вместе с зоной нажатия и якорем
* выпадающего меню, не меняя базовый TopBar для остальных экранов. */
.topbar-overflow-action--raised {
position: relative;
top: -2px;
}
+8
View File
@@ -97,6 +97,14 @@
text-shadow: 0 0 5px var(--app-topbar-blue-glow), 0 0 12px var(--app-topbar-blue-glow-soft); 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__action svg,
.topbar-slot .topbar__back 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)); filter: drop-shadow(0 0 3px var(--app-topbar-blue-glow)) drop-shadow(0 0 7px var(--app-topbar-blue-glow-soft));
+28 -13
View File
@@ -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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: nowrap;
gap: 8px; gap: 8px;
padding: 8px 12px 4px; padding: 0;
margin: 0; margin: 0;
background: transparent; background: transparent;
border: 0; border: 0;
@@ -201,25 +219,22 @@
} }
.notifications-screen .notification-feed-tabs .notification-tab-btn { .notifications-topbar .notification-feed-tabs .notification-tab-btn {
min-width: 92px; flex: 1 1 0;
min-width: 0;
padding-inline: 8px;
text-align: center; text-align: center;
} }
/* На обычных экранах отступ создаёт стандартный padding screen-content (14px). */ /* Высота панели остаётся стандартной: перенос фильтров не увеличивает TopBar. */
.notifications-screen .notification-feed-tabs.app-top-tabs { .notifications-topbar .notification-feed-tabs.app-top-tabs {
min-height: var(--app-primary-tab-min-height); min-height: var(--app-primary-tab-min-height);
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.notifications-screen .notification-feed-tabs .notification-tab-btn {
min-width: 92px;
}
/* Уведомления: информационные блоки без рамок. Hover/focus не возвращает /* Уведомления: информационные блоки без рамок. Hover/focus не возвращает
* обводку различение сохраняется фоном и лёгкой реакцией на нажатие. */ * обводку различение сохраняется фоном и лёгкой реакцией на нажатие. */
.notifications-screen .notifications-list > .notification-card, .notifications-screen .notifications-list > .notification-card,
+24 -2
View File
@@ -798,15 +798,37 @@
} }
.user-profile-screen .user-profile-hero-avatar.avatar-glow::before { .user-profile-screen .user-profile-hero-avatar.avatar-glow {
inset: -12%; 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%); 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); filter: blur(3.4px);
transform: scale(1.07); transform: scale(1.07);
opacity: 0.91; 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 { .user-profile-screen .user-profile-hero-avatar .avatar-fallback {
font-size: clamp(34px, 9vw, 58px); font-size: clamp(34px, 9vw, 58px);
font-weight: 800; font-weight: 800;