fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 31 Wiki Activity

chore: redesign article localization before implementation

Browse Source
This commit is contained in:
Florian Sylvain committed 2026-11-01 14:57:07 +01:00
1 parent 99a74dc3a2
commit 8c4a1825ab
31 files changed
+3365 -882
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/design/components.md
+19 -18
View File
@@ -169,22 +169,23 @@ Accessibility of the tri-state cell:
| BlockedDialog | New | UModal with dismissible false, no close button; UButton primary for the next step | Profile |
Specs: field heights 40 (44 mobile), buttons 36 (44 mobile), card padding 16, section gap 16. Colors from tokens only. Destructive confirm is disabled at 40% opacity until valid. Implemented in AccountCards.dc.html and the AppFrame modal.
## Localization components
All new components use existing theme tokens, square corners, 32px desktop and 44px mobile action targets unless the referenced frame specifies otherwise. Read `localization.md` and the matching `screens/localization-*.md` first.
| Component | Built from | Props, slots and responsive behavior |
## Localization components (spec)
| Component | Built from (Nuxt UI v4) | Notes |
|---|---|---|
| LanguageMenu | UButton + UDropdownMenu, UBadge, UIcon | Readable versions and allowed creation actions; one menu item per action, no nested buttons; bounded scrolling; full language names and selected marker; keyboard focus returns to trigger |
| LocalizedTitle | UForm + UFormField + UInput | Per-version value, language, direction, validation and dirty state; readonly text without update permission; title remains 3–200 characters |
| TranslationDialog | UModal + UForm + UFormField + USelectMenu + UInput + URadioGroup + UAlert + UButton | Language, readable source, title, empty/copy choice; scrollable body; mobile bottom-sheet geometry; preserve entries on errors |
| SourcePane | Custom pane using UButton, UDropdownMenu, UIcon | Readonly article HTML; dir/lang on content; independent overflow; mobile source/edit switch; closing preserves draft and scroll |
| FreshnessBadge | UBadge variant="outline" + refresh icon | Separate from publication badge; text communicates state without color alone |
| ReviewBanner | UAlert + UButton | Capability-gated review, reference and tracked-source actions; unavailable/deleted source states |
| MobileFilterSheet | USlideover side="bottom" + UFormField + USelectMenu + UButton | Site, language, status, author, SEO; apply/clear; active removable chips; URL persistence |
| LocaleTabs | UTabs + UButton + UIcon | Bounded horizontal scrolling, edge cues and named scroll buttons; active tab reachable on keyboard and touch |
| SiteLanguageList | UTable desktop, responsive cards mobile; UDropdownMenu + UBadge | Owner-only mutations; readable metadata without mutation controls; default/disabled markers |
| LocalePager | Existing AppPaginator | Page/size and explicit story/version units; retain existing allowed sizes |
| LocalizationConfirm | Existing confirm dialog using UModal, UAlert, UButton | Language-specific scope; loading/failure; no disclosure of unreadable siblings |
Capability checks belong in existing access helpers/computed state. A generic CapabilityGate framework is not required. Reuse existing typed API client, toast, modal, media and editor components rather than reproducing the mockup helper implementations.
| LanguageMenu | UDropdownMenu with a UButton trigger | Menu button with menu; rows carry badges and a Read only tag; no Add translation row without create permission |
| CapabilityGate | none (logic) | Renders each action from capabilities[]; never from the role name |
| EditorHeader | UButton, UBadge, UDropdownMenu | Title row, then language, badges and actions. At most one filled button. Collapse order and mobile bottom bar in the header priority table |
| TitleInput | UInput (heading size) | Label "Title (French)"; bounds 3 to 200; counter; helper under the field |
| ActionOverflow | UDropdownMenu (desktop), UDrawer (mobile) | Disabled items carry a visible reason |
| StatusBadge | UBadge variant soft | Publication: solid icon plus word |
| FreshnessBadge | UBadge variant outline | Refresh icon plus word; icon-only at 1024 with aria-label |
| SourcePane | UCard | Read-only reference with own scroll and dir/lang. Dashed outline and "Temporary reference" tag |
| TrackedSourceBadge | UBadge variant soft color info | Distinct from the temporary reference |
| ConflictDialog | UModal (desktop), UDrawer (mobile) | Four options; Keep my changes is the only filled button |
| CoverageChips | UBadge variant outline | Collapse after 5 (1440) or 4 (1024, 390) with a +N chip; dashed for missing |
| ListFilters | USelectMenu, UInput, UDrawer on mobile | Language filter groups Enabled and Disabled |
| UnitLabel | plain text, aria-live polite | "8 articles", "4 French versions", "4 articles not in French" |
| RowMenu | UDropdownMenu / UDrawer | Same actions on every width |
| SocialLocaleField | UInput, UBadge | Derived, Set, Not set |
| PublicUrlPattern | UInput, UAlert | Live preview from a real article, validation messages |
| MoveArticlePanel | USelectMenu, UModal | Note lists readable versions only |