Канон тостов и шапка-мобильник: bottom-right + accent-полоска + icon-only CTA #38

Merged

ant merged 7 commits from feat/notif-mobile-canon into dev 2026-05-28 11:57:01 +00:00

Conversation 0 Commits 7 Files Changed 19

+566 -265

claude commented 2026-05-28 06:23:49 +00:00

Owner

Copy Link

Copy Source

Что меняется

1. Уведомления (SuccessAlert / FailAlert / NotifyAlert)

Единый canon-визуал для всех Quasar Notify-тостов через override .q-notification в quasar-canon.css.

• Позиция — bottom-right (правый нижний, как в mono-design-system/v2 → toast-host: fixed; bottom: 24px; right: 24px). Раньше — top-right, что противоречило канону.
• Контейнер — нейтральная поверхность --p-surface + рамка --p-line-1 + 3px accent-полоска слева по типу (--p-pos / --p-neg / --p-warn / --p-info). Без «цветной заливки карточки» (stop-signal §19.1 UX-spec).
• SuccessAlert — type: 'positive' вместо color: 'primary' (раньше успех красился брендовым teal, а не позитивным зелёным).
• NotifyAlert (in-app push от Novu) — иконка notifications по умолчанию, чтобы визуально совпадать с Success/Fail.
• На мобильном тост идёт full-width минус 16px полей.

2. Шапка на мобильнике

@media (max-width: 600px) в quasar-canon.css:

• .topbar__actions .base-btn__label { display: none } — CTA-кнопки страницы в шапке сворачиваются до иконки.
• .topbar__brand b — max-width: 50vw + ellipsis, чтобы длинное название кооператива не растекалось.

Раньше кнопки в шапке (например «Создать вопрос», «Перевести») переносились на вторую строку на узких экранах. Теперь — централизованное правило, страницы не дублируют пропсы.

Test plan

• Зайти на /signin → нажать «Войти» с пустыми полями → красный FailAlert в правом нижнем углу с нейтральным фоном и красной полоской слева.
• Любое успешное действие (например подпись повестки) → зелёный SuccessAlert в правом нижнем углу.
• Открыть на ширине ≤600px стол председателя → кнопка «Создать вопрос» в шапке стала icon-only, бренд-название с ellipsis.
• In-app push от Novu приходит — выглядит как обычный тост с иконкой колокольчика (или avatar если есть).

🤖 Generated with Claude Code

## Что меняется ### 1. Уведомления (`SuccessAlert` / `FailAlert` / `NotifyAlert`) Единый canon-визуал для всех Quasar Notify-тостов через override `.q-notification` в `quasar-canon.css`. - **Позиция** — `bottom-right` (правый нижний, как в `mono-design-system/v2 → toast-host: fixed; bottom: 24px; right: 24px`). Раньше — `top-right`, что противоречило канону. - **Контейнер** — нейтральная поверхность `--p-surface` + рамка `--p-line-1` + 3px accent-полоска слева по типу (`--p-pos` / `--p-neg` / `--p-warn` / `--p-info`). Без «цветной заливки карточки» (stop-signal §19.1 UX-spec). - **SuccessAlert** — `type: 'positive'` вместо `color: 'primary'` (раньше успех красился брендовым teal, а не позитивным зелёным). - **NotifyAlert** (in-app push от Novu) — иконка `notifications` по умолчанию, чтобы визуально совпадать с Success/Fail. - На мобильном тост идёт full-width минус 16px полей. ### 2. Шапка на мобильнике `@media (max-width: 600px)` в `quasar-canon.css`: - `.topbar__actions .base-btn__label { display: none }` — CTA-кнопки страницы в шапке сворачиваются до иконки. - `.topbar__brand b` — `max-width: 50vw` + ellipsis, чтобы длинное название кооператива не растекалось. Раньше кнопки в шапке (например «Создать вопрос», «Перевести») переносились на вторую строку на узких экранах. Теперь — централизованное правило, страницы не дублируют пропсы. ## Test plan - [ ] Зайти на `/signin` → нажать «Войти» с пустыми полями → красный FailAlert в правом нижнем углу с нейтральным фоном и красной полоской слева. - [ ] Любое успешное действие (например подпись повестки) → зелёный SuccessAlert в правом нижнем углу. - [ ] Открыть на ширине ≤600px стол председателя → кнопка «Создать вопрос» в шапке стала icon-only, бренд-название с ellipsis. - [ ] In-app push от Novu приходит — выглядит как обычный тост с иконкой колокольчика (или avatar если есть). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude added 1 commit 2026-05-28 06:59:46 +00:00

