feat: dark navigation rail matching design philosophy#486
Merged
Conversation
Redesigns the left tab strip to match the Channels (#479) and Devices (#484) panes: dark surface (#0D0F12), 3px accent stripe on selected, restrained icon/label pairs, no decorative white borders. Uses the same color tokens documented in docs/design-philosophy.md. - Selected: surface lifts to #171A20, stripe fades in over 120ms, text and icon brighten to primary - Hover (unselected only): surface lifts to #13161C, text/icon brighten, cursor becomes Hand - Focus visual: subtle 1px dashed border for keyboard users - Drops the Label wrapper + IsEnabled=False hack that was greying labels - Icons 30 -> 24px, labels 11pt Pane contents for Live Graph / Logged Data / Profiles are unchanged — they stay on MahApps light chrome until redesigned per Principle 9 (legacy areas are transition states). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Contributor
Review Summary by Qodo
WalkthroughsDescription• Redesigns navigation rail with dark surface matching design philosophy • Implements 3px accent stripe with 120ms fade animation on selection • Adds keyboard focus visual and hover states for unselected tabs • Reduces icon size 30→24px and applies restrained 11pt label styling • Removes Label wrapper and IsEnabled hack, simplifies tab header structure Diagramflowchart LR
OldNav["Old Navigation<br/>White borders<br/>30px icons<br/>Grey labels"] -- "Redesign" --> NewNav["Dark Navigation Rail<br/>#0D0F12 surface<br/>3px accent stripe<br/>24px icons"]
NewNav -- "Selected state" --> Selected["#171A20 surface<br/>Cyan stripe fade-in<br/>Bright text"]
NewNav -- "Hover unselected" --> Hover["#13161C surface<br/>Bright text<br/>Hand cursor"]
NewNav -- "Focus keyboard" --> Focus["1px dashed border<br/>Accessibility"]
File Changes1. Daqifi.Desktop/MainWindow.xaml
|
Contributor
Code Review by Qodo
1.
|
Addresses Qodo review on #486. 1. Consolidate dark-palette brushes (Surface, BorderDim, TextPrimary, Accent, StatusGreen, …) into a single ResourceDictionary at /Resources/DesignTokens.xaml, merged in App.xaml. Removes the three-way duplication across MainWindow.xaml, ChannelsPanePrototype.xaml, and DevicesPanePrototype.xaml — the consolidation #479 originally filed as a follow-up. Adds SurfaceHover (#13161C) for the nav-rail hover state. 2. Preserve pre-PR styling on the nested Logged Data > Application Logs / Device Logs TabControl. The previous Window-scoped TabItem style was implicit and cascaded to nested TabControls; the keyed NavTabItem replacement does not. Re-introduce the original template as keyed LegacyRailTabItem and pin it to the nested TabControl via ItemContainerStyle so that pane is visually unchanged. ViewModels (ChannelTileViewModel, DeviceTileViewModel) still hardcode the hex values for tile background/border brushes — those switch to Application.Current.Resources lookup separately, per the original #479 follow-up. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Contributor
Author
|
Addressed both Qodo issues in 59ecaf9. Issue 1 — Nested tabs restyled ✅ Fixed Valid catch. The old Preserved pre-PR behavior by re-introducing the original template as keyed Issue 2 — Duplicate token brush definitions ✅ Fixed Valid — this was the follow-up #479 originally filed, and my PR was adding a third duplication. Consolidated:
Left for a separate PR (matches the original #479 follow-up scope):
|
📊 Code Coverage ReportSummarySummary
CoverageDAQiFi - 16.7%
Daqifi.Desktop.Common - 30.8%
Daqifi.Desktop.IO - 100%
Coverage report generated by ReportGenerator • View full report in build artifacts |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the left tab strip to match the Channels (#479) and Devices (#484) panes — dark surface, 3px accent stripe on selected, restrained icon/label pairs, no decorative white borders. Uses the same color tokens documented in
docs/design-philosophy.mdso the three redesigned surfaces now share one visual system.#171A20, stripe fades in over 120ms, text/icon brighten to#F5F5F7#13161C, text/icon brighten, cursor becomes HandLabelwrapper +IsEnabled="False"hack that was greying labelsPer Principle 9, Live Graph / Logged Data / Profiles pane contents are deliberately not touched — they stay on MahApps light chrome until redesigned one-by-one. Legacy-in-transition is an intentional state, not a goal.
Test plan
#0D0F12), 1px divider against content area🤖 Generated with Claude Code