Move functions list to flyout and auto-close after insert
This commit is contained in:
parent
46004d85d5
commit
c361c2285c
2 changed files with 46 additions and 43 deletions
|
@ -56,6 +56,8 @@ public partial class MainViewModel : ViewModelBase
|
|||
if (string.IsNullOrWhiteSpace(functionName))
|
||||
return;
|
||||
InsertToken(functionName + "()");
|
||||
// Close the functions flyout after insertion for smoother UX
|
||||
IsFunctionsPanelOpen = false;
|
||||
}
|
||||
|
||||
private void InsertToken(string token)
|
||||
|
|
|
@ -23,13 +23,9 @@
|
|||
DisplayMode="{Binding $parent[Window].Bounds.Width, Converter={StaticResource WidthToSplitViewModeConverter}, ConverterParameter=640}"
|
||||
IsPaneOpen="{Binding $parent[Window].Bounds.Width, Converter={StaticResource WidthToPaneOpenConverter}, ConverterParameter=640}">
|
||||
|
||||
<!-- Left pane: Variables + Functions -->
|
||||
<!-- Left pane: Variables only (Functions moved to flyout) -->
|
||||
<SplitView.Pane>
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Variables list with empty-state hint overlay -->
|
||||
<Grid Grid.Row="0">
|
||||
|
@ -67,43 +63,6 @@
|
|||
HorizontalAlignment="Center" VerticalAlignment="Center" />
|
||||
</Grid>
|
||||
|
||||
<!-- Function definitions -->
|
||||
<ListBox Grid.Row="1" BorderThickness="0"
|
||||
ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
|
||||
AutomationProperties.Name="Functions list">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:FunctionDefinitionItem">
|
||||
<Button x:DataType="vm:MainViewModel"
|
||||
DataContext="{Binding #Root.DataContext}"
|
||||
Command="{Binding InsertFunctionCommand}"
|
||||
CommandParameter="{Binding $parent[ListBoxItem].DataContext}"
|
||||
Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
|
||||
AutomationProperties.Name="Insert function">
|
||||
<StackPanel Spacing="8"
|
||||
DataContext="{Binding $parent[ListBoxItem].DataContext}"
|
||||
x:DataType="m:FunctionDefinitionItem">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<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>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
|
||||
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</Grid>
|
||||
</SplitView.Pane>
|
||||
|
||||
|
@ -146,9 +105,51 @@
|
|||
<TextBlock Text="≡" FontSize="18"/>
|
||||
</ToggleButton>
|
||||
|
||||
<!-- Toggle functions panel inside the pane -->
|
||||
<!-- Functions flyout anchored to this button -->
|
||||
<Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40"
|
||||
AutomationProperties.Name="Toggle functions panel">
|
||||
<Button.Flyout>
|
||||
<Flyout IsOpen="{Binding IsFunctionsPanelOpen, Mode=TwoWay}" Placement="BottomEdgeAlignedLeft">
|
||||
<Border Padding="8" MinWidth="320" MaxHeight="400">
|
||||
<ScrollViewer>
|
||||
<ListBox ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
|
||||
BorderThickness="0"
|
||||
AutomationProperties.Name="Functions list">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="m:FunctionDefinitionItem">
|
||||
<Button x:DataType="vm:MainViewModel"
|
||||
DataContext="{Binding #Root.DataContext}"
|
||||
Command="{Binding InsertFunctionCommand}"
|
||||
CommandParameter="{Binding $parent[ListBoxItem].DataContext}"
|
||||
Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
|
||||
AutomationProperties.Name="Insert function">
|
||||
<StackPanel Spacing="8"
|
||||
DataContext="{Binding $parent[ListBoxItem].DataContext}"
|
||||
x:DataType="m:FunctionDefinitionItem">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<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>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</ScrollViewer>
|
||||
</Border>
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
|
||||
</Button>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue