Allow editing actions in the settings UI

src/cascadia/TerminalSettingsEditor/Actions.cpp

@@ -19,57 +19,14 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Automation::AutomationProperties::SetName(AddNewButton(), RS_(L"Actions_AddNewTextBlock/Text"));
     }
 
-    Automation::Peers::AutomationPeer Actions::OnCreateAutomationPeer()
-    {
-        _ViewModel.OnAutomationPeerAttached();
-        return nullptr;
-    }
-
     void Actions::OnNavigatedTo(const NavigationEventArgs& e)
     {
         _ViewModel = e.Parameter().as<Editor::ActionsViewModel>();
-
-        // Subscribe to the view model's FocusContainer event.
-        // Use the KeyBindingViewModel or index provided in the event to focus the corresponding container
-        _ViewModel.FocusContainer([this](const auto& /*sender*/, const auto& args) {
-            if (auto kbdVM{ args.try_as<KeyBindingViewModel>() })
-            {
-                if (const auto& container = KeyBindingsListView().ContainerFromItem(*kbdVM))
-                {
-                    container.as<Controls::ListViewItem>().Focus(FocusState::Programmatic);
-                }
-            }
-            else if (const auto& index = args.try_as<uint32_t>())
-            {
-                if (const auto& container = KeyBindingsListView().ContainerFromIndex(*index))
-                {
-                    container.as<Controls::ListViewItem>().Focus(FocusState::Programmatic);
-                }
-            }
-        });
-
-        // Subscribe to the view model's UpdateBackground event.
-        // The view model does not have access to the page resources, so it asks us
-        // to update the key binding's container background
-        _ViewModel.UpdateBackground([this](const auto& /*sender*/, const auto& args) {
-            if (auto kbdVM{ args.try_as<KeyBindingViewModel>() })
-            {
-                if (kbdVM->IsInEditMode())
-                {
-                    const auto& containerBackground{ Resources().Lookup(box_value(L"ActionContainerBackgroundEditing")).as<Windows::UI::Xaml::Media::Brush>() };
-                    kbdVM->ContainerBackground(containerBackground);
-                }
-                else
-                {
-                    const auto& containerBackground{ Resources().Lookup(box_value(L"ActionContainerBackground")).as<Windows::UI::Xaml::Media::Brush>() };
-                    kbdVM->ContainerBackground(containerBackground);
-                }
-            }
-        });
+        _ViewModel.CurrentPage(ActionsSubPage::Base);
     }
 
     void Actions::AddNew_Click(const IInspectable& /*sender*/, const RoutedEventArgs& /*eventArgs*/)
     {
-        _ViewModel.AddNewKeybinding();
+        _ViewModel.AddNewCommand();
     }
 }

src/cascadia/TerminalSettingsEditor/Actions.h