[design-wave2][@ant] fix: канон тостов и шапка-мобильник — bottom-right + accent-полоска, icon-only CTA ... e0e846c24b

- SuccessAlert/FailAlert/NotifyAlert (shared/api/alerts.ts): единый
  визуал через override .q-notification в quasar-canon.css. Нейтральная
  поверхность + 3px accent-полоска по типу (positive/negative/warning
  /info), без «цветной заливки карточки» (stop-signal §19.1).
- Позиция тостов bottom-right — было top-right, что противоречило
  канону mono-design-system v2 (toast-host: fixed; bottom: 24px;
  right: 24px). На мобильнике — full-width минус 16px полей.
- SuccessAlert: type:'positive' вместо color:'primary' — раньше успех
  красился брендовым teal, а не позитивным зелёным.
- NotifyAlert: дефолтная иконка notifications, если нет avatar — чтобы
  in-app push от Novu визуально совпадал с Success/Fail.
- Topbar @media (max-width:600px): .topbar__actions .base-btn__label
  скрыт, остаются только иконки CTA-кнопок страницы. Бренд-название
  с ellipsis (max-width: 50vw). Раньше кнопки переносились на вторую
  строку на узких экранах.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

claude force-pushed feat/notif-mobile-canon from 15f9c228ef to e0e846c24b 2026-05-28 06:59:46 +00:00 Compare

claude added 1 commit 2026-05-28 07:48:44 +00:00

[design-wave2][@ant] fix: канон тостов под shared/MONO Design System.html + dev/ui демо ... 45ef337201

- quasar-canon.css: переписан override .q-notification под реальный
  канон (shared/MONO Design System.html → .toast): тёмный фон
  (var(--p-ink) для нейтрального; #052e16/#4c0a0a/#3d2400/#0c1e3f
  для positive/negative/warning/info), светлый текст, ЦВЕТНАЯ иконка
  по типу (--p-pos/--p-neg/--p-warn/--p-info). Раньше ошибочно был
  сделан нейтральный фон + left-accent-полоска — «откуда попало»,
  не из канона.
- alerts.ts: убран color: 'grey-7'/'positive' у actions — они
  наследуют светлый тон от тёмного фона через override.
- _dev/ui секция 39 «Тосты»: пять кнопок для триггера всех типов
  тостов (успех, успех с CTA, ошибка, in-app push, push с avatar).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

claude added 1 commit 2026-05-28 08:34:08 +00:00

[design-wave2][@ant] fix: AddMember/CreateBranch — canon micro в шапке на мобиле ... c29c3720d2

CSS-хак `.topbar__actions .base-btn__label { display: none }` не покрывал
эти две кнопки: они рисуют q-btn напрямую через registerAction (не через
BaseButton под .topbar__actions). В итоге на мобильном «Добавить члена»
и «добавить участок» оставались с лейблами и распирали шапку.

Перевёл обе в canon-паттерн как CreateMeetButton/DepositButton/WithdrawButton:
isMobile → flat+dense+sm+accent, иконка + q-tooltip; без обёртки
.header-action, чтобы кнопка не растягивалась на всю высоту шапки.

claude added 1 commit 2026-05-28 08:44:34 +00:00

[design-wave2][@ant] fix: остальные header-кнопки в canon micro-режим ... ecd895e745

Аудит точек установки в шапку — два механизма:
1. registerAction(useHeaderActions) — Members/Branches/Documents/Agenda
   /Participants/CoopWallets/powerup.Settings;
