terminal/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
Kayla Cinnamon 98d0613124
Include UWP styling guidance in settings UI (#8831)
<!-- Enter a brief description/summary of your PR here. What does it fix/what does it change/how was it tested (even manually, if necessary)? -->
## Summary of the Pull Request
The settings UI was _close_ to looking just right, it just needed some tweaks to adhere to the proper guidance: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/forms

This PR changes the font sizes, spacing, and layout of all of the pages to align with guidance.

Some pics:
![image](https://user-images.githubusercontent.com/48369326/105241313-58194980-5b22-11eb-9f18-524cc988ec33.png)

![image](https://user-images.githubusercontent.com/48369326/105241331-60718480-5b22-11eb-8698-b9fadf3c3016.png)

![image](https://user-images.githubusercontent.com/48369326/105244413-57ce7d80-5b25-11eb-87c3-ee5f19417318.png)

![image](https://user-images.githubusercontent.com/48369326/105241384-73845480-5b22-11eb-9517-4010b145ffc2.png)

Min width:
![image](https://user-images.githubusercontent.com/48369326/105241406-7aab6280-5b22-11eb-9c59-ffc72f66509d.png)

<!-- Other than the issue solved, is this relevant to any other issues/existing PRs? --> 
## References

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist
* [x] Closes #8816 
* [x] CLA signed. If not, go over [here](https://cla.opensource.microsoft.com/microsoft/Terminal) and sign the CLA
* [ ] Tests added/passed
* [ ] Documentation updated. If checked, please file a pull request on [our docs repo](https://github.com/MicrosoftDocs/terminal) and link it here: #xxx
* [ ] Schema updated.
* [x] I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx

<!-- Provide a more detailed description of the PR, other things fixed or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments
* Removed custom font sizing, WinUI adheres to guidance anyway
* 24px spacing between controls and 48px between groupings
* Controls shouldn't be next to each other (see Launch size)
* Technically Launch size is a grouping, so it gets upgraded to subtitle status
* Left margins for pages have been fixed to left align with the page titles
* Single checkboxes have been changed to toggle switches

<!-- Describe how you validated the behavior. Add automated tests wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
2021-01-20 22:42:39 +00:00

76 lines
3.7 KiB
XML

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
the MIT License. See LICENSE in the project root for license information. -->
<Page
x:Class="Microsoft.Terminal.Settings.Editor.GlobalAppearance"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Microsoft.Terminal.Settings.Editor"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CommonResources.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DataTemplate x:DataType="local:EnumEntry" x:Key="EnumRadioButtonTemplate">
<RadioButton Content="{x:Bind EnumName, Mode=OneWay}"/>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<ScrollViewer>
<StackPanel Style="{StaticResource SettingsStackStyle}">
<!--Theme-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}"
Margin="0">
<muxc:RadioButtons x:Uid="Globals_Theme"
SelectedItem="{x:Bind CurrentTheme, Mode=TwoWay}"
ItemsSource="{x:Bind ThemeList, Mode=OneWay}"
ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
</ContentPresenter>
<!--Always show tabs-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}">
<ToggleSwitch x:Uid="Globals_AlwaysShowTabs"
IsOn="{x:Bind State.Globals.AlwaysShowTabs, Mode=TwoWay}"/>
</ContentPresenter>
<!--Show Titlebar-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}">
<ToggleSwitch x:Uid="Globals_ShowTitlebar"
IsOn="{x:Bind State.Globals.ShowTabsInTitlebar, Mode=TwoWay}"/>
</ContentPresenter>
<!--Show Title in Titlebar-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}">
<ToggleSwitch x:Uid="Globals_ShowTitleInTitlebar"
IsOn="{x:Bind State.Globals.ShowTitleInTitlebar, Mode=TwoWay}"/>
</ContentPresenter>
<!--Always on Top-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}">
<ToggleSwitch x:Uid="Globals_AlwaysOnTop"
IsOn="{x:Bind State.Globals.AlwaysOnTop, Mode=TwoWay}"/>
</ContentPresenter>
<!--Tab Width Mode-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}">
<muxc:RadioButtons x:Uid="Globals_TabWidthMode"
SelectedItem="{x:Bind CurrentTabWidthMode, Mode=TwoWay}"
ItemsSource="{x:Bind TabWidthModeList, Mode=OneWay}"
ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
</ContentPresenter>
<!--Disable Animations-->
<ContentPresenter Style="{StaticResource SettingContainerStyle}">
<ToggleSwitch x:Uid="Globals_DisableAnimations"
IsOn="{x:Bind State.Globals.DisableAnimations, Mode=TwoWay}"/>
</ContentPresenter>
</StackPanel>
</ScrollViewer>
</Page>