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:
parent
0b06265117
commit
055c2fae03
2 changed files with 74 additions and 34 deletions
|
@ -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()
|
||||||
{
|
{
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue