fix(ui): add layer icon and preserve switch contrast

This commit is contained in:
Codex
2026-09-10 22:11:39 +03:00
parent 8c53f73ee5
commit 67025ee209
7 changed files with 26 additions and 5 deletions
+6 -1
View File
@@ -201,7 +201,7 @@ const iconGroups: Array<{ title: string; note: string; icons: IconName[] }> = [
{
title: "Окно и слой",
note: "Launcher / Hub",
icons: ["close", "plus", "expand", "minimize", "refresh", "panel", "apps"],
icons: ["close", "plus", "expand", "minimize", "refresh", "panel", "apps", "layers"],
},
{
title: "Навигация",
@@ -258,6 +258,7 @@ const iconLabels: Record<IconName, string> = {
image: "Изображение",
inbox: "Уведомления",
key: "Ключ",
layers: "Слои",
list: "Список задач",
lock: "Закрыто",
mail: "Приглашение",
@@ -1539,6 +1540,10 @@ export function CatalogApp() {
description="MP4 или URL становятся частью единого server-side layout вместе с темой, материалом и Toolbar."
actions={<Switch checked={mediaVisible} label="Показать" onChange={setMediaVisible} />}
>
<div style={{"--nodedc-accent-rgb":"247 248 244","--nodedc-on-accent-rgb":"8 8 10"} as CSSProperties}>
<Switch checked={mediaVisible} label="Белый акцент · видимость" onChange={setMediaVisible} />
<Switch checked={false} label="Выключено" disabled onChange={()=>{}} />
</div>
<MediaSourceField
label="Видео / картинка"
source={mediaSource}
+5
View File
@@ -252,6 +252,11 @@ setup-команды, сохранение, API и права принадлеж
`SettingsCard` фиксирует нейтральную структуру админской группы: eyebrow/title/description/actions/body. `Switch` покрывает компактное включение/видимость внутри таких групп. Данные секции, сохранение и права остаются в consumer.
Бегунок включённого `Switch` использует `--nodedc-on-accent-rgb`, поэтому
сохраняет контраст с белым, цветным и тёмным акцентом. Выключенный track
наследует тон темы от text-primary. Длина track не сжимается при переносе
подписи; положение бегунка остаётся дополнительным признаком состояния.
Для компактных сообщений о результате и пустых состояний `SettingsCard align="center"`
центрирует содержимое по горизонтали и вертикали. Пустой body не создаёт
асимметричный нижний отступ. Обычные группы настроек сохраняют `align="start"`;
+6 -1
View File
@@ -16,7 +16,7 @@
| Группа | Канонические имена |
| --- | --- |
| Окно и слой | `close`, `plus`, `expand`, `minimize`, `refresh`, `panel`, `apps` |
| Окно и слой | `close`, `plus`, `expand`, `minimize`, `refresh`, `panel`, `apps`, `layers` |
| Навигация | `chevron-left`, `chevron-right`, `chevron-down`, `grid`, `list`, `sliders`, `search` |
| Редактирование | `save`, `edit`, `trash`, `copy`, `upload`, `download`, `external` |
| Состояние и доступ | `check`, `alert`, `activity`, `lock`, `key`, `shield`, `circle`, `eye`, `eye-off` |
@@ -31,4 +31,9 @@
`camera` обозначает оптический канал, а `plan` — пространственное представление сверху. Оба glyph контурные и используют общую stroke-геометрию набора.
`layers` открывает управление видимостью слоёв карты или визуального источника.
Применение подтверждено владельцем Mission Core 10.09.2026: кнопка слоёв в
заголовке карты Центра наблюдения. `settings` остаётся общей конфигурацией.
Кнопка наследует обычные hover, focus, disabled и active-состояния `IconButton`.
`play` и `stop` — компактные полнотелые транспортные glyph: залитый треугольник запуска и залитый квадрат остановки/паузы. Видимая текстовая подпись не требуется, но action обязан сохранить доступный `aria-label`.
+3 -1
View File
@@ -726,11 +726,12 @@ textarea.nodedc-field__control {
.nodedc-switch__track {
display: flex;
flex-shrink: 0;
width: 2rem;
height: 1.12rem;
align-items: center;
border-radius: var(--nodedc-radius-circle);
background: rgba(255, 255, 255, 0.14);
background: color-mix(in srgb, var(--nodedc-text-primary) 14%, transparent);
padding: 0.14rem;
transition: background var(--nodedc-duration-normal) var(--nodedc-ease-standard);
}
@@ -748,6 +749,7 @@ textarea.nodedc-field__control {
}
.nodedc-switch[aria-checked="true"] .nodedc-switch__track > span {
background: rgb(var(--nodedc-on-accent-rgb));
transform: translateX(0.88rem);
}
+2
View File
@@ -22,6 +22,7 @@ import {
Image,
Inbox,
KeyRound,
Layers,
LayoutDashboard,
ListChecks,
LocateFixed,
@@ -80,6 +81,7 @@ const icons = {
image: Image,
inbox: Inbox,
key: KeyRound,
layers: Layers,
list: ListChecks,
target: LocateFixed,
lock: LockKeyhole,
+3 -1
View File
@@ -423,6 +423,7 @@
"variants": ["14 px", "16 px", "18 px"],
"rules": [
"Use semantic names from registry/icons.json.",
"Use layers for visibility controls of map or visual source layers; settings remains general configuration.",
"The containing component owns surface, hit target and state; the icon owns only the glyph and uses the canonical 16 px default without an extra CSS scale.",
"Do not copy complete Lucide or Font Awesome catalogs into an application."
]
@@ -501,7 +502,8 @@
"The card owns grouping geometry but not product form schemas.",
"Use align=center for compact result or empty messages: center the content on both axes and omit an empty body. The default start layout remains unchanged.",
"Section and empty-state titles use the compact md token; descriptions use sm. Page/window title sizes and browser heading defaults are forbidden inside cards.",
"Use Switch for compact visibility/enable states; use Checker for the Engine inspector treatment."
"Use Switch for compact visibility/enable states; use Checker for the Engine inspector treatment.",
"Switch keeps its track width beside wrapped labels. The checked thumb uses on-accent contrast; the unchecked track follows theme text instead of a fixed white tint."
]
},
{
+1 -1
View File
@@ -12,7 +12,7 @@
"id": "window-layer",
"label": "Окно и слой",
"referenceSources": ["launcher", "engine"],
"names": ["close", "plus", "expand", "minimize", "refresh", "panel", "apps"]
"names": ["close", "plus", "expand", "minimize", "refresh", "panel", "apps", "layers"]
},
{
"id": "navigation",