bb0e1d3979
This PR performs a large overall polish of the color schemes page: - Ensures keyboard navigation is holistically improved (i.e. fully accessible, no lost focus, etc...) - Adds tooltips and automation properties to all controls - Redesigns the page according to @mdtauk's approved design ([link](https://github.com/microsoft/terminal/pull/8997#issuecomment-771623842)). Note, there are some minor modifications to the design that were approved by @cinnamon-msft. - Automatically reflow's the color buttons when they do not fit in horizontal mode ## Detailed Description of the Pull Request / Additional comments - Redesign - a data template was introduced to make color representation consistent and straightforward - `ContentControl` is used to hold a reference to the `ColorTableEntry` and represent it properly using the aforementioned data template. - The design is mainly a StackPanel holding two grids: color table & functional colors. - The color table is populated via code. After much thought, this seems to be the easiest way to correctly bind 16 controls that are very similar. - The functional colors are populated via XAML manually. - We need a grid to separate the text and the buttons. This allows for scenarios like "selection background is the longest string" to force the buttons and text to be aligned. - Reflow - A `VisualStateManager` uses an `AdaptiveTrigger` to change the orientation of the color tables' stack panel. The adaptive trigger was carefully calculated to align with the navigation view's breakpoint. - Keyboard Navigation - (a lesson from `SettingContainer`) `ContentControl` can be focused as opposed to the content inside of it. We don't want that, so we set `IsTabStop` to false on it. That basically fixes all of our keyboard navigation issues in this new design. - Automation Properties and ToolTips - As in my previous PRs, I can't seem to figure out how to bind to a control's automation property to its own tooltip. So I had to do this in the code and add a few `x:Name` around. ## Validation Steps Performed - Manually tested... - tab navigation - accessibility insights - NVDA - changing color schemes updates color table - specific scenario: - change a color table color and a functional color - navigate to a different color scheme - navigate back to the first color scheme - if the colors persist, the changes were propagated to the settings model References #8997 - Based on the work from @Chips1234 References #6800 - Settings UI Epic Closes #8765 - Polish Color Schemes page Closes #8899 - Automation Properties Closes #8768 - Keyboard Navigation
42 lines
1.3 KiB
Plaintext
42 lines
1.3 KiB
Plaintext
// Copyright (c) Microsoft Corporation.
|
|
// Licensed under the MIT license.
|
|
|
|
namespace Microsoft.Terminal.Settings.Editor
|
|
{
|
|
|
|
runtimeclass ColorSchemesPageNavigationState
|
|
{
|
|
Microsoft.Terminal.Settings.Model.CascadiaSettings Settings;
|
|
String LastSelectedScheme;
|
|
};
|
|
|
|
[default_interface] runtimeclass ColorSchemes : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
|
|
{
|
|
ColorSchemes();
|
|
ColorSchemesPageNavigationState State { get; };
|
|
|
|
Boolean CanDeleteCurrentScheme { get; };
|
|
Boolean IsRenaming { get; };
|
|
|
|
// Terminal Colors
|
|
Windows.Foundation.Collections.IVector<ColorTableEntry> CurrentNonBrightColorTable { get; };
|
|
Windows.Foundation.Collections.IVector<ColorTableEntry> CurrentBrightColorTable { get; };
|
|
|
|
// System Colors
|
|
ColorTableEntry CurrentForegroundColor;
|
|
ColorTableEntry CurrentBackgroundColor;
|
|
ColorTableEntry CurrentCursorColor;
|
|
ColorTableEntry CurrentSelectionBackgroundColor;
|
|
|
|
|
|
Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Model.ColorScheme> ColorSchemeList { get; };
|
|
}
|
|
|
|
[default_interface] runtimeclass ColorTableEntry : Windows.UI.Xaml.Data.INotifyPropertyChanged
|
|
{
|
|
String Name { get; };
|
|
IInspectable Tag;
|
|
Windows.UI.Color Color;
|
|
}
|
|
}
|