fix(catalog): title→TopBar + toolbar→tinted bar + table white + font fix
Per user feedback:
- "Справочники 37 шт. эта надпись в топбаре" — title с inline count
переехал в TopBar breadcrumb (новый Crumb.caption field, text-cap mute).
Catalog page больше не имеет h1 — start straight from toolbar.
- "фильтры и кнопки в баре таблицы. бар цветом" — toolbar (scope/bundle
pills + counter + Граф + + Создать) обёрнут в tinted `bg-surface-2`
rounded bar с border. Визуально отделяет controls от table chrome.
- "заголовки таблицы белый фон" — table thead was `bg-surface-2` (cream),
сливалось с toolbar bar. Стало `bg-surface` (white) — clean visual
separation toolbar (tinted) → table (white).
- "→ ссылается шрифт не тот" — InfoPanel section subhead "→ ссылается"
/ "← используют" был `text-cap` (Tektur uppercase 10.5px bold).
Прототип использует regular body Inter lowercase mute. Заменил на
`text-body text-mute`.
TopBar useBreadcrumb extended: для catalog route добавляет inline `caption`
field из useDictionaries() count. Editor route остаётся с mono `subtitle`
("name · v1.0.0"). Different fields rendered с different styles.
This commit is contained in:
@@ -218,19 +218,15 @@ function DictionariesPage() {
|
||||
return (
|
||||
<section
|
||||
aria-label={t('dict.list.heading')}
|
||||
className="space-y-4"
|
||||
className="space-y-3"
|
||||
>
|
||||
{/* PageHeader per redesign: title + inline "N шт." count, без description.
|
||||
Actions удалены — + Создать переехала в toolbar справа от Граф ⇄. */}
|
||||
<div className="flex items-baseline gap-3">
|
||||
<h1 className="text-title-lg text-ink">{t('nav.dictionaries')}</h1>
|
||||
<span className="text-cap text-mute">
|
||||
{data.length} {t('dict.list.countSuffix', { defaultValue: 'шт.' })}
|
||||
</span>
|
||||
</div>
|
||||
{/* Title block убран — "Справочники N шт." переехал в TopBar breadcrumb
|
||||
per user feedback ("эта надпись в топбаре"). Page начинается прямо с
|
||||
tinted toolbar bar, потом white table. */}
|
||||
|
||||
{/* Toolbar per redesign prototype: [scope pills] | [bundle pills] [...] N/M [Граф ⇄] [+ Создать] */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Toolbar in tinted bar per user feedback ("бар цветом").
|
||||
surface-2 (warm cream) визуально отделяет controls от table chrome. */}
|
||||
<div className="flex flex-wrap items-center gap-3 rounded-lg bg-surface-2 border border-line px-3 py-2">
|
||||
{/* Scope filter: PUBLIC / INTERNAL / RESTRICTED — pill chips с border */}
|
||||
<div
|
||||
role="group"
|
||||
@@ -387,9 +383,11 @@ export const uniqueRefBy = (deps: SchemaDependent[]): SchemaDependent[] => {
|
||||
function DictionaryListTable({ rows }: { rows: DictionaryDefinition[] }) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="rounded-lg border border-line overflow-hidden">
|
||||
<div className="rounded-lg border border-line overflow-hidden bg-surface">
|
||||
<table className="w-full">
|
||||
<thead className="bg-surface-2 border-b border-line">
|
||||
{/* White header per user feedback ("заголовки таблицы белый фон").
|
||||
Прошлое bg-surface-2 сливалось с toolbar bar. */}
|
||||
<thead className="bg-surface border-b border-line">
|
||||
<tr>
|
||||
<th scope="col" className="text-cap text-mute text-left px-3 py-2">
|
||||
{t('dict.col.title', { defaultValue: 'Название' })}
|
||||
|
||||
Reference in New Issue
Block a user