2. Teleport to=#header-actions-host — PaymentMethods/Documents/Wallet/Meets.

Уже в каноне: SearchHeaderAction, CreateMeetButton, DepositButton,
WithdrawButton, AddPaymentButton, AddMemberButton, CreateBranchButton.

Доделал остальные:
- CreateProjectButton (Предложить повестку);
- AddUserButton (Добавить пайщика);
- ImportParticipantsButton (Импорт);
- TransferWalletsButton (Перевести между кошельками);
- powerup SettingsPage save-кнопка (через computed + watch на isMobile).

Капитал-расширение по правилу проекта не трогаю.

claude added 1 commit 2026-05-28 09:03:55 +00:00

[design-wave2][@ant] fix: capital header-кнопки в canon micro-режим ... 82478155ce

Завершаю аудит — добавил capital по запросу:
- RouteMenuButton получил опциональный icon-проп; на мобильном
  превращается в round-иконку + tooltip, на десктопе — flat + label.
- В ProjectPage и ComponentPage прописал material-иконки для каждого
  раздела (Описание/Артефакты/Компоненты/План/Участники/История/
  Задачи/Голосование/Результаты).
- ImportContributorButton, ImportContributorsButton, FilterDialogWithButton
  переведены в canon-micro (isMobile → flat+dense+sm+accent + tooltip).
  Заодно вынес q-dialog из q-btn-вложенности.

RouteMenuButton по сути — раздельные таб-кнопки навигации; полноценное
UX-решение для capital (вынести в SecondLevelTabs под шапкой) — отдельная
задача, тут только мобильная читаемость шапки.

claude added 1 commit 2026-05-28 09:34:07 +00:00

[design-wave2][@ant] docs: строгое указание использовать дизайн-канон в desktop ... 64fa0d2f97

В CLAUDE.md новый раздел «ДИЗАЙН-КАНОН desktop — ОБЯЗАТЕЛЕН»:
1) HTML-канон ~/blago/production/shared/MONO Design System.html;
2) Живая реализация components/desktop/src/pages/_dev/ui/index.vue.

После компакта забыл, что shared/MONO Design System.html — основной SoT,
и нашёл «канон» в auth-prototype, который НЕ канон — пришлось переверстать
тосты. Фиксирую правило, чтобы не повторять.

claude added 1 commit 2026-05-28 09:45:05 +00:00

[design-wave2][@ant] fix: навигатор — canon clean-up + сохраняем primary ... 0229b639b2

- default.vue: убрал bordered у левого q-drawer (двойная линия с .rail
  border-right из канона) и hardcoded #00800038 (legacy зелёное cooperative)
  → var(--p-line); удалил мёртвый .drawer-close-btn.
- components.css: комментарий .rail__usercard поправлен — там primary,
  а не accent (намеренно: оранжевый в шапочке навигатора отвлекал бы).
- _dev/ui: текст секции AppDrawer привёл к фактическому поведению
  (soft-primary заливка + 2-px deep-teal rail).

Цветовая схема навигатора:
- активный пункт — primary (deep teal #0f766e), 2px rail слева;
- brand-иконка, avatar, balance-блок — primary-soft (не accent);
- никакого accent (оранжевого) в навигаторе.

ant merged commit 8bdc3dd0cd into dev 2026-05-28 11:57:01 +00:00

claude referenced this issue from a commit 2026-06-03 04:52:29 +00:00

[9.5.b] feat(sdk+desktop): Zeus client + ExtensionsShowcase реальный fetch apps-catalog

claude referenced this issue from a commit 2026-06-09 05:48:02 +00:00

[598-32][@ant] fix: авто-обновление столов приёмки marketplace — чтобы закрывающая/первая подпись всплывала сама, без ручной перезагрузки

claude referenced this pull request 2026-06-09 05:48:50 +00:00

Эпик 16: UI-правки Стола заказов + перенумерация реестров АПП + авто-обновление столов приёмки #111

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

ant (Алексей Муравьев) claude valeriy

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: C9S/mono#38