Skip to content

Commit ed2f8b0

Browse files
daniel-lerchdaniel-lerch
committed
Add responsive main menu
1 parent f322e03 commit ed2f8b0

File tree

7 files changed

+127
-23
lines changed

7 files changed

+127
-23
lines changed

‎src/Vocup/Assets/bars-solid-full.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/Vocup/Assets/file-regular-full.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/Vocup/ViewModels/LicensesViewModel.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ public class LicensesViewModel
3030
Url = "https://github.com/microsoft/CsWin32",
3131
},
3232
new()
33+
{
34+
Name = "FontAwesome Icons",
35+
License = "CC BY 4.0",
36+
Url = "https://fontawesome.com/",
37+
},
38+
new()
3339
{
3440
Name = "Losttech Settings",
3541
License = "Apache-2.0",

‎src/Vocup/ViewModels/MainViewModel.cs‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,20 @@ public ViewModelBase? CurrentView
1919
set => this.RaiseAndSetIfChanged(ref _currentView, value);
2020
}
2121

22-
private string _errorMessage = string.Empty;
23-
public string ErrorMessage
22+
private BookViewModel? _book;
23+
public BookViewModel? Book
2424
{
25-
get => _errorMessage;
26-
set => this.RaiseAndSetIfChanged(ref _errorMessage, value);
25+
get => _book;
26+
set => this.RaiseAndSetIfChanged(ref _book, value);
27+
}
28+
29+
private bool _isPaneOpen = true;
30+
public bool IsPaneOpen
31+
{
32+
get => _isPaneOpen;
33+
set => this.RaiseAndSetIfChanged(ref _isPaneOpen, value);
2734
}
2835

29-
public bool HandlersRegistered { get; set; }
3036

3137
public AboutViewModel About { get; }
3238

@@ -35,6 +41,7 @@ public string ErrorMessage
3541

3642
public ICommand OpenFileCommand { get; }
3743
public ICommand AboutCommand { get; }
44+
public ICommand TogglePaneCommand { get; }
3845

3946
public MainViewModel()
4047
{
@@ -60,11 +67,19 @@ public MainViewModel()
6067
{
6168
CurrentView = new ErrorViewModel($"Error opening file: {ex.Message}");
6269
}
70+
71+
IsPaneOpen = false;
6372
});
6473

6574
AboutCommand = ReactiveCommand.Create(() =>
6675
{
6776
CurrentView = About;
77+
IsPaneOpen = false;
78+
});
79+
80+
TogglePaneCommand = ReactiveCommand.Create(() =>
81+
{
82+
IsPaneOpen = !IsPaneOpen;
6883
});
6984
}
7085

‎src/Vocup/Views/DoubleLessOrEqualConverter.cs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
using Avalonia.Data.Converters;
2+
using System;
3+
using System.Globalization;
4+
5+
namespace Vocup.Views;
6+
7+
public class DoubleLessOrEqualConverter : IValueConverter
8+
{
9+
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
10+
{
11+
if (value is not double doubleValue)
12+
throw new ArgumentException("Value must be of type double", nameof(value));
13+
14+
if (parameter is not double doubleParameter && !double.TryParse(parameter?.ToString(), out doubleParameter))
15+
throw new ArgumentException("Parameter must be of type double", nameof(parameter));
16+
17+
return doubleValue <= doubleParameter;
18+
}
19+
20+
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
21+
{
22+
throw new NotImplementedException();
23+
}
24+
}

‎src/Vocup/Views/MainView.axaml‎

Lines changed: 74 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,79 @@
11
<UserControl xmlns="https://github.com/avaloniaui"
2-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5-
xmlns:views="clr-namespace:Vocup.Views;assembly=Vocup.Avalonia"
6-
xmlns:vm="clr-namespace:Vocup.ViewModels;assembly=Vocup.Avalonia"
7-
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
8-
x:Class="Vocup.Views.MainView"
9-
x:DataType="vm:MainViewModel">
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
xmlns:views="clr-namespace:Vocup.Views;assembly=Vocup.Avalonia"
6+
xmlns:vm="clr-namespace:Vocup.ViewModels;assembly=Vocup.Avalonia"
7+
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
8+
x:Class="Vocup.Views.MainView"
9+
x:DataType="vm:MainViewModel">
1010