@@ -16,7 +16,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Actions();
 
         void OnNavigatedTo(const winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
-        Windows::UI::Xaml::Automation::Peers::AutomationPeer OnCreateAutomationPeer();
 
         void AddNew_Click(const IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& eventArgs);
 

src/cascadia/TerminalSettingsEditor/Actions.xaml

@@ -122,7 +122,7 @@
             <Style x:Key="KeyBindingContainerStyle"
                    BasedOn="{StaticResource DefaultListViewItemStyle}"
                    TargetType="ListViewItem">
-                <Setter Property="Padding" Value="4" />
+                <Setter Property="Padding" Value="12,4,4,4" />
                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                 <Setter Property="XYFocusKeyboardNavigation" Value="Enabled" />
             </Style>
@@ -137,24 +137,6 @@
                 <Setter Property="HorizontalAlignment" Value="Right" />
                 <Setter Property="VerticalAlignment" Value="Center" />
             </Style>
-            <x:Int32 x:Key="EditButtonSize">32</x:Int32>
-            <x:Double x:Key="EditButtonIconSize">15</x:Double>
-            <Style x:Key="EditButtonStyle"
-                   BasedOn="{StaticResource DefaultButtonStyle}"
-                   TargetType="Button">
-                <Setter Property="Padding" Value="0" />
-                <Setter Property="VerticalAlignment" Value="Center" />
-                <Setter Property="Height" Value="{StaticResource EditButtonSize}" />
-                <Setter Property="Width" Value="{StaticResource EditButtonSize}" />
-            </Style>
-            <Style x:Key="AccentEditButtonStyle"
-                   BasedOn="{StaticResource AccentButtonStyle}"
-                   TargetType="Button">
-                <Setter Property="Padding" Value="3" />
-                <Setter Property="VerticalAlignment" Value="Center" />
-                <Setter Property="Height" Value="{StaticResource EditButtonSize}" />
-                <Setter Property="Width" Value="{StaticResource EditButtonSize}" />
-            </Style>
 
             <!--  Converters & Misc.  -->
             <SolidColorBrush x:Key="ActionContainerBackgroundEditing"
@@ -163,22 +145,16 @@
                              Color="Transparent" />
 
             <!--  Templates  -->
-            <DataTemplate x:Key="KeyBindingTemplate"
-                          x:DataType="local:KeyBindingViewModel">
-                <ListViewItem AutomationProperties.AcceleratorKey="{x:Bind KeyChordText, Mode=OneWay}"
-                              AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
-                              Background="{x:Bind ContainerBackground, Mode=OneWay}"
-                              GotFocus="{x:Bind ActionGotFocus}"
-                              LostFocus="{x:Bind ActionLostFocus}"
-                              PointerEntered="{x:Bind EnterHoverMode}"
-                              PointerExited="{x:Bind ExitHoverMode}"
+            <DataTemplate x:Key="CommandTemplate"
+                          x:DataType="local:CommandViewModel">
+                <ListViewItem AutomationProperties.Name="{x:Bind DisplayName, Mode=OneWay}"
                               Style="{StaticResource KeyBindingContainerStyle}">
                     <Grid ColumnSpacing="8">
                         <Grid.ColumnDefinitions>
                             <!--  command name  -->
                             <ColumnDefinition Width="*" />
                             <!--  key chord  -->
-                            <ColumnDefinition Width="auto" />
+                            <ColumnDefinition Width="150" />
                             <!--  edit buttons  -->
                             <!--
                                 This needs to be 112 because that is the width of the row of buttons in edit mode + padding.
@@ -192,133 +168,7 @@
                         <!--  Command Name  -->
                         <TextBlock Grid.Column="0"
                                    Style="{StaticResource KeyBindingNameTextBlockStyle}"
-                                   Text="{x:Bind Name, Mode=OneWay}"
-                                   Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(IsInEditMode), Mode=OneWay}" />
-
-                        <!--  Edit Mode: Action Combo-box  -->
-                        <ComboBox x:Uid="Actions_ActionComboBox"
-                                  Grid.Column="0"
-                                  VerticalAlignment="Center"
-                                  ItemsSource="{x:Bind AvailableActions, Mode=OneWay}"
-                                  SelectedItem="{x:Bind ProposedAction, Mode=TwoWay}"
-                                  Visibility="{x:Bind IsInEditMode, Mode=OneWay}" />
-
-                        <!--  Key Chord Text  -->
-                        <Border Grid.Column="1"
-                                Padding="2,0,2,0"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Center"
-                                Style="{ThemeResource KeyChordBorderStyle}"
-                                Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(IsInEditMode), Mode=OneWay}">
-
-                            <TextBlock FontSize="14"
-                                       Style="{ThemeResource KeyChordTextBlockStyle}"
-                                       Text="{x:Bind KeyChordText, Mode=OneWay}"
-                                       TextWrapping="WrapWholeWords" />
-                        </Border>
-
-                        <!--  Edit Mode: Key Chord Listener  -->
-                        <local:KeyChordListener Grid.Column="1"
-                                                Keys="{x:Bind ProposedKeys, Mode=TwoWay}"
-                                                Style="{StaticResource KeyChordEditorStyle}"
-                                                Visibility="{x:Bind IsInEditMode, Mode=OneWay}" />
-
-                        <!--  Edit Button  -->
-                        <Button x:Uid="Actions_EditButton"
-                                Grid.Column="2"
-                                AutomationProperties.Name="{x:Bind EditButtonName}"
-                                Background="Transparent"
-                                Click="{x:Bind ToggleEditMode}"
-                                GettingFocus="{x:Bind EditButtonGettingFocus}"
-                                LosingFocus="{x:Bind EditButtonLosingFocus}"
-                                Style="{StaticResource EditButtonStyle}"
-                                Visibility="{x:Bind ShowEditButton, Mode=OneWay}">
-                            <Button.Content>
-                                <FontIcon FontSize="{StaticResource EditButtonIconSize}"
-                                          Glyph="&#xE70F;" />
-                            </Button.Content>
-                            <Button.Resources>
-                                <ResourceDictionary>
-                                    <ResourceDictionary.ThemeDictionaries>
-                                        <ResourceDictionary x:Key="Light">
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                             Color="{StaticResource SystemAccentColor}" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                             Color="{StaticResource SystemAccentColor}" />
-                                        </ResourceDictionary>
-                                        <ResourceDictionary x:Key="Dark">
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                             Color="{StaticResource SystemAccentColor}" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                             Color="{StaticResource SystemAccentColor}" />
-                                        </ResourceDictionary>
-                                        <ResourceDictionary x:Key="HighContrast">
-                                            <SolidColorBrush x:Key="ButtonBackground"
-                                                             Color="{ThemeResource SystemColorButtonFaceColor}" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                             Color="{ThemeResource SystemColorHighlightColor}" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                             Color="{ThemeResource SystemColorHighlightColor}" />
-                                            <SolidColorBrush x:Key="ButtonForeground"
-                                                             Color="{ThemeResource SystemColorButtonTextColor}" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                             Color="{ThemeResource SystemColorHighlightTextColor}" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                             Color="{ThemeResource SystemColorHighlightTextColor}" />
-                                        </ResourceDictionary>
-                                    </ResourceDictionary.ThemeDictionaries>
-                                </ResourceDictionary>
-                            </Button.Resources>
-                        </Button>
-
-                        <!--  Edit Mode: Buttons  -->
-                        <StackPanel Grid.Column="2"
-                                    Orientation="Horizontal"
-                                    Visibility="{x:Bind IsInEditMode, Mode=OneWay}">
-
-                            <!--  Cancel editing the action  -->
-                            <Button x:Uid="Actions_CancelButton"
-                                    AutomationProperties.Name="{x:Bind CancelButtonName}"
-                                    Click="{x:Bind CancelChanges}"
-                                    Style="{StaticResource EditButtonStyle}">
-                                <FontIcon FontSize="{StaticResource EditButtonIconSize}"
-                                          Glyph="&#xE711;" />
-                            </Button>
-
-                            <!--  Accept changes  -->
-                            <Button x:Uid="Actions_AcceptButton"
-                                    Margin="8,0,0,0"
-                                    AutomationProperties.Name="{x:Bind AcceptButtonName}"
-                                    Click="{x:Bind AttemptAcceptChanges}"
-                                    Flyout="{x:Bind AcceptChangesFlyout, Mode=OneWay}"
-                                    Style="{StaticResource AccentEditButtonStyle}">
-                                <FontIcon FontSize="{StaticResource EditButtonIconSize}"
-                                          Glyph="&#xE8FB;" />
-                            </Button>
-
-                            <!--  Delete the current key binding  -->
-                            <Button x:Uid="Actions_DeleteButton"
-                                    Margin="8,0,0,0"
-                                    AutomationProperties.Name="{x:Bind DeleteButtonName}"
-                                    Style="{StaticResource DeleteSmallButtonStyle}"
-                                    Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(IsNewlyAdded), Mode=OneWay}">
-                                <Button.Content>
-                                    <FontIcon FontSize="{StaticResource EditButtonIconSize}"
-                                              Glyph="&#xE74D;" />
-                                </Button.Content>
-                                <Button.Flyout>
-                                    <Flyout FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenterStyle}">
-                                        <StackPanel>
-                                            <TextBlock x:Uid="Actions_DeleteConfirmationMessage"
-                                                       Style="{StaticResource CustomFlyoutTextStyle}" />
-                                            <Button x:Uid="Actions_DeleteConfirmationButton"
-                                                    Click="{x:Bind DeleteKeyBinding}" />
-                                        </StackPanel>
-                                    </Flyout>
-                                </Button.Flyout>
-                            </Button>
-
-                        </StackPanel>
+                                   Text="{x:Bind DisplayName, Mode=OneWay}" />
                     </Grid>
                 </ListViewItem>
             </DataTemplate>
