nav: неоновые PNG-иконки вкладок бара + единый вид
- toolbar.js: data-driven иконки (iconImg/glow/hero); все 5 вкладок → <img> неон-PNG; «Связи» помечена hero. - components.css: единый размер (--tab-icon-size 27px), «Связи» крупнее ВИЗУАЛЬНО через transform: scale (без сдвига раскладки — иконки на одной линии); active/tap-состояния; у «Связи» убран лишний drop-shadow-ореол (светится сама PNG); глобально -webkit-tap-highlight-color: transparent (нет синего tap-квадрата нигде). - assets: icon_lichnye/kanaly/svyazi/uvedomleniya/profil.png. Иконка «Уведомления» приведена к прозрачному фону (была без альфы) и обрезана до ~92% заполнения, как у других. Версия 1.2.166. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
b4480d89cf
commit
ac1cc04637
@ -1,2 +1,2 @@
|
||||
client.version=1.2.165
|
||||
client.version=1.2.166
|
||||
server.version=1.2.144
|
||||
|
||||
BIN
shine-UI/assets/icon_kanaly.png
Normal file
BIN
shine-UI/assets/icon_kanaly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
BIN
shine-UI/assets/icon_lichnye.png
Normal file
BIN
shine-UI/assets/icon_lichnye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
shine-UI/assets/icon_profil.png
Normal file
BIN
shine-UI/assets/icon_profil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
BIN
shine-UI/assets/icon_svyazi.png
Normal file
BIN
shine-UI/assets/icon_svyazi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
shine-UI/assets/icon_uvedomleniya.png
Normal file
BIN
shine-UI/assets/icon_uvedomleniya.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
@ -2,14 +2,23 @@ import { resolveToolbarActive } from '../router.js';
|
||||
import { state } from '../state.js';
|
||||
import { openAuthRequiredModal } from '../services/auth-required-modal.js';
|
||||
|
||||
// iconImg — путь к неоновой PNG (если есть, рисуем картинку вместо эмодзи); glow — цвет доп.свечения
|
||||
// активной/нажатой вкладки (var --tab-glow); hero — «герой»-вкладка (крупнее/ярче, всегда светится).
|
||||
// Пока подключена только «Связи»; остальные 4 — эмодзи до подготовки ассетов (имена подставлю).
|
||||
const ITEMS = [
|
||||
{ pageId: 'messages-list', label: 'Личные сообщения', icon: '💬' },
|
||||
{ pageId: 'channels-list', label: 'Каналы', icon: '📢' },
|
||||
{ pageId: 'network-view', label: 'Связи', icon: '🕸' },
|
||||
{ pageId: 'notifications-view', label: 'Уведомления', icon: '🔔' },
|
||||
{ pageId: 'profile-view', label: 'Профиль', icon: '👤' },
|
||||
{ pageId: 'messages-list', label: 'Личные сообщения', icon: '💬', iconImg: '/assets/icon_lichnye.png', glow: 'rgba(0, 229, 255, .6)' },
|
||||
{ pageId: 'channels-list', label: 'Каналы', icon: '📢', iconImg: '/assets/icon_kanaly.png', glow: 'rgba(0, 229, 255, .6)' },
|
||||
{ pageId: 'network-view', label: 'Связи', icon: '🕸', iconImg: '/assets/icon_svyazi.png', glow: 'rgba(0, 229, 255, .6)', hero: true },
|
||||
{ pageId: 'notifications-view', label: 'Уведомления', icon: '🔔', iconImg: '/assets/icon_uvedomleniya.png', glow: 'rgba(0, 229, 255, .6)' },
|
||||
{ pageId: 'profile-view', label: 'Профиль', icon: '👤', iconImg: '/assets/icon_profil.png', glow: 'rgba(0, 229, 255, .6)' },
|
||||
];
|
||||
|
||||
function iconHtml(item) {
|
||||
return item.iconImg
|
||||
? `<img class="toolbar-icon-img" src="${item.iconImg}" alt="" aria-hidden="true" style="--tab-glow:${item.glow}" />`
|
||||
: `<span>${item.icon}</span>`;
|
||||
}
|
||||
|
||||
function getTotalUnreadMessages() {
|
||||
const chats = Object.values(state.chats || {});
|
||||
let total = 0;
|
||||
@ -62,10 +71,10 @@ export function renderToolbar(currentPageId, navigate) {
|
||||
const isProfile = item.pageId === 'profile-view';
|
||||
const isMessages = item.pageId === 'messages-list';
|
||||
const isNetwork = item.pageId === 'network-view';
|
||||
btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}${isMessages ? ' toolbar-btn-messages' : ''}${isNetwork ? ' toolbar-btn-network' : ''}`;
|
||||
btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}${isMessages ? ' toolbar-btn-messages' : ''}${isNetwork ? ' toolbar-btn-network' : ''}${item.hero ? ' toolbar-btn-hero' : ''}`;
|
||||
if (isProfile) {
|
||||
btn.innerHTML = `
|
||||
<span>${item.icon}</span>
|
||||
${iconHtml(item)}
|
||||
<span class="toolbar-label-wrap">
|
||||
<span>${item.label}</span>
|
||||
<span id="toolbar-connection-indicator" class="toolbar-connection-indicator is-unknown">
|
||||
@ -75,7 +84,7 @@ export function renderToolbar(currentPageId, navigate) {
|
||||
</span>
|
||||
`;
|
||||
} else {
|
||||
btn.innerHTML = `<span>${item.icon}</span><span>${item.label}</span>`;
|
||||
btn.innerHTML = `${iconHtml(item)}<span>${item.label}</span>`;
|
||||
}
|
||||
if (isMessages && unreadTotal > 0) {
|
||||
const badge = document.createElement('span');
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
/* Глобально отключаем синюю tap-подсветку мобильных браузеров/WebView на ВСЕХ элементах
|
||||
(Android/Chromium): синего квадрата при нажатии нигде быть не должно. */
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -3928,6 +3934,39 @@ textarea.input {
|
||||
text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
|
||||
/* Неоновые PNG-иконки вкладок (свечение запечено в PNG). Цвет доп.свечения — var --tab-glow (инлайн на img). */
|
||||
.toolbar-icon-img {
|
||||
--tab-icon-size: 27px; /* крупнее (бар-иконки); герой ниже ещё больше */
|
||||
width: var(--tab-icon-size);
|
||||
height: var(--tab-icon-size);
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
transition: transform .12s ease, filter .15s ease;
|
||||
}
|
||||
/* Активная вкладка — лёгкое доп. свечение (подпись подсвечивается правилом .active span:last-child выше). */
|
||||
.toolbar-btn.active .toolbar-icon-img {
|
||||
filter: drop-shadow(0 0 5px var(--tab-glow)) brightness(1.08);
|
||||
}
|
||||
/* Нажатие — вдавливание + краткая вспышка свечения; на отпускании возврат. */
|
||||
.toolbar-btn:active .toolbar-icon-img {
|
||||
transform: scale(0.9);
|
||||
filter: drop-shadow(0 0 9px var(--tab-glow)) brightness(1.2);
|
||||
}
|
||||
/* «Связи» — герой: крупнее и всегда чуть светится сильнее остальных; press-feedback ярче. */
|
||||
.toolbar-btn-hero .toolbar-icon-img {
|
||||
/* Крупнее ВИЗУАЛЬНО через transform (origin center) — раскладочный размер как у остальных (27px),
|
||||
поэтому иконка остаётся на одной линии с другими, а не задирается вверх. */
|
||||
transform: scale(1.63); /* ≈44px при базовых 27px */
|
||||
filter: brightness(1.05); /* CSS-ореол убран — светится только сама PNG (логотип не тронут) */
|
||||
}
|
||||
.toolbar-btn-hero.active .toolbar-icon-img {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
.toolbar-btn-hero:active .toolbar-icon-img {
|
||||
transform: scale(1.47); /* 1.63 × 0.9 (нажатие) */
|
||||
filter: brightness(1.25); /* нажатие — только подсветление, без ореола */
|
||||
}
|
||||
|
||||
.toolbar-channels-hold-overlay {
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
@ -4344,10 +4383,17 @@ textarea.input {
|
||||
.toolbar-btn-network {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-tap-highlight-color: transparent; /* нет синей вспышки-квадрата при тапе (Android WebView/Chromium) */
|
||||
}
|
||||
/* нет рамки/подсветки фокуса ВОКРУГ кнопки — светится только сама иконка (её drop-shadow) */
|
||||
.toolbar-btn-network:focus,
|
||||
.toolbar-btn-network:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toolbar-btn-network::before {
|
||||
content: "";
|
||||
display: none; /* подсветка-подложка вокруг иконки «Связи» убрана по запросу (иконка и её drop-shadow-ореол не тронуты) */
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border-radius: 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user