Fix more SUI and Rejuvenated UI issues (#12326)

- The add new profile page now uses a dropdown rather than radio buttons - Subheaders, breadcrumb bar, buttons etc are now all centralized when the window is maximized (so they all align with the expanders now) - We no longer override the titlebar colors and instead use the xaml defaults (these still aren't great but at least we will get the fix automatically when it happens upstream) - Breadcrumb bar no longer has a negative margin, so there's no weird overlap that happens when the window becomes small - The number boxes for launch size and font size now use the `Inline` placement mode rather than compact, allowing modification to the number with fewer clicks - Textboxes now have a greater max width so they can occupy more space in the expander if needed
microsoft · Feb 2, 2022 · 0a545b7 · 0a545b7
1 parent 24c5f7b
commit 0a545b7
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 154 deletions.
diff --git a/src/cascadia/TerminalApp/App.xaml b/src/cascadia/TerminalApp/App.xaml
@@ -54,20 +54,20 @@
                     <ResourceDictionary.ThemeDictionaries>
                         <ResourceDictionary x:Key="Dark">
                             <!--  Define resources for Dark mode here  -->
-                            <SolidColorBrush x:Key="TabViewBackground"
-                                             Color="#FF333333" />
+                            <StaticResource x:Key="TabViewBackground"
+                                            ResourceKey="ApplicationPageBackgroundThemeBrush" />
 
-                            <SolidColorBrush x:Key="UnfocusedBorderBrush"
-                                             Color="#FF333333" />
+                            <StaticResource x:Key="UnfocusedBorderBrush"
+                                            ResourceKey="ApplicationPageBackgroundThemeBrush" />
                         </ResourceDictionary>
 
                         <ResourceDictionary x:Key="Light">
                             <!--  Define resources for Light mode here  -->
-                            <SolidColorBrush x:Key="TabViewBackground"
-                                             Color="#FFCCCCCC" />
+                            <StaticResource x:Key="TabViewBackground"
+                                            ResourceKey="ApplicationPageBackgroundThemeBrush" />
 
-                            <SolidColorBrush x:Key="UnfocusedBorderBrush"
-                                             Color="#FFCCCCCC" />
+                            <StaticResource x:Key="UnfocusedBorderBrush"
+                                            ResourceKey="ApplicationPageBackgroundThemeBrush" />
                         </ResourceDictionary>
 
                     </ResourceDictionary.ThemeDictionaries>

diff --git a/src/cascadia/TerminalSettingsEditor/Actions.xaml b/src/cascadia/TerminalSettingsEditor/Actions.xaml
@@ -375,29 +375,30 @@
     </Page.Resources>
 
     <ScrollViewer ViewChanging="ViewChanging">
-        <StackPanel MaxWidth="600"
-                    HorizontalAlignment="Left"
-                    Spacing="8"
-                    Style="{StaticResource SettingsStackStyle}">
-            <!--  Add New Button  -->
-            <Button x:Name="AddNewButton"
-                    Click="AddNew_Click">
-                <Button.Content>
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  Glyph="&#xE710;" />
-                        <TextBlock x:Uid="Actions_AddNewTextBlock"
-                                   Style="{StaticResource IconButtonTextBlockStyle}" />
-                    </StackPanel>
-                </Button.Content>
-            </Button>
-
-            <!--  Keybindings  -->
-            <ListView x:Name="KeyBindingsListView"
-                      ItemTemplate="{StaticResource KeyBindingTemplate}"
-                      ItemsSource="{x:Bind KeyBindingList, Mode=OneWay}"
-                      SelectionMode="None" />
-        </StackPanel>
+        <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+            <StackPanel MaxWidth="600"
+                        HorizontalAlignment="Left"
+                        Spacing="8"
+                        Style="{StaticResource SettingsStackStyle}">
+                <!--  Add New Button  -->
+                <Button x:Name="AddNewButton"
+                        Click="AddNew_Click">
+                    <Button.Content>
+                        <StackPanel Orientation="Horizontal">
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                      Glyph="&#xE710;" />
+                            <TextBlock x:Uid="Actions_AddNewTextBlock"
+                                       Style="{StaticResource IconButtonTextBlockStyle}" />
+                        </StackPanel>
+                    </Button.Content>
+                </Button>
 
+                <!--  Keybindings  -->
+                <ListView x:Name="KeyBindingsListView"
+                          ItemTemplate="{StaticResource KeyBindingTemplate}"
+                          ItemsSource="{x:Bind KeyBindingList, Mode=OneWay}"
+                          SelectionMode="None" />
+            </StackPanel>
+        </Border>
     </ScrollViewer>
 </Page>
diff --git a/src/cascadia/TerminalSettingsEditor/AddProfile.xaml b/src/cascadia/TerminalSettingsEditor/AddProfile.xaml
@@ -23,25 +23,29 @@
 
     <ScrollViewer ViewChanging="ViewChanging">
         <StackPanel Style="{StaticResource SettingsStackStyle}">
-            <Button x:Name="AddNewButton"
-                    Click="AddNewClick"
-                    Style="{StaticResource AccentButtonStyle}">
-                <Button.Content>
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  Glyph="&#xE710;" />
-                        <TextBlock x:Uid="AddProfile_AddNewTextBlock"
-                                   Style="{StaticResource IconButtonTextBlockStyle}" />
-                    </StackPanel>
-                </Button.Content>
-            </Button>
+            <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                <Button x:Name="AddNewButton"
+                        Click="AddNewClick"
+                        Style="{StaticResource AccentButtonStyle}">
+                    <Button.Content>
+                        <StackPanel Orientation="Horizontal">
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                      Glyph="&#xE710;" />
+                            <TextBlock x:Uid="AddProfile_AddNewTextBlock"
+                                       Style="{StaticResource IconButtonTextBlockStyle}" />
+                        </StackPanel>
+                    </Button.Content>
+                </Button>
+            </Border>
             <StackPanel Margin="{StaticResource StandardControlMargin}">
                 <local:SettingContainer x:Uid="AddProfile_Duplicate">
-                    <muxc:RadioButtons x:Name="Profiles"
-                                       AutomationProperties.AccessibilityView="Content"
-                                       ItemsSource="{x:Bind State.Settings.AllProfiles, Mode=OneWay}"
-                                       SelectionChanged="ProfilesSelectionChanged">
-                        <muxc:RadioButtons.ItemTemplate>
+                    <ComboBox x:Name="Profiles"
+                              AutomationProperties.AccessibilityView="Content"
+                              ItemsSource="{x:Bind State.Settings.AllProfiles, Mode=OneWay}"
+                              SelectedIndex="0"
+                              SelectionChanged="ProfilesSelectionChanged"
+                              Style="{StaticResource ComboBoxSettingStyle}">
+                        <ComboBox.ItemTemplate>
                             <DataTemplate x:DataType="model:Profile">
                                 <Grid HorizontalAlignment="Stretch"
                                       ColumnSpacing="8">
@@ -63,23 +67,25 @@
 
                                 </Grid>
                             </DataTemplate>
-                        </muxc:RadioButtons.ItemTemplate>
-                    </muxc:RadioButtons>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>
                 </local:SettingContainer>
-                <Button x:Name="DuplicateButton"
-                        Margin="{StaticResource StandardControlMargin}"
-                        Click="DuplicateClick"
-                        IsEnabled="{x:Bind IsProfileSelected, Mode=OneWay}"
-                        Style="{StaticResource AccentButtonStyle}">
-                    <Button.Content>
-                        <StackPanel Orientation="Horizontal">
-                            <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                      Glyph="&#xE8C8;" />
-                            <TextBlock x:Uid="AddProfile_DuplicateTextBlock"
-                                       Style="{StaticResource IconButtonTextBlockStyle}" />
-                        </StackPanel>
-                    </Button.Content>
-                </Button>
+                <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                    <Button x:Name="DuplicateButton"
+                            Margin="{StaticResource StandardControlMargin}"
+                            Click="DuplicateClick"
+                            IsEnabled="{x:Bind IsProfileSelected, Mode=OneWay}"
+                            Style="{StaticResource AccentButtonStyle}">
+                        <Button.Content>
+                            <StackPanel Orientation="Horizontal">
+                                <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                          Glyph="&#xE8C8;" />
+                                <TextBlock x:Uid="AddProfile_DuplicateTextBlock"
+                                           Style="{StaticResource IconButtonTextBlockStyle}" />
+                            </StackPanel>
+                        </Button.Content>
+                    </Button>
+                </Border>
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -41,7 +41,7 @@
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <!--  Grouping: Text  -->
             <TextBlock x:Uid="Profile_TextHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Color Scheme  -->
             <local:SettingContainer x:Uid="Profile_ColorScheme"
@@ -170,7 +170,7 @@
         <!--  Grouping: Cursor  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Profile_CursorHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Cursor Shape  -->
             <local:SettingContainer x:Uid="Profile_CursorShape"
@@ -210,7 +210,7 @@
         <!--  Grouping: Background  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Profile_BackgroundHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Background Image  -->
             <local:SettingContainer x:Name="BackgroundImageContainer"
@@ -464,7 +464,7 @@
         <!--  Grouping: Text Formatting  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Appearance_TextFormattingHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Intense is bold, bright  -->
             <local:SettingContainer x:Uid="Appearance_IntenseTextStyle"

diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -94,7 +94,8 @@
     </Page.Resources>
 
     <ScrollViewer ViewChanging="ViewChanging">
-        <StackPanel Margin="{StaticResource StandardIndentMargin}"
+        <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    Margin="{StaticResource StandardIndentMargin}"
                     Spacing="24">
 
             <!--  Select Color and Add New Button  -->

diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -15,6 +15,7 @@
     <Thickness x:Key="StandardIndentMargin">13,0,0,0</Thickness>
     <Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>
     <x:Double x:Key="StandardBoxMinWidth">250</x:Double>
+    <x:Double x:Key="StandardControlMaxWidth">1000</x:Double>
 
     <!--
         This is for styling the entire items control used on the
@@ -48,11 +49,18 @@
     <Style x:Key="TextBoxSettingStyle"
            BasedOn="{StaticResource DefaultTextBoxStyle}"
            TargetType="TextBox">
-        <Setter Property="Width" Value="{StaticResource StandardBoxMinWidth}" />
+        <Setter Property="MinWidth" Value="{StaticResource StandardBoxMinWidth}" />
+        <Setter Property="MaxWidth" Value="500" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="TextWrapping" Value="Wrap" />
     </Style>
 
+    <Style x:Key="TextBlockSubHeaderStyle"
+           BasedOn="{StaticResource SubtitleTextBlockStyle}"
+           TargetType="TextBlock">
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
+    </Style>
+
     <!--  Used for disclaimers  -->
     <Style x:Key="DisclaimerStyle"
            TargetType="TextBlock">
@@ -71,7 +79,7 @@
     <!--  Number Box  -->
     <Style x:Key="NumberBoxSettingStyle"
            TargetType="muxc:NumberBox">
-        <Setter Property="SpinButtonPlacementMode" Value="Compact" />
+        <Setter Property="SpinButtonPlacementMode" Value="Inline" />
         <Setter Property="HorizontalAlignment" Value="Left" />
     </Style>
 

diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.xaml b/src/cascadia/TerminalSettingsEditor/MainPage.xaml
@@ -42,9 +42,14 @@
                          ItemInvoked="SettingsNav_ItemInvoked"
                          Loaded="SettingsNav_Loaded"
                          TabFocusNavigation="Cycle">
+        <muxc:NavigationView.Resources>
+            <ResourceDictionary>
+                <Thickness x:Key="NavigationViewHeaderMargin">15,0,0,0</Thickness>
+            </ResourceDictionary>
+        </muxc:NavigationView.Resources>
         <muxc:NavigationView.Header>
             <muxc:BreadcrumbBar x:Name="NavigationBreadcrumbBar"
-                                Margin="-40,-40,0,16"
+                                MaxWidth="{StaticResource StandardControlMaxWidth}"
                                 ItemClicked="BreadcrumbBar_ItemClicked"
                                 ItemsSource="{x:Bind Breadcrumbs}">
                 <muxc:BreadcrumbBar.ItemTemplate>
@@ -131,7 +136,7 @@
             </muxc:NavigationViewItem>
         </muxc:NavigationView.FooterMenuItems>
 
-        <Grid Margin="0,-30,0,0">
+        <Grid Margin="0,0,0,0">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
                 <RowDefinition Height="Auto" />

diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml
@@ -45,21 +45,23 @@
                       ViewChanging="ViewChanging">
             <StackPanel Style="{StaticResource SettingsStackStyle}">
                 <!--  Control Preview  -->
-                <Border x:Name="ControlPreview"
-                        Width="350"
-                        Height="160"
-                        Margin="0,0,0,12"
-                        HorizontalAlignment="Left"
-                        BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                        BorderThickness="1" />
+                <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                    <Border x:Name="ControlPreview"
+                            Width="350"
+                            Height="160"
+                            Margin="0,0,0,12"
+                            HorizontalAlignment="Left"
+                            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                            BorderThickness="1" />
+                </Border>
 
                 <local:Appearances Appearance="{x:Bind Profile.DefaultAppearance, Mode=OneWay}"
                                    SourceProfile="{x:Bind Profile, Mode=OneWay}" />
 
                 <!--  Grouping: Transparency  -->
                 <StackPanel Style="{StaticResource PivotStackStyle}">
                     <TextBlock x:Uid="Profile_TransparencyHeader"
-                               Style="{StaticResource SubtitleTextBlockStyle}" />
+                               Style="{StaticResource TextBlockSubHeaderStyle}" />
 
                     <!--  Opacity  -->
                     <local:SettingContainer x:Name="OpacityContainer"
@@ -99,7 +101,7 @@
                 <!--  Grouping: Window  -->
                 <StackPanel Style="{StaticResource PivotStackStyle}">
                     <TextBlock x:Uid="Profile_WindowHeader"
-                               Style="{StaticResource SubtitleTextBlockStyle}" />
+                               Style="{StaticResource TextBlockSubHeaderStyle}" />
 
                     <!--  Padding  -->
                     <local:SettingContainer x:Uid="Profile_Padding"
@@ -133,7 +135,7 @@
                                            SelectedItem="{x:Bind Profile.CurrentScrollState, Mode=TwoWay}" />
                     </local:SettingContainer>
                 </StackPanel>
-                <StackPanel>
+                <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}">
                     <StackPanel Orientation="Horizontal"
                                 Visibility="{x:Bind Profile.EditableUnfocusedAppearance, Mode=OneWay}">
                         <TextBlock x:Uid="Profile_UnfocusedAppearanceTextBlock"