fix(ui): add layer icon and preserve switch contrast
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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
@@ -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`.
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user