Skip to content

Add navigation sidebar to settings window #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielchalmers merged 22 commits into from
May 2, 2026
Merged

Add navigation sidebar to settings window #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
d198f36
Add settings navigation sidebar
danielchalmers May 2, 2026
ebc288a
Scroll into center view
danielchalmers May 2, 2026
6f427cc
Add access keys so it's keyboard enabled
danielchalmers May 2, 2026
d49581d
add Discover More and Credits so it's complete
danielchalmers May 2, 2026
3e1b46d
remove the sidebar title/subtitle
danielchalmers May 2, 2026
4f2cd4f
remove the settings folder and new clock buttons since they're alread…
danielchalmers May 2, 2026
d37b42a
tweak sizes
danielchalmers May 2, 2026
d71b7e3
tweak access keys
danielchalmers May 2, 2026
2af51c4
Add focus to the target card for better keyboard flow
danielchalmers May 2, 2026
e68abed
increase default and min window size
danielchalmers May 2, 2026
828d0b2
move tools section to nav bar inline
danielchalmers May 2, 2026
a4c6eb5
incorporate helper text
danielchalmers May 2, 2026
da0e50a
give them the same style as the nav buttons
danielchalmers May 2, 2026
30f020a
make them all look more like buttons because right now they blend int…
danielchalmers May 2, 2026
1fac52d
keep that theme for only the tool buttons and revert the theme for th…
danielchalmers May 2, 2026
e883e09
add the header back to the top but the subtitle shouild be something …
danielchalmers May 2, 2026
b247724
center it horizontally
danielchalmers May 2, 2026
6bf9edd
Revert "center it horizontally"
danielchalmers May 2, 2026
9d90afa
it should have the same kind of margins/padding as all the buttons so…
danielchalmers May 2, 2026
bf9c4e4
the header and tool buttons have too much surrounding padding so they…
danielchalmers May 2, 2026
0e65cde
do a full pass on margins/paddings/spacing/etc to improve overall con…
danielchalmers May 2, 2026
01aa440
tweak grammar
danielchalmers May 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions DesktopClock/Properties/Settings.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,15 +347,15 @@ private Settings()
/// <remarks>
/// This remembers how wide you last made the settings window so it feels familiar the next time you open it.
/// </remarks>
public double SettingsWindowWidth { get; set; } = 720;
public double SettingsWindowWidth { get; set; } = 1200;

/// <summary>
/// Persisted height of the settings window.
/// </summary>
/// <remarks>
/// This remembers how tall you last made the settings window so you do not have to resize it every time.
/// </remarks>
public double SettingsWindowHeight { get; set; } = 600;
public double SettingsWindowHeight { get; set; } = 900;

/// <summary>
/// Persisted vertical scroll offset of the settings window.
Expand Down
210 changes: 166 additions & 44 deletions DesktopClock/SettingsWindow.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
Title="DesktopClock Settings"
Width="{Binding Source={x:Static p:Settings.Default}, Path=SettingsWindowWidth, Mode=TwoWay}"
Height="{Binding Source={x:Static p:Settings.Default}, Path=SettingsWindowHeight, Mode=TwoWay}"
MinWidth="720"
MinHeight="520"
MinWidth="800"
MinHeight="600"
ResizeMode="CanResize"
WindowStartupLocation="CenterScreen">
<Window.Resources>
Expand All @@ -22,6 +22,38 @@
<Setter Property="Margin" Value="0,0,0,4" />
</Style>

<Style x:Key="SidebarButton"
TargetType="Button"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="0,0,0,2" />
<Setter Property="Padding" Value="8,6,24,6" />
<Setter Property="MinHeight" Value="32" />
</Style>

<Style x:Key="SidebarToolButton"
TargetType="Button"
BasedOn="{StaticResource SidebarButton}">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#DADDE3" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="8,4,20,4" />
<Setter Property="MinWidth" Value="150" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Margin" Value="0,0,0,4" />
</Style>

<Style x:Key="SidebarToolDescription"
TargetType="TextBlock">
<Setter Property="FontSize" Value="11" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="Opacity" Value="0.75" />
<Setter Property="Margin" Value="0,2,0,0" />
</Style>

