SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
NODEDC_TASKMANAGER/HUI-CANON-AUDIT.md

29 KiB
Raw Blame History

HUI CANON AUDIT

Документ фиксирует аудит экранов и dropdown-механик NODE.DC после внедрения HDESIGN-CODE.md и HDROPDOWN-CANON.md.

Текущий активный техдолг по незавершенной миграции dropdown-layer:

Цель:

  • увидеть все экраны проекта в одном месте
  • отделить каноничные shared-dropdown от legacy-механик
  • понять, какие страницы уже близки к канону, а какие ещё живут на старом слое
  • перейти от точечных UI-фиксов к этапной стандартизации

Текущий канон

Каноничные dropdown-stack

  • Selection dropdown
    • StateDropdown
    • PriorityDropdown
    • DateDropdown
    • MemberDropdown
    • Project / Module breadcrumb dropdown
  • Action dropdown
  • Context menu
    • допускается как secondary/right-click слой
    • не должен быть основным видимым dropdown у кнопки ...

Legacy-механика

Основной legacy-слой, который ещё не вычищен:

Это не означает, что CustomMenu нужно удалить целиком прямо сейчас. Это означает:

  • новые action dropdown не должны строиться на нём по инерции
  • все пользовательски важные action-menu надо постепенно переводить на shared ActionDropdown
  • CustomMenu должен оставаться только там, где его subtree/submenu-поведение ещё реально нужно и пока не мигрировано

Карта экранов проекта

Ниже список page-route экранов под проектным shell:

Статус по модулям относительно дизайн-канона

Ближе всего к канону

  • Внутренний контур / Issues
    • это основной эталон для карточки, detail-pane, activity, properties и стандартных selection dropdown
    • но и здесь ещё остались legacy action-menu и точечные старые CustomMenu вокруг вторичных UI-мест
  • Хлебные крошки project/module
    • логика уже унифицирована и приведена к кликабельному dropdown-поведению

Частично приведены, но ещё не завершены

  • Внешние контуры
    • основная верстка уже двинута к glass-канону
    • но action-menu и часть secondary popup ещё на legacy-слое
  • Предложения / Intake
    • detail-pane, список, фильтры и modal уже сильно приближены к канону
    • но внутри intake ещё остались локальные CustomMenu участки и sorting/menu-узлы
  • Workspace / Sidebar / Project shell
    • часть shell уже приведена, но sidebar-quick-actions и project/workspace action-menu ещё смешивают старый и новый подход

Основной legacy-кластер

  • Модули
  • Циклы
  • Views
  • Pages
  • Profile
  • Archives
  • часть Calendar / Spreadsheet / Relations / Attachments / Comments

Именно здесь сейчас больше всего старых CustomMenu и action-wrapper-ов.

Оставшиеся legacy dropdown-механики

Ниже список мест, которые ещё не переведены на канон без локальных menu-wrapper решений.

P0. Главные action-menu рабочих сущностей

Это самые важные экраны, потому что они формируют основной UX проекта.

Почему это legacy:

  • все эти места по сути решают одну задачу: показать список действий по кнопке ...
  • часть из них ещё сидит на CustomMenu
  • часть визуально близка к канону, но не использует единый ActionDropdown

Что нужно:

  • перевести их на ActionDropdown
  • оставить ContextMenu только как secondary/right-click слой, если он реально нужен

P1. Action-menu внутри detail / relation / attachment / comments

Почему это важно:

  • это вторичный, но очень частый слой интерфейса
  • пользователь должен видеть те же surface, spacing и placement, что и на карточках задач

P1. Legacy menus в list/group header и табличных видах

Что тут нужно:

  • унифицировать action-menu заголовков, фильтров и group controls
  • не смешивать CustomMenu со старой кнопочной геометрией там, где можно жить на общем action stack

P1. Legacy sorting/order-by dropdown

Это не quick-actions, но это тоже dropdown-узлы, которые стоит перевести на единый selection/sorting-канон, а не держать на разрозненном CustomMenu.

P2. Mobile header legacy menus

Это второй этап после desktop surface.

P2. Workspace / navigation / utility legacy menus

Это уже не P0, но на общем ощущении системы они сказываются сильно.

Экраны, которые ещё нужно перевести на канон по дизайну

Ниже список экранов не только по dropdown, а вообще по UI-канону.

1. Внутренний контур

Статус:

  • основной эталон по board + detail-shell + cards + activity + properties

Осталось:

  • дочистить legacy action-menu вне основной карточки и detail-secondary слоёв
  • добить альтернативные view list / calendar / gantt / spreadsheet
  • добить group headers, spreadsheet header menus, calendar quick add
  • унифицировать secondary popup в relations, attachments, comments

2. Внешние контуры

Статус:

  • cards и detail-shell близки к канону, но модуль ещё не закрыт полностью

Осталось:

  • перевести actions-menu.tsx на тот же action-dropdown канон, если там ещё остались legacy-path
  • проверить дополнительное окно информации и related detail-surface ещё раз по glass/radius/button rules
  • сравнить все detail-row и popup с эталоном Внутреннего контура

