Skip to content

Redesign UI with Fluent 2 shell, floating toolbars, and Ellie design system - #3

Merged
bubavanhalen merged 2 commits into
masterfrom
bubavanhalen-ui-redesign
Aug 24, 2026
Merged

bubavanhalen merged 2 commits into
masterfrom
bubavanhalen-ui-redesign

Conversation

@bubavanhalen

@bubavanhalen bubavanhalen commented Aug 24, 2026 •

Copy link
Copy Markdown
Owner

Overview

Full UI redesign of ElliePdf following Fluent 2, replacing the NavigationView shell with a modern custom title bar and an Ellie-branded design system built around the #DCAE96 accent.

Screenshots

Reader — empty state Reader — pages panel
reader-empty-state reader-pages-panel
Reader — edit mode Organize
reader-edit-mode organize-page
Settings
settings-page

Shell

  • Custom title bar with brand mark, integrated document tabs, a Read/Organize segmented switcher (SelectorBar), settings gear, and a DPI-safe star-sized drag region (replaces hardcoded drag margins)
  • MicaAlt backdrop
  • Document tab logic moved from ReaderPage into the shell (MainPage), synced from ReaderViewModel

Design system (Themes/ElliePdf.xaml)

  • Full accent ramp for #DCAE96 with Light/Dark/HighContrast theme dictionaries
  • Branded accent buttons, checked toggles, toggle switches, and sliders (hover/pressed states included)
  • Reusable styles: pill toolbars, floating panels, cards, settings cards, icon wells, badges, shared ThemeShadow

Reader

  • The 19-button mega-toolbar is split into a top-right document command pill (open, search, print, organize, edit, overflow) and a bottom nav/zoom pill — both auto-hide while reading and reappear on pointer movement
  • Zoom flyout with slider + fit presets (new SetZoomPercent command); go-to-page flyout on the page label
  • Pages/Outline/Search as floating cards with headers, close buttons, shadows, and slide-in animations; current page highlighted with the accent
  • Hero empty state: drop zone with drag & drop support, rich recent-file cards with folder paths
  • Edit toolbar restyled with an accent border and prominent Done button, deduplicated (~250 lines of copy-paste XAML removed)

Organize

  • Header with live page count, pill command bar, hover-reveal per-card actions, empty state with call-to-action

Settings

  • Card-based layout with instant apply (Save button removed)
  • New Appearance section: System/Light/Dark theme picker persisted in UserSettings.AppTheme
  • About card with version info

Fixes discovered along the way

  • Panel exclusivity: opening the thumbnail panel now closes the outline panel
  • PdfEditSurface marked partial (CsWinRT1028): previously any UIA client (e.g. Narrator, accessibility tools) crashed the app when the edit overlay was active
  • Brand logo asset now packaged and copied to output so ms-appx image references resolve

Validation

  • dotnet build -p:Platform=x64 — clean, 0 warnings (CsWinRT warning resolved)
  • dotnet test — 3/3 passing
  • Live UIA-driven smoke tests: launch, open PDF via recent card, pages panel, edit mode round-trip, organize with content, settings — all verified with screenshots, no exceptions

…system

- Shell: replace NavigationView with a custom title bar hosting document
  tabs, a Read/Organize SelectorBar switcher, settings gear, and a
  DPI-safe star-sized drag region; MicaAlt backdrop
- Theme: full Ellie accent system (#DCAE96) with light/dark/high-contrast
  ramps, branded accent buttons, toggles, switches, sliders, pill toolbar,
  panel, card, and settings-card styles
- Reader: split the 19-button mega-toolbar into a top-right document
  command pill and a bottom nav/zoom pill that auto-hide while reading;
  zoom flyout with slider and fit presets; go-to-page flyout; floating
  Pages/Outline/Search panels with headers, close buttons, shadows and
  slide-in animations; hero empty state with drop zone, drag & drop, and
  rich recent-file cards
- Organize: header with live page count, pill command bar, hover-reveal
  card actions, empty state
- Settings: card-based layout with instant apply, System/Light/Dark theme
  picker, and About card; removed explicit Save button
- Fix: panel exclusivity (thumbnail toggle now closes outline)
- Fix: mark PdfEditSurface partial (CsWinRT1028) - unpatched, any UIA
  client (e.g. Narrator) crashed the app when the edit overlay was active

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 67a8baa002

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

StatusMessage = "Settings saved.";
StatusSeverity = InfoBarSeverity.Success;
IsStatusOpen = true;
_ = _settingsService.SaveAsync();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Serialize instant settings saves

When settings are changed rapidly, each property callback starts an unobserved save while the previous save may still hold the exclusively opened settings.json; the later File.Create can therefore fail with an ignored IOException, and closing immediately after a change can also terminate the unawaited write. Queue, debounce, or otherwise await these saves so the final setting is reliably persisted.

Useful? React with 👍 / 👎.

Comment thread OrganizePage.xaml
Comment on lines +198 to +199
IsHitTestVisible="False"
Opacity="0"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep page actions available without hover

On touch-only devices, there is no persistent hover state, and keyboard focus also does not trigger SetCardActionsVisible; because the rotate/delete container starts invisible and pointer-disabled, these previously visible actions cannot be reliably discovered or invoked without a mouse. Keep the actions visible for non-hover input or reveal them on focus/selection as well as PointerEntered.

Useful? React with 👍 / 👎.

Comment thread Pages/ReaderPage.xaml
Comment on lines +573 to +575
Click="ZoomPreset_Click"
Content="100%"
Tag="actual" />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Make the 100% preset set 100%

Clicking this newly labeled 100% preset falls through to ZoomActualSizeCommand, which resolves to 96 / 72 and consequently displays and renders at 133%, not 100%. Either invoke SetZoomPercentCommand with 100 or label this preset as actual size so the control matches its behavior.

Useful? React with 👍 / 👎.

- Non-error InfoBar toasts now fade out automatically after 4 seconds;
  errors stay until dismissed
- Removed toasts whose outcome is already visible in the UI: 'Opened X',
  'Open/Import cancelled', 'Loaded/Added N pages', 'Rotated X',
  'Deleted X', and the export toast (redundant with the export dialog)
- Kept file-write confirmations (Save/Save As) and empty-workspace guards

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@bubavanhalen
bubavanhalen merged commit eabd7bd into master Aug 24, 2026
1 of 3 checks passed
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.

1 participant