<Style x:Key="ColorSwatchButton"
TargetType="Button"
BasedOn="{StaticResource {x:Type Button}}">
Expand Down Expand Up @@ -55,6 +87,7 @@
<Style x:Key="CardGroupBox"
TargetType="GroupBox">
<Setter Property="Margin" Value="0,0,0,16" />
<Setter Property="Focusable" Value="True" />
</Style>

<Style x:Key="CardBodyPanel"
Expand Down Expand Up @@ -85,13 +118,118 @@
</Style>
</Window.Resources>

<ScrollViewer x:Name="SettingsScrollViewer"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
ScrollChanged="SettingsScrollViewer_ScrollChanged"
Loaded="SettingsScrollViewer_Loaded">
<StackPanel Margin="12">
<GroupBox Header="Display"
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Border Grid.Column="0"
Background="#FAFAFA"
BorderBrush="#E1E4E8"
BorderThickness="0,0,1,0">
<Grid Margin="8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="0"
Margin="8,0,20,4">
<TextBlock Text="DesktopClock"
FontSize="20"
FontWeight="SemiBold" />
<TextBlock Text="{Binding AppVersion, StringFormat=v{0}}"
Foreground="#5B6F8E"
Margin="0,0,0,6" />
</StackPanel>

<StackPanel Grid.Row="1"
VerticalAlignment="Center">
<Button Content="_Display"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=DisplaySection}"
Click="NavigateToSection" />
<Button Content="_Countdown"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=CountdownSection}"
Click="NavigateToSection" />
<Button Content="_Window"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=WindowSection}"
Click="NavigateToSection" />
<Button Content="_Typography"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=TypographySection}"
Click="NavigateToSection" />
<Button Content="_Appearance"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=AppearanceSection}"
Click="NavigateToSection" />
<Button Content="A_lerts"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=AlertsSection}"
Click="NavigateToSection" />
<Button Content="_Shortcuts"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=ShortcutsSection}"
Click="NavigateToSection" />
<Button Content="Discover _More"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=DiscoverMoreSection}"
Click="NavigateToSection" />
<Button Content="Cr_edits"
Style="{StaticResource SidebarButton}"
Tag="{Binding ElementName=CreditsSection}"
Click="NavigateToSection" />
</StackPanel>

<StackPanel Grid.Row="2">
<Button Style="{StaticResource SidebarToolButton}"
Click="OpenSettingsFolder"
IsEnabled="{x:Static p:Settings.CanBeSaved}">
<StackPanel>
<AccessText FontWeight="SemiBold"
Text="Settings _folder" />
<TextBlock Text="Open the settings folder"
Style="{StaticResource SidebarToolDescription}" />
</StackPanel>
</Button>
<Button Style="{StaticResource SidebarToolButton}"
Click="OpenSettingsFile"
IsEnabled="{x:Static p:Settings.CanBeSaved}">
<StackPanel>
<AccessText FontWeight="SemiBold"
Text="Settings f_ile" />
<TextBlock Text="Open the JSON file"
Style="{StaticResource SidebarToolDescription}" />
</StackPanel>
</Button>
<Button Style="{StaticResource SidebarToolButton}"
Click="CreateNewClock"
IsEnabled="{x:Static p:Settings.CanBeSaved}">
<StackPanel>
<AccessText FontWeight="SemiBold"
Text="_New clock" />
<TextBlock Text="Start a fresh copy"
Style="{StaticResource SidebarToolDescription}" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Border>

