Skip to content

feat: unify modal UX with frosted panels, icons and filled focus - #173

Merged
nextestudios merged 3 commits into
mainfrom
feature/172-modal-ux
Sep 27, 2026
Merged

nextestudios merged 3 commits into
mainfrom
feature/172-modal-ux

Conversation

@nextestudios

@nextestudios nextestudios commented Sep 27, 2026 •

Copy link
Copy Markdown
Owner

Summary

One modal system for every modal surface (menus, confirmations, warnings, errors, password/on-screen keyboard, Operations center and details, results, folder-picker menu, Properties, About, controller test/setup, image/text previews):

  • Panel: dimmed page, frosted panel (WinUI acrylic, tint #0C1B2A) with ~22 px corners, thin light edge and ThemeShadow; header with a tone badge icon, title (UIA ControlFS.ModalTitle kept) and context line; divider; scrollable body; footer with the current status message and the controller prompts inside the panel (same ControllerPromptProvider/glyphs, only working actions; the window footer hints fade out without reflow).
  • Rows: full-width option rows with a leading icon + label (+ detail line); focused = filled cyan with dark SemiBold text, scaled 1.025 (non-color cues: fill shape, weight, size). Destructive: red + trailing warning symbol, red fill when focused. Disabled: dimmed, focused shows "Indisponível: reason". Section headings in menus (App menu: Nesta pasta / Exibição / Operações / Controles / ControlFS; item menus: Abrir / Organizar / Favoritos / Esta pasta / Seleção / Informações). Order of items unchanged.
  • Icons in one place: ActionIcon enum + ActionIcons.Glyph (Segoe Fluent/MDL2) + ActionIcons.IsDestructive in Core; MenuItem.Icon/Section, DialogOption.Icon, Modal.Icon/Subtitle, DialogModal.Progress set by AppController (no WinUI in Core/Application). Result/error dialogs get success/warning/error tone.
  • Safety: AppController.SafeInitialFocus guarantees no menu/dialog opens focused on a destructive option. Narrator appends "ação perigosa".
  • Accessibility fallbacks: transparency effects off or high contrast → solid panel + darker scrim (Theme.SolidSurfaces, from UISettings.AdvancedEffectsEnabled / AccessibilitySettings.HighContrast, re-read on AdvancedEffectsEnabledChanged/ColorValuesChanged); Windows animations off → no transition. Only animation: 120 ms opacity on a new modal; input never waits.
  • Keyboard keys and previews restyled in the same language; previews measure header/footer so text paging and image fit stay exact.

Tests

  • New ModalSystemJourneyTests (4): icon for every menu option/dialog button across main menus and dialogs + every icon has a glyph; destructive flagged and never initial focus (menus and dialogs); input under a modal never reaches the screen (buttons, list click, tab click); nested modals (keyboard over Compactar dialog) close one at a time and restore focus.
  • build/Test-UiAutomation.ps1: danger option now reads Sair (the ⚠ moved from text to an icon); all other UIA checks unchanged. Smoke (UIA, launches, installer, render-screens) green on this branch.
  • --render-screens: new captures m1…m9 (menu, destructive focus, delete confirmation frosted + solid, extract summary, password, password error, success result, error, operations, operation details, picker menu, About) at 1280×720, 1280×800, 1920×1080, 3840×2160 at 100% and 200%, plus icons/action-icons.png. All report "cabe" (fit). Reviewed visually.

Manual (not hardware validated)

Added "Modais (#172)" to docs/TESTING.md: TV distance, real Xbox/PlayStation/Nintendo/generic controllers, transparency off, high contrast, animations off, shadow (RenderTargetBitmap doesn't draw it), mouse, Narrator.

Docs: CHANGELOG pair, GUIDE pair ("Menus and dialogs"), docs/ui-redesign.md (phase M, modal tokens, matrix row).

Closes #172

🤖 Generated with Claude Code

nextestudios and others added 3 commits September 27, 2026 15:34
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… content

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@nextestudios
nextestudios marked this pull request as ready for review September 27, 2026 19:10
@nextestudios
nextestudios merged commit 4996f7e into main Sep 27, 2026
3 checks passed
@nextestudios
nextestudios deleted the feature/172-modal-ux branch September 27, 2026 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

enhancement: unify modal UX with frosted panels, icons, and clear controller focus

1 participant