3. Предложения / Intake

Статус:

  • сильно продвинуты к канону

Осталось:

  • добить все CustomMenu в create modal и sorting
  • полностью убрать остатки старого menu-wrapper поведения
  • пройти весь flow список -> деталь -> создание -> фильтры -> сортировка ещё раз на единый shell

4. Модули

Статус:

  • legacy

Осталось:

  • list/detail headers
  • quick actions
  • mobile headers
  • order-by/filter dropdown
  • сравнение карточек и action-bars с эталоном Внутреннего контура

5. Циклы

Статус:

  • legacy

Осталось:

  • quick actions
  • list/detail/mobile headers
  • archived cycles header / controls
  • приведение всех dropdown к канону selection/action

6. Views

Статус:

  • legacy

Осталось:

  • quick actions
  • order-by/filters
  • view list header
  • surface/spacing/popup alignment

7. Pages

Статус:

  • legacy

Осталось:

  • page list order-by
  • page actions dropdown
  • editor toolbar popup
  • detail/list header alignment

8. Archives

Статус:

  • partial legacy

Осталось:

  • архивы issues/modules/cycles привести к тем же header, filter, action-menu принципам
  • убрать разные локальные mobile/header menu-path

9. Workspace shell / sidebar / navigation

Статус:

  • partial

Осталось:

  • project/workspace/user/favorites menus
  • единая логика quick actions в sidebar
  • единый visual shell popup на всём workspace слое

10. Profile / Notifications / Active cycles / Analytics / Drafts / Browse / Stickies

Статус:

  • требуется отдельный дизайн-аудит

Это не значит, что там всё сломано. Это значит:

  • эти экраны пока не проходили такой же системный канонический прогон, как Внутренний контур, Внешние контуры и Intake
  • их надо отдельно сверить по dropdown, button, popup, glass shell, toolbar и spacing
  • отдельный приоритет внутри этого блока:
    • Analytics overview
    • Workspace dashboard / Home
    • Drafts
    • Profile
    • Stickies
    • Browse / All issues / Workspace view
    • Settings

Общий список страниц, которые требуют полноценного UI-pass

Порядок рекомендован по приоритету:

  1. Modules list/detail
  2. Cycles list/detail
  3. Views list/detail
  4. Pages list/detail
  5. Archives issues/modules/cycles
  6. Workspace sidebar / project shell / navigation
  7. Profile
  8. Stickies
  9. Analytics
  10. Drafts
  11. Browse
  12. Notifications
  13. Active cycles

Что именно значит "подбить к канону"

Для каждого экрана нужно проверять не только dropdown.

Чек-лист:

  • breadcrumb соответствует канону project/module dropdown
  • toolbar сидит на общем вертикальном ритме
  • filled CTA используют акцент + тёмный текст
  • secondary buttons без лишних outline
  • popup и modal имеют matte black glass shell
  • selection dropdown и action dropdown не смешаны по механике
  • ... и соседние controls имеют совместимую геометрию
  • detail-pane и cards используют shared shell, а не локальную внешнюю заплатку
  • list item spacing и card spacing не выбиваются из эталона
  • create modal / edit modal используют shared modal-input and modal-editor canon
  • mobile header не живёт своей отдельной стилистикой без причины

Предлагаемая этапность миграции

Этап 1. Action-menu миграция P0

Перевести на ActionDropdown:

  • issues layout actions
  • modules quick actions
  • cycles quick actions
  • views quick actions
  • pages actions
  • external contours actions menu

Результат:

  • основной каркас action-menu во всех сущностях будет стандартизирован

Этап 2. Detail widgets и row actions

Перевести:

  • comments
  • relations
  • links
  • attachments
  • sub-issues widgets

Результат:

  • вторичный слой меню перестанет выбиваться из канона

Этап 3. Sorting / order-by / filter popup

Перевести:

  • project/modules/views/pages/inbox sorting
  • group headers
  • spreadsheet/calendar header menus

Результат:

  • selection/sorting popup тоже уйдут с разрозненного legacy слоя

Этап 4. Modules / Cycles / Views / Pages design pass

Сделать полный UI-pass:

  • list
  • detail
  • mobile headers
  • empty states
  • cards
  • top-toolbar
  • modal

Этап 5. Workspace / profile / utility screens

Пройти:

  • workspace sidebar
  • user/project actions
  • profile
  • stickies
  • analytics
  • drafts
  • browse
  • notifications

Главный вывод

Сейчас проект уже не находится в состоянии "везде хаос". Уже есть рабочий канон:

  • breadcrumbs
  • action dropdown
  • selection dropdown
  • Внутренний контур как основной визуальный эталон
  • Внешние контуры и Intake как частично приведённые модули

Но legacy слой ещё большой.

Ключевая проблема не в одном баге dropdown. Ключевая проблема в том, что часть экранов уже живёт на shared-каноне, а часть всё ещё использует старые локальные CustomMenu и menu-wrapper решения.

Значит, следующая правильная работа:

  • не лечить случайные оффсеты по одному
  • а поэтапно переводить оставшиеся экраны на общий dropdown и UI-канон