Repository navigation
[Feature] Vue-менеджер: визуальная согласованность с MODX (цвета, кнопки, отступы) #615
Description
Источник
Обратная связь сообщества (тема MiniShop3: обратная связь от разработчиков):
- Сергей Карпович (19.08.2026) — «инородный» Vue в MODX: зелёный, размеры кнопок, рамки/отступы. Пример: «Товар» → «Свойства товара».
- Алексей Наумов (20.08.2026) — 2–3 зелёных + синий в опциях, дубль «Данные товара», прыгающие отступы в «Утилиты», max-width заголовков.
Цитата (Сергей)
Vue-интерфейс выглядит «инородным» в MODX: другой оттенок зелёного, разные размеры кнопок на одной странице, лишние рамки и отступы. Пример: вкладка «Товар» → «Свойства товара» — секции в общей рамке, на других вкладках иначе.
Цитата (Алексей)
Интерфейс сильно выделяется из нативного modx, цветовой гаммой, как минимум 2 или 3 вида зеленого цвета, синий в опциях выскакивает.
Большие отступы, местами лишние рамки, не понимаю зачем еще один заголовок «Данные товара» на вкладке «Свойства товара» + рамка и отступы там же.
Еще отступы прыгают в разделе Утилиты, там на каждой вкладке свой отступ.
Мелкий баг … нужно ограничить макс. ширину заголовка.
Маппинг feedback → findings
| Жалоба | Finding # |
|---|---|
| 2–3 зелёных + синий | #1, #6, #13 |
| Разные размеры кнопок | #8 |
| Рамки / «Данные товара» | #2 |
| Отступы прыгают в Утилитах | #5 |
| Max-width заголовка | #9 |
(аудит) label/for, Options tab, vtabs, Uppy, EN toasts, checkbox name, WCAG |
#3, #4, #7, #10–#14 |
better-interface audit (full) — root @ project.test (20.08.2026)
Mode: full · Scope: Vue Manager MiniShop3 (все entry-экраны + resource product/category Vue-вкладки), включая narrow ~900px, empty/loading/error где доступны · Stack: Vue 3 + PrimeVue 4 Aura + --ms3-* (vueManager/src/scss/_variables.scss) · Boundary: не ExtJS chrome вне Vue; не pixel-perfect clone.
refactoring-ui diagnostic: 3/10
Failed: hierarchy (1), grayscale/personality (2), whitespace (3), spacing system (5), truncation (6), contrast (7), personality (10).
Passed: elevation not primary (8), loading/empty Messages/empty-message present in key flows (9).
Coverage
| Domain | Evidence inspected | Result |
|---|---|---|
| Accessibility | ProductDataFields for/id live; ProductOptionsTab vtabs; CategoryProductsGrid checkbox; WCAG ratios on primary buttons |
4 findings |
| Layout | ProductDataFields Card/Fieldset; Utilities padding; Uppy; narrow 900/1100/1400 | 3 findings |
| Writing | CategoryOptionsTab EN toasts; Help lexicon «здесь» | 2 findings |
| Typography | Utilities title truncate CSS absent (live inject) | 1 finding |
| Colors | Live hex + WCAG contrast matrix Aura/success/MODX/accent | 3 findings |
| UI | Button heights; Uppy; Aura sans MODX preset | folded into Colors/Layout |
Findings
| # | Severity | Domain | Location | Before | After | Why |
|---|---|---|---|---|---|---|
| 1 | HIGH | Colors | _variables.scss:68; entries/*.js preset: Aura; live all Vue |
--p-primary #10b981 + --ms3-accent-primary #3b82f6 + success #22c55e + MODX save #6cb24a |
One MODX-aligned primary via definePreset; accent == primary or dual documented |
Три зелёных + синий на одном экране (order #966) |
| 2 | HIGH | Layout | ProductDataFields.vue:240-321 |
Card title «Данные товара» + Fieldsets + padding: 1.25rem |
Drop Card/title; flat sections; --ms3-spacing-* |
Дубль H* на вкладке «Свойства»; live id=2021 |
| 3 | HIGH | Accessibility | ProductDataFields.vue:285,300 vs DynamicField.vue:319-321 |
:for="field.name" vs id="df-field-{name}" |
:for = fieldHtmlId |
Live 12/12 labels broken |
| 4 | HIGH | Accessibility | AdminOptionFields.php:189 + MySQL ONLY_FULL_GROUP_BY |
GROUP BY msOption.id + non-agg msCategoryOption.* → option_fields=[] |
Fix SELECT/GROUP BY (ANY_VALUE/subquery) | Вкладка «Опции товара» скрыта при default sql_mode; после temp drop — vtabs OK; sql_mode restored |
| 13 | HIGH | Colors | Live orders primary/success buttons; tokens #10b981/#22c55e |
White on Aura 2.54:1; white on success 2.28:1 (WCAG AA fail; large also fail) | Darker primary that passes ≥4.5:1 (or ≥3:1 UI + verified). Note: raw MODX #6cb24a also 2.59:1 — не копировать hex вслепую |
Системный fail на всех primary/success controls |
| 5 | MEDIUM | Layout | UtilitiesPage.vue:140 + children 20/16px |
Shell + child padding | One page padding; children 0 |
Live pad jump |
| 6 | MEDIUM | Colors | ProductOptionsTab.vue:170-171; ProductOptionField.vue:453-454; CategoryOptionsTab.vue:417 |
#10b981 fallback / inline |
Token only | Live category checks + product vtab active |
| 7 | MEDIUM | UI | GalleryUploader.vue:141 |
Uppy height: 400 |
Compact (#616) | Live h=400 |
| 8 | MEDIUM | UI | Order/Settings/Utilities/CategoryOptions | sm 28–30 vs default 36 vs icon 24–32 | One size/page | Live order Recalc 30 / Save 36 |
| 9 | MEDIUM | Typography | UtilitiesPage.vue:152-157 |
text-overflow: clip; no max-width |
ellipsis + title |
Нет truncate CSS |
| 10 | MEDIUM | Accessibility | ProductOptionsTab.vue:74-111 |
no aria-controls; tabs tabIndex=0; ArrowDown no-op |
APG vertical tabs | Live product 22 |
| 11 | MEDIUM | Accessibility | CategoryProductsGrid.vue:971 |
<Checkbox :value="product" /> → name [object Object] |
inputId + aria-label с pagetitle |
Live category 12 «Товары» |
| 12 | LOW | Writing | CategoryOptionsTab.vue toasts |
Order saved / Added / Removed |
Lexicon ru/en | Voice break |
| 14 | LOW | Writing | lexicon/ru/help.inc.php:29 (+ en here) |
Link text «здесь» / «here» | Meaningful link text (реквизиты / details on modx.pro) | Help page live |
Considered but Rejected
| Location | Candidate | Rejected because |
|---|---|---|
| PrimeVue → ExtJS clone | Pixel-match MODX 2 | Out of scope: native-enough |
| hex → OKLCH | Notation migration | Project uses hex tokens |
HelpPage multi-Card |
Flatten | Intentional content cards |
| Settings tabs @900px (~11px overflow) | Force wrap/hide | Mild; PrimeVue tablist scroll acceptable; no page hscroll |
Match primary exactly to #6cb24a |
Blind copy | That hex also fails WCAG white-on-green (~2.59); need darker shade |
| Delete audit_* fixtures on cat 12 | Cleanup | Left for repro #4/#6/#10 |
Verification
Passed (live, root / test12345678):
| Check | Result |
|---|---|
| Orders / Order #966 / Customers / Settings / Utilities×6 / Notifications / Help | Vue mounted; primary #10b981 |
| Product 2021 Свойства + Галерея | Card+for/id; Uppy 400 |
| Product 22 Опции (temp sql_mode) | vtabs; active #10b981; ArrowDown no move; sql_mode restored |
| Category 12 Настройки → options | #10b981 checks; buttons 36/32 |
| Category 12 Товары | checkbox name [object Object] |
| Order #966 | blue #3b82f6 + emerald + success on one screen |
| WCAG spot (orders) | white/#10b981=2.54; white/#22c55e=2.28; white/#3b82f6=3.68; white/#6cb24a=2.59 |
| Narrow 900 / 1100 / 1400 | no document hscroll on Utilities/Settings/Help/Notifications; Settings tablist slight overflow only |
| Empty/loading code paths | ProductDataFields Message loading/no fields; CategoryOptionsTab/OptionsGrid .empty-message; Uppy noFilesFound |
| Customers filter nonsense query | grid updates (rows drop); empty copy not always via .p-datatable-emptymessage |
Notes:
- Audit fixtures on
project.test: groups «Аудит:*», keysaudit_*, category 12 - APCA full matrix: not run (WCAG 2.x ratios above)
- Formal 320px mobile: N/A (MODX manager desktop)
Verdict
Block — HIGH #1–#4, #13 remain.
Live matrix (экраны)
| Экран | Primary / extras | Кнопки | Notes |
|---|---|---|---|
| Заказы | #10b981 + success #22c55e |
30/28 | WCAG fail на primary/success |
| Заказ #966 | + accent #3b82f6 |
36/30 | dual palette |
| Клиенты / Настройки / Утилиты / Help / Notifications | #10b981 |
mix | |
| Товар 2021 | + MODX #6cb24a |
— | Card; for≠id; Uppy 400 |
| Товар 22 Опции | active #10b981 |
— | sql_mode blocker |
| Cat 12 options | check #10b981 |
36/32 |
Утилиты padding (shell 20px + child)
| Вкладка | Child pad |
|---|---|
| Галерея / Импорт / Гриды / Поля товара | 20px |
| Свои поля / Поля форм | 16px |
Пакеты работ (PR)
| PR | Scope | Findings |
|---|---|---|
| A. Tokens + contrast | definePreset; darker AA-safe primary; unify accent; drop #10b981 |
#1, #6, #13 |
| B. Product data | Remove Card/title; fix for/id | #2, #3 |
| C. Bug option_fields | AdminOptionFields GROUP BY |
#4 |
| D. Chrome polish | Utilities pad; buttons; ellipsis; Uppy; vtabs APG; checkbox label; lexicon | #5, #7–#12, #14 |
Файлы-якоря
_variables.scss,entries/*.js,main.jsProductDataFields.vue,DynamicField.vueProductOptionsTab.vue,ProductOptionField.vue,CategoryOptionsTab.vueAdminOptionFields.phpUtilitiesPage.vue+ tab childrenGalleryUploader.vueOrderInfoTab.vue,CategoryProductsGrid.vue:971lexicon/*/help.inc.php
Критерии приёмки
- Vue primary ≈ MODX green и white-on-primary ≥ 4.5:1 (не слепой
#6cb24a) - Нет тройного зелёного + синего accent на chrome
-
--p-primary==--ms3-accent-primary(или dual documented) - «Свойства товара» без Card/дубля;
for==id -
getOptionFields()OK приONLY_FULL_GROUP_BY - Утилиты: одинаковый inset ×6
- Button heights consistent per page
- Options vtabs: arrows +
aria-controls - Titles: ellipsis + tooltip
- Uppy compact ([Feature] Галерея товара: компактный uploader и сортировка загрузки по имени файла #616)
- Category products checkbox accessible name ≠
[object Object] - Help links: meaningful text (не «здесь»)
Связанные issues
- [Feature] Tracker: убрать ExtJS shell менеджера (resource forms + tab panels + ms3.combo) #521 · [Feature] Не согласована логика создания и отображения дополнительных полей в админке #214 · [Bug] Не работает сортировка секций #611 · [Feature] Галерея товара: компактный uploader и сортировка загрузки по имени файла #616 · [Feature] Docs: cookbooks и примеры для extra fields, model-fields и grid-config #617
Out of scope
- Pixel-perfect ExtJS clone · CHANGELOG rewrite · OKLCH-only migration
Activity
fix(mgr): align Vue Manager visuals with MODX chrome
fix(mgr): align Vue Manager visuals with MODX chrome
fix(mgr): align Vue Manager visuals with MODX chrome
fix(mgr): align Vue Manager visuals with MODX chrome
fix(mgr): визуальная согласованность Vue-менеджера с MODX (#621)