diff --git a/README.md b/README.md index 7353f53..abb8a9c 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ - **Поиск** по названию, тегам, типу сервиса и родительским разделам - **4 режима отображения**: плитки, список, компактные плитки, компактный список - **Темы**: светлая / тёмная, 4 пресета акцента + свой градиент +- **Узоры панелей** — соты, точки, сетка и др.; отдельные варианты для светлой темы; можно отключить - **Настройки** через popup (иконка ⚙) - **Изменяемая ширина** бокового меню и **высота** верхней шапки (drag, можно скрыть ручки) - **Габариты** — лимиты ширины контента, меню и шапки (⚙, для администратора) @@ -126,6 +127,29 @@ ecosystem/ "theme": "dark", "view": "cards", "accent": "violet", + "customAccentFrom": "#8b5cf6", + "customAccentTo": "#22d3ee", + "customAccentAngle": 135, + "panelPatternNav": "hex", + "panelPatternNavOpacity": 70, + "panelPatternNavHeight": 45, + "panelPatternNavGradientOpacity": 80, + "panelPatternNavGradientHeight": 40, + "panelPatternSection": "hex", + "panelPatternSectionOpacity": 70, + "panelPatternSectionHeight": 45, + "panelPatternSectionGradientOpacity": 80, + "panelPatternSectionGradientHeight": 40, + "panelPatternGroup": "none", + "panelPatternGroupOpacity": 70, + "panelPatternGroupHeight": 45, + "panelPatternGroupGradientOpacity": 80, + "panelPatternGroupGradientHeight": 40, + "panelPatternItem": "none", + "panelPatternItemOpacity": 70, + "panelPatternItemHeight": 45, + "panelPatternItemGradientOpacity": 80, + "panelPatternItemGradientHeight": 40, "showNumbers": false, "showTreeTags": true, "showTreeType": false, @@ -146,7 +170,8 @@ ecosystem/ "catalogListColumns": 1, "catalogCompactCardsColumns": 5, "catalogCompactListColumns": 3, - "searchPlaceholder": "Grafana, S3, журнал, сервер..." + "searchPlaceholder": "Grafana, S3, журнал, сервер...", + "settingsPanelWidth": 460 }, "limits": { "shellMaxWidth": { "min": 1200, "max": 3840 }, @@ -173,7 +198,8 @@ ecosystem/ "allowSidebarResize": true, "allowLayoutLimitsChange": true, "allowThemeChange": true, - "allowAccentChange": true + "allowAccentChange": true, + "allowPanelPatternChange": true } } ``` @@ -189,6 +215,13 @@ ecosystem/ | `customAccentFrom` | `#rrggbb` | Цвет «от» для `accent: "custom"` (по умолчанию `#8b5cf6`) | | `customAccentTo` | `#rrggbb` | Цвет «до» для `accent: "custom"` (по умолчанию `#22d3ee`) | | `customAccentAngle` | `0`–`360` | Угол градиента в градусах (по умолчанию `135`) | +| `panelPatternNav` … `panelPatternItem` | см. [узоры панелей](#узоры-панелей) | Тип узора для каждого типа блоков (`none`, `hex`, …) | +| `panelPattern{Nav\|Section\|Group\|Item}Opacity` | `0`–`100` | Прозрачность узора в % (по умолчанию `70`) | +| `panelPattern{Nav\|Section\|Group\|Item}Height` | `0`–`100` | Высота узора в % (по умолчанию `45`; `0` — скрыть) | +| `panelPattern{Nav\|Section\|Group\|Item}Fade` | `0`–`100` | Ширина зоны затухания узора в % высоты блока: `0` — резкий обрыв на линии высоты, `100` — плавное затухание от верха (по умолчанию `10`) | +| `panelPattern{Nav\|Section\|Group\|Item}GradientOpacity` | `0`–`100` | Прозрачность акцентного градиента в % (по умолчанию `80`) | +| `panelPattern{Nav\|Section\|Group\|Item}GradientHeight` | `0`–`100` | Высота градиента в % (по умолчанию `40`) | +| `panelPattern{Nav\|Section\|Group\|Item}GradientFade` | `0`–`100` | Зона затухания градиента (по умолчанию `8`) | | `showNumbers` | `true`, `false` | Показывать номера разделов, подразделов и элементов | | `showTreeTags` | `true`, `false` | Теги элементов в дереве (оформление как на карточках) | | `showTreeType` | `true`, `false` | Подпись типа сервиса в дереве | @@ -210,6 +243,7 @@ ecosystem/ | `catalogCompactCardsColumns` | см. `limits.catalogCompactCardsColumns` | Колонок в строке в режиме «Компакт плитки» | | `catalogCompactListColumns` | см. `limits.catalogCompactListColumns` | Колонок в строке в режиме «Компакт список» | | `searchPlaceholder` | произвольная строка | Текст-подсказка в поле поиска | +| `settingsPanelWidth` | `limits.settingsPanelWidth` (по умолчанию `320`–`720`) | Ширина popup настроек в px (по умолчанию `460`) | | `limits` | Формат | Описание | |----------|--------|----------| @@ -243,6 +277,7 @@ ecosystem/ | `allowLayoutLimitsChange` | `true`, `false` | Раздел ⚙ «Габариты»: лимиты ширины контента и навигации | | `allowThemeChange` | `true`, `false` | Светлая / тёмная тема | | `allowAccentChange` | `true`, `false` | Пресеты и свой градиент | +| `allowPanelPatternChange` | `true`, `false` | Выбор узора панелей в ⚙ → Оформление | Пользовательские изменения сохраняются в `localStorage`, но заблокированные `features` всегда возвращаются к `defaults`. @@ -404,11 +439,11 @@ Popup сгруппирован по разделам. Доступные бло | Раздел | Настройки | |--------|-----------| -| **Макет** | **Сбоку** / **Сверху**; toggle «Показывать дерево»; toggle «Ручки изменения размера» | +| **Макет** | **Сбоку** / **Сверху**; toggle «Показывать дерево»; toggle «Ручки изменения размера»; слайдер «Ширина настроек» | | **Габариты** | Лимиты ширины контента, меню и шапки (сворачиваемый блок; при `allowLayoutLimitsChange`) | | **Каталог** | Вид карточек, колонок в строке для каждого вида, нумерация | | **Дерево** | Колонок 1–6, теги, тип, расположение мета, авто-раскрытие (при `showTree: true`) | -| **Оформление** | Тема, акцент, свой градиент | +| **Оформление** | Тема, акцент, узор панелей, свой градиент | ### Режим «Сверху» @@ -427,6 +462,35 @@ Popup сгруппирован по разделам. Доступные бло Значения сохраняются в `localStorage`. +### Узоры панелей + +Настраиваются в ⚙ → **Оформление** (если `allowPanelPatternChange: true`): четыре схлопывающиеся панели — **Панель навигации**, **Раздел**, **Подраздел**, **Элемент**. В каждой — свой тип узора и слайдеры. + +| Значение `panelPattern*` | Описание | +|--------------------------|----------| +| `none` | Без узора — только акцентный градиент (если применим) | +| `hex` | Соты | +| `dots` | Точечная сетка | +| `grid` | Линейная сетка | +| `diagonal` | Диагональные полосы | +| `cross` | Перекрёстная штриховка | +| `mesh` | Точки цвета акцента | + +По умолчанию для **навигации** и **разделов** — `hex`; для **подразделов** и **элементов** — `none`. + +| Панель | Preference (префикс) | DOM | +|--------|----------------------|-----| +| Панель навигации | `panelPatternNav*` | `.hero-content` | +| Раздел | `panelPatternSection*` | `.catalog-section` | +| Подраздел | `panelPatternGroup*` | `.catalog-group` | +| Элемент | `panelPatternItem*` | `.nav-card` — только узор, без акцентного градиента | + +В каждой панели (кроме «Элемент») — шесть слайдеров: прозрачность, высота и **переход** узора; то же для градиента. Для «Элемент» — три слайдера узора (без градиента). **Переход** задаёт ширину зоны затухания: `0%` — резкий обрыв на линии «высоты», большее значение — более плавное исчезновение (при значении ≥ высоты узор растворяется от самого верха блока). + +Старые ключи (`panelPattern`, `panelPatternOnNav`, …) при загрузке автоматически мигрируют в per-target формат, если в `localStorage` ещё нет `panelPatternNav`. + +Значения сохраняются в `localStorage` и выставляют `data-panel-pattern-*` на `` и CSS-переменные `--panel-pattern-{nav|section|group|item}-*`, `--panel-gradient-{target}-*`. + ## Поведение интерфейса ### Поиск @@ -464,7 +528,7 @@ Popup сгруппирован по разделам. Доступные бло | Ключ | Содержимое | |------|------------| -| `ecosystem-panel-preferences` | Тема, акцент, вид, ширина sidebar, toggle-настройки | +| `ecosystem-panel-preferences` | Тема, акцент, узор, вид, колонки каталога, ширина sidebar, toggle-настройки | | `ecosystem-panel-collapse-state` | Раскрытые/свернутые ветки дерева и каталога | ## Разработка diff --git a/examples/flat/index.html b/examples/flat/index.html index 4d80fc9..f1aa308 100644 --- a/examples/flat/index.html +++ b/examples/flat/index.html @@ -126,6 +126,11 @@ +
@@ -368,6 +373,114 @@ +
+

