SHA256
Выровнять верхние панели UI
This commit is contained in:
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
client.version=1.12.18
|
client.version=1.12.19
|
||||||
server.version=1.10.7
|
server.version=1.10.7
|
||||||
|
|||||||
@@ -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([
|
||||||
|
|||||||
@@ -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: () => [
|
||||||
|
|||||||
@@ -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: [
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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));
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user