<ScrollViewer x:Name="SettingsScrollViewer"
Grid.Column="1"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
ScrollChanged="SettingsScrollViewer_ScrollChanged"
Loaded="SettingsScrollViewer_Loaded">
<StackPanel x:Name="SettingsContent"
Margin="24">
<GroupBox x:Name="DisplaySection"
Header="Display"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<TextBlock Text="Clock format"
Expand Down Expand Up @@ -129,7 +267,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Countdown"
<GroupBox x:Name="CountdownSection"
Header="Countdown"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<TextBlock Text="Countdown target"
Expand Down Expand Up @@ -176,7 +315,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Window"
<GroupBox x:Name="WindowSection"
Header="Window"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<CheckBox Content="Start with Windows"
Expand Down Expand Up @@ -240,7 +380,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Typography"
<GroupBox x:Name="TypographySection"
Header="Typography"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<TextBlock Text="Font family"
Expand Down Expand Up @@ -319,7 +460,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Appearance"
<GroupBox x:Name="AppearanceSection"
Header="Appearance"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<TextBlock Text="Background or outline color"
Expand Down Expand Up @@ -455,7 +597,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Alerts"
<GroupBox x:Name="AlertsSection"
Header="Alerts"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<TextBlock Text="Alarm sound"
Expand Down Expand Up @@ -506,32 +649,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Tools"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<Button Content="Open settings folder"
Click="OpenSettingsFolder"
IsEnabled="{x:Static p:Settings.CanBeSaved}" />
<TextBlock Text="Open the folder where the settings file is stored."
Margin="0,0,0,16"
Style="{StaticResource DescriptionTextBlock}" />

<Button Content="Open settings file"
Click="OpenSettingsFile"
IsEnabled="{x:Static p:Settings.CanBeSaved}" />
<TextBlock Text="Open the JSON settings file in Notepad."
Margin="0,0,0,16"
Style="{StaticResource DescriptionTextBlock}" />

<Button Content="Create new clock"
Click="CreateNewClock"
IsEnabled="{x:Static p:Settings.CanBeSaved}" />
<TextBlock Text="Copy this clock and start it with fresh settings."
Style="{StaticResource DescriptionTextBlock}" />
</StackPanel>
</GroupBox>

<GroupBox Header="Shortcuts"
<GroupBox x:Name="ShortcutsSection"
Header="Shortcuts"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<StackPanel>
Expand Down Expand Up @@ -563,7 +682,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Discover More"
<GroupBox x:Name="DiscoverMoreSection"
Header="Discover More"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<StackPanel>
Expand Down Expand Up @@ -622,7 +742,8 @@
</StackPanel>
</GroupBox>

<GroupBox Header="Credits"
<GroupBox x:Name="CreditsSection"
Header="Credits"
Style="{StaticResource CardGroupBox}">
<StackPanel Style="{StaticResource CardBodyPanel}">
<StackPanel>
Expand Down Expand Up @@ -677,6 +798,7 @@
</StackPanel>
</StackPanel>
</GroupBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
25 changes: 25 additions & 0 deletions DesktopClock/SettingsWindow.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,25 @@ private void PickOuterColor(object sender, RoutedEventArgs e)
PickColor(color => ViewModel.Settings.OuterColor = color, ViewModel.Settings.OuterColor);
}

private void NavigateToSection(object sender, RoutedEventArgs e)
{
if (sender is not Button { Tag: FrameworkElement section })
{
return;
}

var sectionOffset = section.TransformToAncestor(SettingsContent).Transform(new Point(0, 0)).Y;
var targetOffset = sectionOffset;

if (section.ActualHeight < SettingsScrollViewer.ViewportHeight)
{
targetOffset -= (SettingsScrollViewer.ViewportHeight - section.ActualHeight) / 2;
}

SettingsScrollViewer.ScrollToVerticalOffset(targetOffset);
section.Focus();
}

private void PickColor(Action<Color> applyColor, Color currentColor)
{
using var colorDialog = new System.Windows.Forms.ColorDialog
Expand Down Expand Up @@ -224,9 +243,15 @@ public partial class SettingsWindowViewModel : ObservableObject
{
public Settings Settings { get; }

/// <summary>
/// The file version of the running app.
/// </summary>
public string AppVersion { get; }

public SettingsWindowViewModel(Settings settings)
{
Settings = settings;
AppVersion = FileVersionInfo.GetVersionInfo(App.MainFileInfo.FullName).FileVersion;
FontFamilies = GetAllSystemFonts().Distinct().OrderBy(f => f).ToList();
FontStyles = ["Normal", "Italic", "Oblique"];
FontWeights = ["Thin", "ExtraLight", "Light", "Normal", "Medium", "SemiBold", "Bold", "ExtraBold", "Black", "ExtraBlack"];
Expand Down