Узор и градиент настраиваются отдельно для каждого типа блоков.

+
+ + Панель навигации + + +
+

Боковое меню и дерево

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Раздел + + +
+

Карточки верхнего уровня каталога

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Подраздел + + +
+

Группы внутри раздела

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Элемент + + +
+

Карточки сервисов — только узор, без акцентного градиента

+
+ + + + + + + +
+
+ + + +
+
+
+
+ +
+

Узор и градиент настраиваются отдельно для каждого типа блоков.

+
+ + Панель навигации + + +
+

Боковое меню и дерево

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Раздел + + +
+

Карточки верхнего уровня каталога

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Подраздел + + +
+

Группы внутри раздела

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Элемент + + +
+

Карточки сервисов — только узор, без акцентного градиента

+
+ + + + + + + +
+
+ + + +
+
+
+
+ +
+

Узор и градиент настраиваются отдельно для каждого типа блоков.

+
+ + Панель навигации + + +
+

Боковое меню и дерево

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Раздел + + +
+

Карточки верхнего уровня каталога

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Подраздел + + +
+

Группы внутри раздела

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Элемент + + +
+

Карточки сервисов — только узор, без акцентного градиента

+
+ + + + + + + +
+
+ + + +
+
+
+
+ +
+

Узор и градиент настраиваются отдельно для каждого типа блоков.

+
+ + Панель навигации + + +
+

Боковое меню и дерево

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Раздел + + +
+

Карточки верхнего уровня каталога

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Подраздел + + +
+

Группы внутри раздела

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Элемент + + +
+

Карточки сервисов — только узор, без акцентного градиента

+
+ + + + + + + +
+
+ + + +
+
+
+
+ +
+

Узор и градиент настраиваются отдельно для каждого типа блоков.

+
+ + Панель навигации + + +
+

Боковое меню и дерево

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Раздел + + +
+

Карточки верхнего уровня каталога

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Подраздел + + +
+

Группы внутри раздела

+
+ + + + + + + +
+
+ + + + + + +
+
+
+ +
+ + Элемент + + +
+

Карточки сервисов — только узор, без акцентного градиента

+
+ + + + + + + +
+
+ + + +
+
+
+
+