UX touch-friendly: add Evaluate button; increase min sizes/spacing; make variables/functions tap-to-insert via InsertVariable/InsertFunction commands.

This commit is contained in:
Codex CLI 2025-08-27 03:03:07 -05:00
commit 055c2fae03
2 changed files with 74 additions and 34 deletions

View file

@ -41,6 +41,37 @@ public partial class MainViewModel : ViewModelBase
IsFunctionsPanelOpen = !IsFunctionsPanelOpen; IsFunctionsPanelOpen = !IsFunctionsPanelOpen;
} }
// Insert helpers for touch: appends tokens to the input box
[RelayCommand]
private void InsertVariable(string? variableName)
{
if (string.IsNullOrWhiteSpace(variableName))
return;
InsertToken(variableName);
}
[RelayCommand]
private void InsertFunction(string? functionName)
{
if (string.IsNullOrWhiteSpace(functionName))
return;
InsertToken(functionName + "()");
}
private void InsertToken(string token)
{
if (string.IsNullOrEmpty(InputText))
{
InputText = token;
return;
}
if (!char.IsWhiteSpace(InputText[^1]))
InputText += " ";
InputText += token;
}
[RelayCommand(AllowConcurrentExecutions = false)] [RelayCommand(AllowConcurrentExecutions = false)]
private async Task Submit() private async Task Submit()
{ {

View file

@ -49,44 +49,52 @@
</Grid.RowDefinitions> </Grid.RowDefinitions>
<!-- Variables list --> <!-- Variables list -->
<ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1"> <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="m:VariableItem"> <DataTemplate x:DataType="m:VariableItem">
<Grid ColumnDefinitions="Auto,*,Auto" Margin="4,2"> <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}" CommandParameter="{Binding VariableName}"
FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" /> Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
<TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" /> <Grid ColumnDefinitions="Auto,*,Auto">
<StackPanel Grid.Column="2" Spacing="2"> <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
<TextBlock Text="{Binding Value}" /> FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
<TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" /> <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
</StackPanel> <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
</Grid> <TextBlock Text="{Binding Value}" />
<TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
</StackPanel>
</Grid>
</Button>
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </ListBox>
<!-- Function definitions --> <!-- Function definitions -->
<ListBox Grid.Row="1" BorderThickness="0" <ListBox Grid.Row="1" BorderThickness="0" HorizontalContentAlignment="Stretch"
ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"> ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="m:FunctionDefinitionItem"> <DataTemplate x:DataType="m:FunctionDefinitionItem">
<StackPanel Spacing="2" Margin="4,6"> <Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
<StackPanel Orientation="Horizontal" Spacing="6"> CommandParameter="{Binding FunctionName}"
<TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" /> Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
<TextBlock Text="{Binding FunctionName}" FontWeight="Bold" /> <StackPanel Spacing="8">
<StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
<TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
<TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
</StackPanel>
<TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
<ItemsControl ItemsSource="{Binding FunctionArguments}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Key}" />
<TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel> </StackPanel>
<TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" /> </Button>
<ItemsControl ItemsSource="{Binding FunctionArguments}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Key}" />
<TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </ListBox>
@ -113,7 +121,7 @@
</ListBox> </ListBox>
<!-- Input Row --> <!-- Input Row -->
<Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*" Margin="4"> <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6">
<!-- Pane toggle: visible on narrow only --> <!-- Pane toggle: visible on narrow only -->
<ToggleButton Margin="0,0,6,0" <ToggleButton Margin="0,0,6,0"
IsVisible="{Binding $parent[Window].Bounds.Width, IsVisible="{Binding $parent[Window].Bounds.Width,
@ -124,15 +132,16 @@
</ToggleButton> </ToggleButton>
<!-- Toggle functions panel inside the pane --> <!-- Toggle functions panel inside the pane -->
<Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0"> <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40">
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" /> <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
</Button> </Button>
<TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"/>
<InputElement.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" /> <!-- Explicit evaluate button for touch -->
</InputElement.KeyBindings> <Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8">
</TextBox> <TextBlock Text="Evaluate"/>
</Button>
</Grid> </Grid>
</Grid> </Grid>
</SplitView.Content> </SplitView.Content>