mirror of
https://github.com/microsoft/terminal.git
synced 2026-07-08 17:56:28 +00:00
0d846aeb4d
## Summary of the Pull Request Adds customization for the New Tab Menu to the settings UI. - Settings Model changes: - The Settings UI generally works by creating a copy of the entire settings model objects on which we apply the changes to. Turns out, we completely left the NewTabMenu out of that process. So I went ahead and implemented it. - `FolderEntry` - `FolderEntry` exposes `Entries()` (used by the new tab menu to figure out what to actually render) and `RawEntries()` (the actual JSON data deserialized into settings model objects). I went ahead and exposed `RawEntries()` since we'll need to apply changes to it to then serialize. - View Model: - `NewTabMenuViewModel` is the main view model that interacts with the page. It maintains the current view of items and applies changes to the settings model. - `NewTabMenuEntryViewModel` and all of the other `_EntryViewModel` classes are wrappers for the settings model NTM entries. - `FolderTreeViewEntry` encapsulates `FolderEntryViewModel`. It allows us to construct a `TreeView` of just folders. - View changes and additions: - Added FontIconGlyph to the SettingContainer - Added a New Tab Menu item to the navigation view - Adding entries: a stack of SettingContainers is used here. We use the new `FontIconGlyph` to make this look nice! - Reordering entries: drag and drop is supported! This might not work in admin mode though, and we can't drag and drop into folders. Buttons were added to make this keyboard accessible. - To move entries into a folder, a button was added which then displays a TreeView of all folders. - Multiple entries can be moved to a folder or deleted at once! - Breadcrumbs are used for folders - When a folder is entered, additional controls are displayed to customize that folder. ## Verification - ✅ a11y pass - ✅ keyboard accessible - scenarios: - ✅ add entries (except actions) - ✅ changes propagated to settings model (aka "saving works") - ✅ reorder entries - ✅ move entries to an existing folder - ✅ delete multiple entries - ✅ delete individual entries - ✅ display entries (including actions) ## Follow-ups - [ ] add support for adding and editing action entries - [ ] when we discard changes or save, it would be cool if we could stay on the same page - [ ] allow customizing the folder entry _before_ adding it (current workaround is to add it, then edit it) - [ ] improve UI for setting icon (reuse UI from #17965)
390 lines
23 KiB
XML
390 lines
23 KiB
XML
<!--
|
|
Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
|
|
the MIT License. See LICENSE in the project root for license information.
|
|
-->
|
|
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:local="using:Microsoft.Terminal.Settings.Editor"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
|
|
mc:Ignorable="d">
|
|
|
|
<ResourceDictionary.ThemeDictionaries>
|
|
<ResourceDictionary x:Key="Light">
|
|
<Style x:Key="SecondaryTextBlockStyle"
|
|
TargetType="TextBlock">
|
|
<Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
|
|
</Style>
|
|
<SolidColorBrush x:Key="SubgroupHeaderBrush"
|
|
Color="{StaticResource SystemBaseMediumColor}" />
|
|
<Color x:Key="CardStrokeColorDefault">#0F000000</Color>
|
|
<SolidColorBrush x:Key="CardStrokeColorDefaultBrush"
|
|
Color="{StaticResource CardStrokeColorDefault}" />
|
|
<StaticResource x:Key="ExpanderHeaderBorderBrush"
|
|
ResourceKey="CardStrokeColorDefaultBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityBackgroundBrush"
|
|
ResourceKey="SystemFillColorCriticalBackgroundBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityBackgroundBrush"
|
|
ResourceKey="SystemFillColorCautionBackgroundBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityIconBackground"
|
|
ResourceKey="SystemFillColorCriticalBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityIconBackground"
|
|
ResourceKey="SystemFillColorCautionBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityIconForeground"
|
|
ResourceKey="TextFillColorInverseBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityIconForeground"
|
|
ResourceKey="TextFillColorInverseBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerTitleForeground"
|
|
ResourceKey="TextFillColorPrimaryBrush" />
|
|
<StaticResource x:Key="SettingContainerMessageForeground"
|
|
ResourceKey="TextFillColorPrimaryBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerResetButtonIconForeground"
|
|
ResourceKey="SystemAccentColorDark2" />
|
|
|
|
</ResourceDictionary>
|
|
<ResourceDictionary x:Key="HighContrast">
|
|
<Style x:Key="SecondaryTextBlockStyle"
|
|
TargetType="TextBlock" />
|
|
<!-- Do not mess with the foreground color for High Contrast. Let it ride as is. -->
|
|
<SolidColorBrush x:Key="SubgroupHeaderBrush"
|
|
Color="{ThemeResource SystemColorWindowTextColor}" />
|
|
<StaticResource x:Key="ExpanderHeaderBorderBrush"
|
|
ResourceKey="SystemColorButtonTextColorBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityBackgroundBrush"
|
|
ResourceKey="SystemColorWindowColorBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityBackgroundBrush"
|
|
ResourceKey="SystemColorWindowColorBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityIconBackground"
|
|
ResourceKey="SystemColorHighlightColorBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityIconBackground"
|
|
ResourceKey="SystemColorHighlightColorBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityIconForeground"
|
|
ResourceKey="SystemColorHighlightTextColorBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityIconForeground"
|
|
ResourceKey="SystemColorHighlightTextColorBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerTitleForeground"
|
|
ResourceKey="SystemColorWindowTextColorBrush" />
|
|
<StaticResource x:Key="SettingContainerMessageForeground"
|
|
ResourceKey="SystemColorWindowTextColorBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerResetButtonIconForeground"
|
|
ResourceKey="SystemAccentColorLight1" />
|
|
</ResourceDictionary>
|
|
<ResourceDictionary x:Key="Dark">
|
|
<Style x:Key="SecondaryTextBlockStyle"
|
|
TargetType="TextBlock">
|
|
<Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
|
|
</Style>
|
|
<SolidColorBrush x:Key="SubgroupHeaderBrush"
|
|
Color="{StaticResource SystemBaseMediumColor}" />
|
|
<Color x:Key="CardStrokeColorDefault">#19000000</Color>
|
|
<SolidColorBrush x:Key="CardStrokeColorDefaultBrush"
|
|
Color="{StaticResource CardStrokeColorDefault}" />
|
|
<StaticResource x:Key="ExpanderHeaderBorderBrush"
|
|
ResourceKey="CardStrokeColorDefaultBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityBackgroundBrush"
|
|
ResourceKey="SystemFillColorCriticalBackgroundBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityBackgroundBrush"
|
|
ResourceKey="SystemFillColorCautionBackgroundBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityIconBackground"
|
|
ResourceKey="SystemFillColorCriticalBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityIconBackground"
|
|
ResourceKey="SystemFillColorCautionBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerErrorSeverityIconForeground"
|
|
ResourceKey="TextFillColorInverseBrush" />
|
|
<StaticResource x:Key="SettingContainerWarningSeverityIconForeground"
|
|
ResourceKey="TextFillColorInverseBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerTitleForeground"
|
|
ResourceKey="TextFillColorPrimaryBrush" />
|
|
<StaticResource x:Key="SettingContainerMessageForeground"
|
|
ResourceKey="TextFillColorPrimaryBrush" />
|
|
|
|
<StaticResource x:Key="SettingContainerResetButtonIconForeground"
|
|
ResourceKey="SystemAccentColorLight2" />
|
|
</ResourceDictionary>
|
|
</ResourceDictionary.ThemeDictionaries>
|
|
|
|
<FontWeight x:Key="SettingContainerTitleFontWeight">SemiBold</FontWeight>
|
|
|
|
<x:String x:Key="SettingContainerIconBackgroundGlyph"></x:String>
|
|
<x:String x:Key="SettingContainerErrorIconGlyph"></x:String>
|
|
<x:String x:Key="SettingContainerWarningIconGlyph"></x:String>
|
|
|
|
<Thickness x:Key="SettingContainerIconMargin">0,4,8,4</Thickness>
|
|
<x:Double x:Key="SettingContainerIconFontSize">16</x:Double>
|
|
|
|
<Style x:Key="StackPanelInExpanderStyle"
|
|
TargetType="StackPanel">
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
<Setter Property="Padding" Value="0,12,0,12" />
|
|
</Style>
|
|
|
|
<Style x:Key="SettingContainerResetButtonStyle"
|
|
TargetType="Button">
|
|
<Setter Property="Margin" Value="5,0,0,0" />
|
|
<Setter Property="Height" Value="19" />
|
|
<Setter Property="Width" Value="19" />
|
|
<Setter Property="Padding" Value="0" />
|
|
<Setter Property="BorderBrush" Value="Transparent" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
</Style>
|
|
|
|
<Style x:Key="SettingContainerFontIconStyle"
|
|
TargetType="FontIcon">
|
|
<Setter Property="Foreground" Value="{ThemeResource SettingContainerResetButtonIconForeground}" />
|
|
<Setter Property="FontSize" Value="11" />
|
|
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
|
|
</Style>
|
|
|
|
<Style x:Key="NonExpanderGrid"
|
|
TargetType="Grid">
|
|
<Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
|
|
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
|
|
<Setter Property="MinHeight" Value="64" />
|
|
<Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
|
|
<Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
|
|
<Setter Property="Padding" Value="16,0,8,0" />
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
|
|
</Style>
|
|
|
|
<Style x:Key="SettingsPageItemHeaderStyle"
|
|
BasedOn="{StaticResource BodyTextBlockStyle}"
|
|
TargetType="TextBlock">
|
|
<Setter Property="LineHeight" Value="20" />
|
|
<Setter Property="TextWrapping" Value="WrapWholeWords" />
|
|
</Style>
|
|
|
|
<Style x:Key="SettingsPageItemDescriptionStyle"
|
|
BasedOn="{StaticResource CaptionTextBlockStyle}"
|
|
TargetType="TextBlock">
|
|
<Setter Property="Margin" Value="0,0,24,0" />
|
|
<Setter Property="LineHeight" Value="16" />
|
|
<Setter Property="Foreground" Value="{ThemeResource SubgroupHeaderBrush}" />
|
|
<Setter Property="TextWrapping" Value="WrapWholeWords" />
|
|
</Style>
|
|
|
|
<!-- A setting container for a setting that has no additional options -->
|
|
<Style TargetType="local:SettingContainer">
|
|
<Setter Property="Margin" Value="0,4,0,0" />
|
|
<Setter Property="IsTabStop" Value="False" />
|
|
<Setter Property="MaxWidth" Value="1000" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="local:SettingContainer">
|
|
<Grid AutomationProperties.Name="{TemplateBinding Header}"
|
|
Style="{StaticResource NonExpanderGrid}">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<FontIcon Grid.Column="0"
|
|
Margin="0,0,10,0"
|
|
Glyph="{TemplateBinding FontIconGlyph}" />
|
|
<StackPanel Grid.Column="1"
|
|
Style="{StaticResource StackPanelInExpanderStyle}">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
|
|
Text="{TemplateBinding Header}" />
|
|
<Button x:Name="ResetButton"
|
|
Style="{StaticResource SettingContainerResetButtonStyle}">
|
|
<FontIcon Glyph=""
|
|
Style="{StaticResource SettingContainerFontIconStyle}" />
|
|
</Button>
|
|
</StackPanel>
|
|
<TextBlock x:Name="HelpTextBlock"
|
|
Style="{StaticResource SettingsPageItemDescriptionStyle}"
|
|
Text="{TemplateBinding HelpText}" />
|
|
</StackPanel>
|
|
<ContentPresenter Grid.Column="2"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center"
|
|
Content="{TemplateBinding Content}" />
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- A setting container which can expand -->
|
|
<Style x:Key="ExpanderSettingContainerStyle"
|
|
TargetType="local:SettingContainer">
|
|
<Setter Property="MaxWidth" Value="1000" />
|
|
<Setter Property="IsTabStop" Value="False" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="local:SettingContainer">
|
|
<muxc:Expander x:Name="Expander"
|
|
Margin="0,4,0,0"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Stretch"
|
|
Content="{TemplateBinding Content}"
|
|
IsExpanded="{TemplateBinding StartExpanded}">
|
|
<muxc:Expander.Header>
|
|
<Grid MinHeight="64">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<FontIcon Grid.Column="0"
|
|
Margin="0,0,10,0"
|
|
Glyph="{TemplateBinding FontIconGlyph}" />
|
|
<StackPanel Grid.Column="1"
|
|
Style="{StaticResource StackPanelInExpanderStyle}">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
|
|
Text="{TemplateBinding Header}" />
|
|
<Button x:Name="ResetButton"
|
|
Style="{StaticResource SettingContainerResetButtonStyle}">
|
|
<FontIcon Glyph=""
|
|
Style="{StaticResource SettingContainerFontIconStyle}" />
|
|
</Button>
|
|
</StackPanel>
|
|
<TextBlock x:Name="HelpTextBlock"
|
|
Style="{StaticResource SettingsPageItemDescriptionStyle}"
|
|
Text="{TemplateBinding HelpText}" />
|
|
</StackPanel>
|
|
<TextBlock Grid.Column="2"
|
|
MaxWidth="250"
|
|
Margin="0,0,-16,0"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center"
|
|
FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
|
|
Style="{StaticResource SettingsPageItemDescriptionStyle}"
|
|
Text="{TemplateBinding CurrentValue}" />
|
|
</Grid>
|
|
</muxc:Expander.Header>
|
|
</muxc:Expander>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- A setting container that displays a warning with an icon -->
|
|
<Style x:Key="SettingContainerWarningStyle"
|
|
TargetType="local:SettingContainer">
|
|
<Setter Property="Margin" Value="0,4,0,0" />
|
|
<Setter Property="IsTabStop" Value="False" />
|
|
<Setter Property="MaxWidth" Value="1000" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="local:SettingContainer">
|
|
<Grid AutomationProperties.Name="{TemplateBinding Header}"
|
|
Background="{ThemeResource SettingContainerWarningSeverityBackgroundBrush}"
|
|
Style="{StaticResource NonExpanderGrid}">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<StackPanel Style="{StaticResource StackPanelInExpanderStyle}">
|
|
<StackPanel Orientation="Horizontal">
|
|
<Grid>
|
|
<TextBlock x:Name="IconBackground"
|
|
Grid.Column="0"
|
|
Margin="{StaticResource SettingContainerIconMargin}"
|
|
VerticalAlignment="Center"
|
|
AutomationProperties.AccessibilityView="Raw"
|
|
FontFamily="{ThemeResource SymbolThemeFontFamily}"
|
|
FontSize="{StaticResource SettingContainerIconFontSize}"
|
|
Foreground="{ThemeResource SettingContainerWarningSeverityIconBackground}"
|
|
Text="{StaticResource SettingContainerIconBackgroundGlyph}" />
|
|
|
|
<TextBlock x:Name="StandardIcon"
|
|
Grid.Column="0"
|
|
Margin="{StaticResource SettingContainerIconMargin}"
|
|
VerticalAlignment="Center"
|
|
FontFamily="{ThemeResource SymbolThemeFontFamily}"
|
|
FontSize="{StaticResource SettingContainerIconFontSize}"
|
|
Foreground="{ThemeResource SettingContainerWarningSeverityIconForeground}"
|
|
Text="{StaticResource SettingContainerWarningIconGlyph}" />
|
|
</Grid>
|
|
<TextBlock VerticalAlignment="Center"
|
|
FontWeight="{StaticResource SettingContainerTitleFontWeight}"
|
|
Foreground="{ThemeResource SettingContainerTitleForeground}"
|
|
Style="{StaticResource SettingsPageItemHeaderStyle}"
|
|
Text="{TemplateBinding Header}" />
|
|
</StackPanel>
|
|
<TextBlock x:Name="HelpTextBlock"
|
|
Foreground="{ThemeResource SettingContainerMessageForeground}"
|
|
Style="{StaticResource SettingsPageItemDescriptionStyle}"
|
|
Text="{TemplateBinding HelpText}" />
|
|
</StackPanel>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- A setting container that displays an error with an icon -->
|
|
<Style x:Key="SettingContainerErrorStyle"
|
|
TargetType="local:SettingContainer">
|
|
<Setter Property="Margin" Value="0,4,0,0" />
|
|
<Setter Property="IsTabStop" Value="False" />
|
|
<Setter Property="MaxWidth" Value="1000" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="local:SettingContainer">
|
|
<Grid AutomationProperties.Name="{TemplateBinding Header}"
|
|
Background="{ThemeResource SettingContainerErrorSeverityBackgroundBrush}"
|
|
Style="{StaticResource NonExpanderGrid}">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<StackPanel Style="{StaticResource StackPanelInExpanderStyle}">
|
|
<StackPanel Orientation="Horizontal">
|
|
<Grid>
|
|
<TextBlock x:Name="IconBackground"
|
|
Grid.Column="0"
|
|
Margin="{StaticResource SettingContainerIconMargin}"
|
|
VerticalAlignment="Center"
|
|
AutomationProperties.AccessibilityView="Raw"
|
|
FontFamily="{ThemeResource SymbolThemeFontFamily}"
|
|
FontSize="{StaticResource SettingContainerIconFontSize}"
|
|
Foreground="{ThemeResource SettingContainerErrorSeverityIconBackground}"
|
|
Text="{StaticResource SettingContainerIconBackgroundGlyph}" />
|
|
|
|
<TextBlock x:Name="StandardIcon"
|
|
Grid.Column="0"
|
|
Margin="{StaticResource SettingContainerIconMargin}"
|
|
VerticalAlignment="Center"
|
|
FontFamily="{ThemeResource SymbolThemeFontFamily}"
|
|
FontSize="{StaticResource SettingContainerIconFontSize}"
|
|
Foreground="{ThemeResource SettingContainerErrorSeverityIconForeground}"
|
|
Text="{StaticResource SettingContainerErrorIconGlyph}" />
|
|
</Grid>
|
|
<TextBlock VerticalAlignment="Center"
|
|
FontWeight="{StaticResource SettingContainerTitleFontWeight}"
|
|
Foreground="{ThemeResource SettingContainerTitleForeground}"
|
|
Style="{StaticResource SettingsPageItemHeaderStyle}"
|
|
Text="{TemplateBinding Header}" />
|
|
</StackPanel>
|
|
<TextBlock x:Name="HelpTextBlock"
|
|
Foreground="{ThemeResource SettingContainerMessageForeground}"
|
|
Style="{StaticResource SettingsPageItemDescriptionStyle}"
|
|
Text="{TemplateBinding HelpText}" />
|
|
</StackPanel>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
</ResourceDictionary>
|