@@ -330,6 +180,13 @@
                     HorizontalAlignment="Left"
                     Spacing="8"
                     Style="{StaticResource SettingsStackStyle}">
+            <TextBlock Style="{StaticResource DisclaimerStyle}"
+                       TextWrapping="WrapWholeWords">
+                    <Hyperlink NavigateUri="https://learn.microsoft.com/en-us/windows/terminal/customize-settings/actions"
+                               TextDecorations="None">
+                        <Run x:Uid="Actions_Disclaimer" />
+                    </Hyperlink>
+            </TextBlock>
             <!--  Add New Button  -->
             <Button x:Name="AddNewButton"
                     Click="AddNew_Click">
@@ -344,10 +201,12 @@
             </Button>
 
             <!--  Keybindings  -->
-            <ListView x:Name="KeyBindingsListView"
-                      ItemTemplate="{StaticResource KeyBindingTemplate}"
-                      ItemsSource="{x:Bind ViewModel.KeyBindingList, Mode=OneWay}"
-                      SelectionMode="None" />
+            <ListView x:Name="CommandsListView"
+                      IsItemClickEnabled="True"
+                      ItemTemplate="{StaticResource CommandTemplate}"
+                      ItemsSource="{x:Bind ViewModel.CommandList, Mode=OneWay}"
+                      ItemClick="{x:Bind ViewModel.CmdListItemClicked}"
+                      Margin="-8,0,0,0"/>
         </StackPanel>
     </Border>
 </Page>