wagesj45/advanced-calculator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Replace two-column Grid with SplitView; add narrow pane toggle; add WidthToBooleanConverter and width-based DisplayMode triggers for a responsive layout across Web, Desktop, Android.

Browse source
This commit is contained in:
Codex CLI 2025-08-27 03:00:31 -05:00
commit 0b06265117
2 changed files with 153 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs Normal file
View file

@ -0,0 +1,31 @@
using System;
using System.Globalization;
using Avalonia.Data.Converters;
namespace AdvancedCalculator.Converters;
// Returns true if width (double) is less than the provided threshold (parameter),
// otherwise false. Default threshold is 640 when parameter is null or invalid.
public class WidthToBooleanConverter : IValueConverter
{
public static readonly WidthToBooleanConverter Instance = new();
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo? culture)
{
if (value is double width)
{
double threshold = 640;
if (parameter is double p)
threshold = p;
else if (parameter is string s && double.TryParse(s, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed))
threshold = parsed;
return width < threshold;
}
return false;
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
=> throw new NotSupportedException();
}

63
src/AdvancedCalculator/Views/MainView.axaml
View file

@ -10,11 +10,39 @@
x:DataType="vm:MainViewModel">
<UserControl.Resources>
<conv:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter" />
<conv:WidthToBooleanConverter x:Key="WidthToBooleanConverter" />
</UserControl.Resources>
<!-- Replace columns with a responsive SplitView -->
<SplitView x:Name="RootSplit"
OpenPaneLength="320"
CompactPaneLength="0">
<!-- Responsive behavior: set DisplayMode and IsPaneOpen based on width -->
<SplitView.Styles>
<Style Selector="SplitView#RootSplit">
<Style.Triggers>
<!-- Narrow: Overlay mode, pane closed by default -->
<DataTrigger Value="True"
Binding="{Binding $parent[Window].Bounds.Width,
Converter={StaticResource WidthToBooleanConverter},
ConverterParameter=640}">
<Setter Property="DisplayMode" Value="Overlay" />
<Setter Property="IsPaneOpen" Value="False" />
</DataTrigger>
<!-- Wide: Inline mode, pane open -->
<DataTrigger Value="False"
Binding="{Binding $parent[Window].Bounds.Width,
Converter={StaticResource WidthToBooleanConverter},
ConverterParameter=640}">
<Setter Property="DisplayMode" Value="Inline" />
<Setter Property="IsPaneOpen" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</SplitView.Styles>
<Grid ColumnDefinitions="*,3*">
<!-- Left column: Variables + Functions -->
<Grid Grid.Column="0">
<!-- Left pane: Variables + Functions -->
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
@ -63,12 +91,11 @@
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</SplitView.Pane>
<!-- GridSplitter between columns -->
<GridSplitter Grid.Column="0" HorizontalAlignment="Right" Width="5" Background="Transparent" />
<!-- Right column: History + Input -->
<Grid Grid.Column="1" RowDefinitions="*,Auto">
<!-- Right content: History + Input -->
<SplitView.Content>
<Grid RowDefinitions="*,Auto">
<!-- History -->
<ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
<ListBox.ItemTemplate>
@ -86,16 +113,28 @@
</ListBox>
<!-- Input Row -->
<Grid Grid.Row="1" ColumnDefinitions="Auto,*" Margin="4">
<Button Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
<Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*" Margin="4">
<!-- Pane toggle: visible on narrow only -->
<ToggleButton Margin="0,0,6,0"
IsVisible="{Binding $parent[Window].Bounds.Width,
Converter={StaticResource WidthToBooleanConverter},
ConverterParameter=640}"
IsChecked="{Binding #RootSplit.IsPaneOpen}">
<TextBlock Text="≡" FontSize="18"/>
</ToggleButton>
<!-- Toggle functions panel inside the pane -->
<Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
</Button>
<TextBox Grid.Column="1" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<InputElement.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
</InputElement.KeyBindings>
</TextBox>
</Grid>
</Grid>
</Grid>
</SplitView.Content>
</SplitView>
</UserControl>