mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-11 05:52:19 +02:00
[Settings] Multiple UX refinements (e.g. OOBE) (#5113)
* Updated FZ page with new resizing logic * Multiple UX fixes. Added updated resizing logic to other pages * Added ImageResizer file format example snippets to tooltip * Added warning icon in hotkeysettingscontrol * Fixed formatting * Keys label can now be set * Replaced custom titleblocks with converter * Updated strings * Added correct links to the images. Added PT description on General page as well. * Colorpicker image updates * Rounded corners * Fix * Added back in correct subtitles
This commit is contained in:
Niels Laute
@@ -19,7 +19,9 @@
|
||||
<converters:StringFormatConverter x:Key="StringFormatConverter"/>
|
||||
</Page.Resources>
|
||||
|
||||
<Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}" x:Name="MainView">
|
||||
<Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}"
|
||||
RowSpacing="{StaticResource DefaultRowSpacing}"
|
||||
x:Name="MainView">
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="LayoutVisualStates">
|
||||
<VisualState x:Name="WideLayout">
|
||||
@@ -27,9 +29,11 @@
|
||||
<AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
|
||||
</VisualState.StateTriggers>
|
||||
<VisualState.Setters>
|
||||
<Setter Target="SidePanel.(Grid.Column)" Value="1" />
|
||||
<Setter Target="SidePanel.(Grid.Row)" Value="0" />
|
||||
<Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
|
||||
<Setter Target="SidePanel.(Grid.Column)" Value="1"/>
|
||||
<Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}"/>
|
||||
<Setter Target="FZSettingsView.(Grid.Row)" Value="0" />
|
||||
<Setter Target="LinksPanel.(RelativePanel.Below)" Value="AboutImage"/>
|
||||
<Setter Target="AboutTitle.Visibility" Value="Visible" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
<VisualState x:Name="SmallLayout">
|
||||
@@ -37,9 +41,13 @@
|
||||
<AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
|
||||
</VisualState.StateTriggers>
|
||||
<VisualState.Setters>
|
||||
<Setter Target="SidePanel.(Grid.Column)" Value="0" />
|
||||
<Setter Target="SidePanel.(Grid.Row)" Value="1" />
|
||||
<Setter Target="SidePanel.Width" Value="Auto" />
|
||||
<Setter Target="SidePanel.(Grid.Column)" Value="0"/>
|
||||
<Setter Target="SidePanel.Width" Value="500"/>
|
||||
<Setter Target="FZSettingsView.(Grid.Row)" Value="1" />
|
||||
<Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
|
||||
<Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
|
||||
<Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
|
||||
<Setter Target="AboutTitle.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
@@ -53,15 +61,10 @@
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<StackPanel Orientation="Vertical" x:Name="FZSettingsView">
|
||||
<TextBlock x:Uid="FancyZones_Description"
|
||||
TextWrapping="Wrap"/>
|
||||
|
||||
<StackPanel x:Name="FZSettingsView" Orientation="Vertical">
|
||||
<ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
|
||||
x:Uid="FancyZones_EnableToggleControl_HeaderText"
|
||||
IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
|
||||
Margin="{StaticResource MediumTopMargin}" />
|
||||
|
||||
x:Uid="FancyZones_EnableToggleControl_HeaderText"
|
||||
IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
|
||||
<Button Margin="{StaticResource MediumTopMargin}"
|
||||
Style="{StaticResource AccentButtonStyle}"
|
||||
Command = "{x:Bind ViewModel.LaunchEditorEventHandler}"
|
||||
@@ -70,45 +73,22 @@
|
||||
<Viewbox Height="12" Width="12">
|
||||
<PathIcon Data="M896 0v896H0V0h896zM768 768V128H128v640h640zM0 1920v-896h1920v896H0zm128-768v640h1664v-640H128zM1024 0h896v896h-896V0zm768 768V128h-640v640h640z"/>
|
||||
</Viewbox>
|
||||
<TextBlock Margin="12,0,0,0" x:Uid="FancyZones_LaunchEditorButtonControl"/>
|
||||
<TextBlock Margin="12,0,0,0"
|
||||
x:Uid="FancyZones_LaunchEditorButtonControl"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
|
||||
<CustomControls:GroupTitleTextBlock
|
||||
x:Uid="FancyZones_ZoneBehavior_GroupSettings"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
/>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}">
|
||||
<CustomControls:BodyTextBlock
|
||||
x:Uid="FancyZones_HotkeyEditorControl"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
Margin="5,-12,0,0"
|
||||
/>
|
||||
<Viewbox Height="14" Width="14" Margin="5,2,0,0" >
|
||||
<PathIcon
|
||||
x:Name="FancyZones_HotkeyEditorControl_Icon"
|
||||
x:Uid="FancyZones_HotkeyEditorControl_Icon"
|
||||
VerticalAlignment="Center"
|
||||
Data="M960 1920q-133 0-255-34t-230-96-194-150-150-195-97-229T0 960q0-133 34-255t96-230 150-194 195-150 229-97T960 0q133 0 255 34t230 96 194 150 150 195 97 229 34 256q0 133-34 255t-96 230-150 194-195 150-229 97-256 34zm0-1792q-115 0-221 30t-198 84-169 130-130 168-84 199-30 221q0 114 30 220t84 199 130 169 168 130 199 84 221 30q114 0 220-30t199-84 169-130 130-168 84-199 30-221q0-114-30-220t-84-199-130-169-168-130-199-84-221-30zm-64 640h128v640H896V768zm0-256h128v128H896V512z">
|
||||
<Interactivity:Interaction.Behaviors>
|
||||
<Core:DataTriggerBehavior Binding="{Binding IsOn, ElementName=FancyZones_EnableToggleControl_HeaderText}" Value="False">
|
||||
<Core:ChangePropertyAction TargetObject="{Binding ElementName=FancyZones_HotkeyEditorControl_Icon}" PropertyName="Foreground" Value="{ThemeResource SystemChromeDisabledLowColor}" />
|
||||
</Core:DataTriggerBehavior>
|
||||
<Core:DataTriggerBehavior Binding="{Binding IsOn, ElementName=FancyZones_EnableToggleControl_HeaderText}" Value="True">
|
||||
<Core:ChangePropertyAction TargetObject="{Binding ElementName=FancyZones_HotkeyEditorControl_Icon}" PropertyName="Foreground" Value="{ThemeResource SystemBaseHighColor}" />
|
||||
</Core:DataTriggerBehavior>
|
||||
</Interactivity:Interaction.Behaviors>
|
||||
</PathIcon>
|
||||
</Viewbox>
|
||||
</StackPanel>
|
||||
<TextBlock x:Uid="FancyZones_ZoneBehavior_GroupSettings"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
<CustomControls:HotkeySettingsControl
|
||||
x:Uid="FancyZones_HotkeyEditorControl_TextBox"
|
||||
Width="240"
|
||||
x:Uid="FancyZones_HotkeyEditorControl"
|
||||
HorizontalAlignment="Left"
|
||||
Margin="0,5,0,0"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
|
||||
Keys="Win, Ctrl, Alt, Shift"
|
||||
Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
/>
|
||||
|
||||
@@ -175,9 +155,9 @@
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
|
||||
|
||||
<CustomControls:GroupTitleTextBlock x:Uid="Appearance_GroupSettings"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
/>
|
||||
<TextBlock x:Uid="Appearance_GroupSettings"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}" Spacing="12">
|
||||
<Slider x:Uid="FancyZones_HighlightOpacity"
|
||||
@@ -188,20 +168,27 @@
|
||||
Value="{x:Bind Mode=TwoWay, Path=ViewModel.HighlightOpacity}"
|
||||
HorizontalAlignment="Left"
|
||||
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
|
||||
<CustomControls:BodyTextBlock
|
||||
Text="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="16"
|
||||
Margin="0,21,0,0"/>
|
||||
|
||||
<TextBlock
|
||||
Text="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
|
||||
VerticalAlignment="Center"
|
||||
FontWeight="SemiBold"
|
||||
FontSize="16"
|
||||
Margin="0,16,0,0"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
</StackPanel>
|
||||
|
||||
<CustomControls:BodyTextBlock
|
||||
x:Uid="FancyZones_ZoneHighlightColor"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
|
||||
<TextBlock x:Uid="FancyZones_ZoneHighlightColor"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
<muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
|
||||
<Border Width="48" CornerRadius="2" Height="24">
|
||||
<muxc:DropDownButton Margin="0,4,0,0"
|
||||
IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
|
||||
Padding="4,4,8,4">
|
||||
<Border Width="48"
|
||||
CornerRadius="2"
|
||||
Height="24">
|
||||
<Border.Background>
|
||||
<SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"/>
|
||||
</Border.Background>
|
||||
@@ -224,11 +211,13 @@
|
||||
|
||||
</muxc:DropDownButton>
|
||||
|
||||
<CustomControls:BodyTextBlock
|
||||
x:Uid="FancyZones_InActiveColor"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
|
||||
<TextBlock x:Uid="FancyZones_InActiveColor"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
<muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
|
||||
<muxc:DropDownButton Margin="0,4,0,0"
|
||||
IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
|
||||
Padding="4,4,8,4">
|
||||
<Border Width="48" CornerRadius="2" Height="24">
|
||||
<Border.Background>
|
||||
<SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
|
||||
@@ -250,11 +239,13 @@
|
||||
</muxc:DropDownButton.Flyout>
|
||||
</muxc:DropDownButton>
|
||||
|
||||
<CustomControls:BodyTextBlock
|
||||
x:Uid="FancyZones_BorderColor"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}" />
|
||||
<TextBlock x:Uid="FancyZones_BorderColor"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
<muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
|
||||
<muxc:DropDownButton Margin="0,4,0,0"
|
||||
IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
|
||||
Padding="4,4,8,4">
|
||||
<Border Width="48" CornerRadius="2" Height="24">
|
||||
<Border.Background>
|
||||
<SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"/>
|
||||
@@ -277,11 +268,10 @@
|
||||
</muxc:DropDownButton.Flyout>
|
||||
</muxc:DropDownButton>
|
||||
|
||||
<CustomControls:GroupTitleTextBlock
|
||||
x:Uid="FancyZones_ExcludeApps"
|
||||
IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
/>
|
||||
|
||||
<TextBlock x:Uid="FancyZones_ExcludeApps"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
|
||||
|
||||
<TextBox x:Uid="FancyZones_ExcludeApps_TextBoxControl"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
Text="{x:Bind Mode=TwoWay, Path=ViewModel.ExcludedApps}"
|
||||
@@ -291,37 +281,41 @@
|
||||
HorizontalAlignment="Left"
|
||||
TextWrapping="Wrap"
|
||||
AcceptsReturn="True"/>
|
||||
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel x:Name="SidePanel"
|
||||
Orientation="Vertical"
|
||||
<RelativePanel x:Name="SidePanel"
|
||||
HorizontalAlignment="Left"
|
||||
Width="{StaticResource SidePanelWidth}"
|
||||
Grid.Column="1">
|
||||
|
||||
<TextBlock x:Uid="About_FancyZones"
|
||||
<StackPanel x:Name="DescriptionPanel">
|
||||
<TextBlock x:Uid="About_FancyZones"
|
||||
x:Name="AboutTitle" Grid.ColumnSpan="2"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Margin="{StaticResource XSmallBottomMargin}"/>
|
||||
<TextBlock x:Uid="FancyZones_Description"
|
||||
TextWrapping="Wrap"/>
|
||||
</StackPanel>
|
||||
|
||||
<Image MaxWidth="240" Source="https://aka.ms/powerToysFancyZoneSettingImage" />
|
||||
<Border x:Name="AboutImage"
|
||||
CornerRadius="4"
|
||||
Grid.Row="2"
|
||||
MaxWidth="240"
|
||||
HorizontalAlignment="Left"
|
||||
Margin="{StaticResource SmallTopBottomMargin}"
|
||||
RelativePanel.Below="DescriptionPanel">
|
||||
<Image Source="https://aka.ms/powerToysFancyZoneSettingImage" />
|
||||
</Border>
|
||||
|
||||
<HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FancyZones">
|
||||
<TextBlock x:Uid="Module_overview" />
|
||||
</HyperlinkButton>
|
||||
|
||||
<HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
|
||||
<TextBlock x:Uid="Give_Feedback" />
|
||||
</HyperlinkButton>
|
||||
|
||||
<!--
|
||||
<TextBlock Text="Contributors"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"/>
|
||||
|
||||
<HyperlinkButton Content="Contributor name"/>
|
||||
<HyperlinkButton Content="Contributor name"/>
|
||||
<HyperlinkButton Content="Contributor name"/>
|
||||
-->
|
||||
</StackPanel>
|
||||
<StackPanel x:Name="LinksPanel"
|
||||
RelativePanel.Below="AboutImage"
|
||||
Orientation="Vertical" >
|
||||
<HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FancyZones" Margin="0,-3,0,0">
|
||||
<TextBlock x:Uid="Module_overview" />
|
||||
</HyperlinkButton>
|
||||
<HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
|
||||
<TextBlock x:Uid="Give_Feedback" />
|
||||
</HyperlinkButton>
|
||||
</StackPanel>
|
||||
</RelativePanel>
|
||||
</Grid>
|
||||
</Page>
|
||||
Reference in New Issue
Block a user