11-
<Design.DataContext>
12-
<!-- This only sets the DataContext for the previewer in an IDE,
13-
to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
14-
<vm:MainViewModel />
15-
</Design.DataContext>
11+
<Design.DataContext>
12+
<!-- This only sets the DataContext for the previewer in an IDE,
13+
to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
14+
<vm:MainViewModel />
15+
</Design.DataContext>
1616

17-
<Grid RowDefinitions="Auto, *" ColumnDefinitions="Auto, *, Auto" Margin="4">
18-
<Button Command="{Binding OpenFileCommand}" Content="Open File" Grid.Row="0" Grid.Column="0" />
19-
<Button Command="{Binding AboutCommand}" Content="About" Grid.Row="0" Grid.Column="2" />
20-
<ContentControl Content="{Binding CurrentView}" Grid.Row="1" Grid.ColumnSpan="3" />
21-
</Grid>
17+
<UserControl.Resources>
18+
<ResourceDictionary>
19+
<views:DoubleLessOrEqualConverter x:Key="DoubleLessOrEqualConverter" />
20+
21+
<!--
22+
Theme Variant specific styles only work through resources:
23+
https://github.com/AvaloniaUI/Avalonia/discussions/20444
24+
-->
25+
<ResourceDictionary.ThemeDictionaries>
26+
<ResourceDictionary x:Key="Light">
27+
<x:String x:Key="Css">path { fill: #000; }</x:String>
28+
</ResourceDictionary>
29+
<ResourceDictionary x:Key="Dark">
30+
<x:String x:Key="Css">path { fill: #fff; }</x:String>
31+
</ResourceDictionary>
32+
</ResourceDictionary.ThemeDictionaries>
33+
</ResourceDictionary>
34+
</UserControl.Resources>
35+
36+
<SplitView Name="splitView" Classes.toggleable="{Binding Bounds.Width, ElementName=splitView, Converter={StaticResource DoubleLessOrEqualConverter}, ConverterParameter=800}">
37+
<SplitView.Styles>
38+
<Style Selector="SplitView.toggleable">
39+
<Setter Property="DisplayMode" Value="Overlay" />
40+
<Setter Property="OpenPaneLength" Value="{Binding Bounds.Width, ElementName=splitView}" />
41+
<Setter Property="IsPaneOpen" Value="{Binding IsPaneOpen}" />
42+
</Style>
43+
<Style Selector="SplitView:not(.toggleable)">
44+
<Setter Property="DisplayMode" Value="Inline" />
45+
<Setter Property="OpenPaneLength" Value="240" />
46+
<Setter Property="IsPaneOpen" Value="True" />
47+
</Style>
48+
<Style Selector="Svg">
49+
<Setter Property="(Svg.Css)" Value="{DynamicResource Css}" />
50+
</Style>
51+
52+
</SplitView.Styles>
53+
<SplitView.Pane>
54+
<Grid RowDefinitions="Auto, *, Auto" ColumnDefinitions="Auto" Margin="4">
55+
<Button Command="{Binding OpenFileCommand}" Grid.Row="0" Grid.Column="0">
56+
<StackPanel Orientation="Horizontal" Spacing="8">
57+
<Svg Path="/Assets/file-regular-full.svg" Width="16" Height="16" />
58+
<TextBlock Text="Open Book" VerticalAlignment="Center" />
59+
</StackPanel>
60+
</Button>
61+
<Button Command="{Binding AboutCommand}" Content="About" Grid.Row="2" Grid.Column="0" />
62+
</Grid>
63+
</SplitView.Pane>
64+
65+
<Grid RowDefinitions="Auto, *">
66+
<Button Grid.Row="0" Margin="4" Command="{Binding TogglePaneCommand}">
67+
<Button.Styles>
68+
<Style Selector="SplitView:not(.toggleable) Button">
69+
<Setter Property="IsVisible" Value="False" />
70+
</Style>
71+
</Button.Styles>
72+
<Svg Path="/Assets/bars-solid-full.svg" Width="16" Height="16" />
73+
</Button>
74+
<ContentControl Grid.Row="1" Content="{Binding CurrentView}" />
75+
</Grid>
76+
77+
</SplitView>
2278

2379
</UserControl>

‎src/Vocup/Vocup.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
1818
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="AvaloniaUI.DiagnosticsSupport" Version="2.1.1" />
1919
<PackageReference Include="ReactiveUI.Avalonia" Version="11.3.8" />
20+
<PackageReference Include="Svg.Controls.Skia.Avalonia" Version="11.3.9.1" />
2021
</ItemGroup>
2122

2223

0 commit comments

Comments
 (0)