From c0ae6837382df7a2c3ca635a4ba3e42615a40ea1 Mon Sep 17 00:00:00 2001
From: Carlos Zamora <carlos.zamora@microsoft.com>
Date: Tue, 1 Feb 2022 16:19:15 -0800
Subject: [PATCH] Localize and polish Profile page navigators (#12321)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary of the Pull Request
Adds some polish around the navigators in the profile page (i.e. "appearance" and "advanced" button) by doing the following:
- use the localized resources for the pivot on the navigators
- simplify the navigators to be buttons instead of toggle buttons

Doing so has Narrator identify these as buttons rather than toggle buttons. So now Narrator won't say that the button is "off", which just makes more sense.

## Validation Steps Performed
✅ Narrator says "Advanced button" or "Appearance button" on the navigator
✅ The navigators look the same as before
---
 .../CommonResources.xaml                      |  9 ++++----
 .../TerminalSettingsEditor/Profiles_Base.cpp  |  2 ++
 .../TerminalSettingsEditor/Profiles_Base.xaml | 21 +++++++++----------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index be9b201f91c..4956ac720b2 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -799,8 +799,8 @@
         </Setter>
     </Style>
 
-    <Style x:Key="ToggleButtonStyle"
-           TargetType="ToggleButton">
+    <Style x:Key="NavigatorButtonStyle"
+           TargetType="Button">
         <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
         <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
         <Setter Property="MaxWidth" Value="1000" />
@@ -808,14 +808,15 @@
         <Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
         <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
         <Setter Property="Padding" Value="16,0,8,0" />
-        <Setter Property="Margin" Value="0,4,8,0" />
+        <Setter Property="Margin" Value="0,4,0,0" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Template">
             <Setter.Value>
-                <ControlTemplate TargetType="ToggleButton">
+                <ControlTemplate TargetType="Button">
                     <Grid x:Name="Grid"
                           Padding="{TemplateBinding Padding}"
                           AutomationProperties.AccessibilityView="Raw"
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp b/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp
index 6c31b619b56..1c75efabfc9 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp
@@ -23,6 +23,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Automation::AutomationProperties::SetFullDescription(StartingDirectoryUseParentCheckbox(), unbox_value<hstring>(startingDirCheckboxTooltip));
 
         Automation::AutomationProperties::SetName(DeleteButton(), RS_(L"Profile_DeleteButton/Text"));
+        AppearanceNavigator().Content(box_value(RS_(L"Profile_Appearance/Header")));
+        AdvancedNavigator().Content(box_value(RS_(L"Profile_Advanced/Header")));
     }
 
     void Profiles_Base::OnNavigatedTo(const NavigationEventArgs& e)
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml b/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
index c18c5727245..08d7b3a4be5 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
@@ -146,19 +146,18 @@
                            Margin="0,48,0,0"
                            Style="{StaticResource TextBlockSubHeaderStyle}" />
 
-                <ToggleButton Click="Appearance_Click"
-                              Style="{StaticResource ToggleButtonStyle}">
+                <Button x:Name="AppearanceNavigator"
+                        Click="Appearance_Click"
+                        Style="{StaticResource NavigatorButtonStyle}">
+                    Appearance
+                </Button>
+                <Button x:Name="AdvancedNavigator"
+                        Click="Advanced_Click"
+                        Style="{StaticResource NavigatorButtonStyle}">
                     <TextBlock HorizontalAlignment="Left"
                                VerticalAlignment="Center"
-                               Text="Appearance" />
-                </ToggleButton>
-                <ToggleButton Click="Advanced_Click"
-                              Style="{StaticResource ToggleButtonStyle}">
-                    <ContentPresenter HorizontalAlignment="Left">
-                        <TextBlock HorizontalAlignment="Left"
-                                   Text="Advanced" />
-                    </ContentPresenter>
-                </ToggleButton>
+                               Text="Advanced" />
+                </Button>
                 <!--  Delete Button  -->
                 <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
                     <Button x:Name="DeleteButton"