Mirrors/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys.git synced 2026-04-10 21:41:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

[FZ Editor] Edit dialog UX fixes (#10734)

Browse Source 
* Updates to UI

* Handle enter key

* Focus visual fix

* Fix

Co-authored-by: Niels Laute <niels9001@hotmail.com>
This commit is contained in:
Niels Laute
2021-04-20 14:56:18 +02:00
committed by GitHub
parent 9b8970fd9c
commit 0e64071051
6 changed files with 259 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/fancyzones/editor/FancyZonesEditor/FancyZonesEditor.csproj
View File

@@ -65,7 +65,7 @@
</AdditionalFiles> </AdditionalFiles>
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<PackageReference Include="ModernWpfUI" Version="0.9.3" /> <PackageReference Include="ModernWpfUI" Version="0.9.4" />
<PackageReference Include="StyleCop.Analyzers" Version="1.1.118"> <PackageReference Include="StyleCop.Analyzers" Version="1.1.118">
<PrivateAssets>all</PrivateAssets> <PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

313
src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml
View File

@@ -2,16 +2,16 @@
x:Name="MainWindow1" x:Name="MainWindow1"
AutomationProperties.Name="{x:Static props:Resources.Fancy_Zones_Main_Editor}" AutomationProperties.Name="{x:Static props:Resources.Fancy_Zones_Main_Editor}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="http://schemas.modernwpf.com/2019"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:FancyZonesEditor" xmlns:local="clr-namespace:FancyZonesEditor"
xmlns:Converters="clr-namespace:FancyZonesEditor.Converters" xmlns:Converters="clr-namespace:FancyZonesEditor.Converters"
xmlns:props="clr-namespace:FancyZonesEditor.Properties" xmlns:props="clr-namespace:FancyZonesEditor.Properties"
xmlns:local1="clr-namespace:FancyZonesEditor.ViewModels" xmlns:local1="clr-namespace:FancyZonesEditor.ViewModels"
xmlns:ui="http://schemas.modernwpf.com/2019"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:controls="clr-namespace:ModernWpf.Controls;assembly=ModernWpf" xmlns:controls="clr-namespace:ModernWpf.Controls;assembly=ModernWpf"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d" mc:Ignorable="d"
Title="FancyZones Editor" Title="FancyZones Editor"
ui:WindowHelper.UseModernWindowStyle="True" ui:WindowHelper.UseModernWindowStyle="True"
@@ -84,18 +84,17 @@
</StackPanel> </StackPanel>
</ToolTip> </ToolTip>
</Border.ToolTip> </Border.ToolTip>
<StackPanel Orientation="Vertical" VerticalAlignment="Center"> <StackPanel Orientation="Vertical"
VerticalAlignment="Center">
<TextBlock Name="IndexText"
<TextBlock Name="IndexText" TextTrimming="CharacterEllipsis"
TextTrimming="CharacterEllipsis" Text="{Binding Index}"
Text="{Binding Index}" FontSize="26"
FontSize="26" Grid.Row="0"
Grid.Row="0" FontWeight="SemiBold"
FontWeight="SemiBold" HorizontalAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"
VerticalAlignment="Center" Foreground="{DynamicResource PrimaryForegroundBrush}" />
Foreground="{DynamicResource PrimaryForegroundBrush}" />
<TextBlock Name="ResolutionText" <TextBlock Name="ResolutionText"
TextTrimming="CharacterEllipsis" TextTrimming="CharacterEllipsis"
Text="{Binding Dimensions}" Text="{Binding Dimensions}"
@@ -125,6 +124,9 @@
</DataTemplate.Triggers> </DataTemplate.Triggers>
</DataTemplate> </DataTemplate>
<DataTemplate x:Key="LayoutItemTemplate"> <DataTemplate x:Key="LayoutItemTemplate">
<Grid Background="Transparent" <Grid Background="Transparent"
Width="216" Width="216"
@@ -232,6 +234,7 @@
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<TextBlock Text="{x:Static props:Resources.Templates}" <TextBlock Text="{x:Static props:Resources.Templates}"
x:Name="TemplatesHeaderBlock" x:Name="TemplatesHeaderBlock"
FontWeight="SemiBold" FontWeight="SemiBold"
@@ -376,7 +379,7 @@
Opened="Dialog_Opened" Opened="Dialog_Opened"
Closed="Dialog_Closed"> Closed="Dialog_Closed">
<Grid DataContext="{Binding SelectedModel}" <Grid DataContext="{Binding SelectedModel}"
MinWidth="320" Margin="0,0,0,32"> MinWidth="320" Margin="4,4,4,32">
<StackPanel Margin="0,-37,0,0" <StackPanel Margin="0,-37,0,0"
HorizontalAlignment="Right" HorizontalAlignment="Right"
@@ -412,120 +415,192 @@
</StackPanel> </StackPanel>
<StackPanel> <StackPanel>
<local:LayoutPreview Width="216" <StackPanel Orientation="Horizontal"
Height="132" Margin="0,24,0,0"
Margin="0,16,0,16" /> HorizontalAlignment="Stretch"
<Button Click="EditZones_Click" Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}">
x:Name="editZoneLayoutButton"
HorizontalAlignment="Stretch" <TextBlock FontFamily="Segoe MDL2 Assets"
AutomationProperties.Name="{x:Static props:Resources.Edit_zones}" ToolTip="{x:Static props:Resources.Name}"
HorizontalContentAlignment="Center" FontSize="16"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}" VerticalAlignment="Bottom" Margin="0,0,0,8"
Style="{StaticResource IconOnlyButtonStyle}" Text="&#xE932;" />
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"> <TextBox Text="{Binding Name}"
<Button.Content> ui:ControlHelper.PlaceholderText="{x:Static props:Resources.Name}"
<StackPanel Orientation="Horizontal"> AutomationProperties.Name="{x:Static props:Resources.Name}"
<TextBlock Text="&#xE104;" Margin="12,0,0,0"
Margin="0,2,8,0" ui:ControlHelper.Header="{x:Static props:Resources.Name}"
FontFamily="Segoe MDL2 Assets" /> MinWidth="286"
<TextBlock Text="{x:Static props:Resources.Edit_zones}" /> HorizontalAlignment="Stretch" />
</StackPanel> </StackPanel>
</Button.Content>
</Button> <!-- Shortcut panel -->
<StackPanel Orientation="Vertical"
Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}"
Margin="0,12,0,36">
<StackPanel Margin="28,0,0,4"
Orientation="Horizontal">
<TextBlock x:Name="QuickKeyTitle"
Text="{x:Static props:Resources.QuickKey_Title}" />
<TextBlock FontFamily="Segoe MDL2 Assets"
Margin="8,4,0,0"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
Text="&#xE946;"
ToolTip="{x:Static props:Resources.QuickKey_Description}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
VerticalAlignment="Center"
FontSize="16"
ToolTip="{x:Static props:Resources.QuickKey_Title}"
Text="&#xEDA7;" />
<ComboBox x:Name="quickKeySelectionComboBox"
Margin="12,0,0,0"
Width="286"
AutomationProperties.LabeledBy="{Binding ElementName=QuickKeyTitle}"
AutomationProperties.HelpText="{x:Static props:Resources.QuickKey_Description}"
AutomationProperties.Name="{x:Static props:Resources.QuickKey_Title}"
ItemsSource="{Binding QuickKeysAvailable}"
SelectedItem="{Binding QuickKey}" />
</StackPanel>
</StackPanel>
<Grid Width="218"
Height="124"
HorizontalAlignment="Left"
Margin="24,12,0,24">
<local:LayoutPreview />
<Button Content="&#xE104;"
x:Name="editZoneLayoutButton"
FontFamily="Segoe MDL2 Assets"
FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="36"
Width="36"
Padding="0"
BorderBrush="Transparent"
Click="EditZones_Click"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
ToolTip="{x:Static props:Resources.Edit_zones}"
AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
Style="{StaticResource AccentButtonStyle}"
ui:ControlHelper.CornerRadius="36">
</Button>
</Grid>
<StackPanel Orientation="Horizontal" <StackPanel Orientation="Horizontal"
HorizontalAlignment="Center" HorizontalAlignment="Left"
Margin="0,16,0,0"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}"> Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
<Button x:Name="decrementZones" <TextBlock FontFamily="Segoe MDL2 Assets"
Width="40" VerticalAlignment="Center"
Height="40" FontSize="16"
AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Decrement}" Margin="0,16,0,0"
ToolTip="{x:Static props:Resources.Zone_Count_Decrement}" ToolTip="{x:Static props:Resources.Number_of_zones}"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}" Text="&#xECA5;" />
Style="{StaticResource IconOnlyButtonStyle}"
Click="DecrementZones_Click">
<Button.Content>
<TextBlock Text="&#xE108;"
FontFamily="Segoe MDL2 Assets" />
</Button.Content>
</Button>
<TextBlock x:Name="zoneCount" <ui:NumberBox Minimum="1"
Text="{Binding TemplateZoneCount}" Maximum="40"
FontWeight="SemiBold" Width="216"
FontSize="18" KeyDown="EditDialogNumberBox_KeyDown"
Width="32" Margin="12,0,0,0"
HorizontalAlignment="Center" Header="{x:Static props:Resources.Number_of_zones}"
TextAlignment="Center" SpinButtonPlacementMode="Compact"
Margin="0,-4,0,0" Text="{Binding TemplateZoneCount}" />
ToolTip="Number of zones" </StackPanel>
VerticalAlignment="Center" />
<Button x:Name="incrementZones" <StackPanel Margin="0, 12, 0, 0"
Width="40" Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}">
Height="40" <TextBlock Text="{x:Static props:Resources.Space_Around_Zones}"
AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Increment}" x:Name="spacingTitle"
ToolTip="{x:Static props:Resources.Zone_Count_Increment}" Margin="28,0,0,4"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}" TextWrapping="Wrap" />
Style="{StaticResource IconOnlyButtonStyle}" <StackPanel Orientation="Horizontal">
Click="IncrementZones_Click"> <TextBlock FontFamily="Segoe MDL2 Assets"
<Button.Content> VerticalAlignment="Center"
<TextBlock Text="&#xE109;" FontSize="16"
FontFamily="Segoe MDL2 Assets" /> ToolTip="{x:Static props:Resources.Space_Around_Zones}"
</Button.Content> Text="&#xE91B;" />
</Button>
</StackPanel>
<TextBox Text="{Binding Name}"
ui:ControlHelper.Header="{x:Static props:Resources.Name}"
Margin="0,16,2,0"
Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}"
HorizontalAlignment="Stretch" />
<CheckBox x:Name="spaceAroundSetting" <ui:NumberBox Margin="12,0,0,0"
Content="{x:Static props:Resources.Show_Space_Zones}" IsEnabled="{Binding ShowSpacing}"
IsChecked="{Binding ShowSpacing}" Text="{Binding Spacing}"
Margin="0,16,12,0" Width="216"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" /> Minimum="-20"
Maximum="1000"
KeyDown="EditDialogNumberBox_KeyDown"
SpinButtonPlacementMode="Compact"
HorizontalAlignment="Left"
VerticalAlignment="Center"
AutomationProperties.Name="{x:Static props:Resources.Space_Around_Zones}"
AutomationProperties.LabeledBy="{Binding ElementName=spacingTitle}" />
<TextBlock Text="{x:Static props:Resources.Pixels}"
Margin="6,-4,0,0"
FontSize="12"
Foreground="{DynamicResource SecondaryForegroundBrush}"
TextWrapping="Wrap"
VerticalAlignment="Center" />
<ui:NumberBox Margin="0,6,0,0" <ui:ToggleSwitch x:Name="spaceAroundSetting"
IsEnabled="{Binding ShowSpacing}" IsOn="{Binding ShowSpacing}"
Text="{Binding Spacing}" Margin="12,0,0,0"
Width="106" OffContent=""
Minimum="-20" OnContent=""
Maximum="1000" ui:FocusVisualHelper.FocusVisualMargin="-3,-3,8,-3"
SpinButtonPlacementMode="Compact" VerticalAlignment="Center"
HorizontalAlignment="Left" AutomationProperties.Name="{x:Static props:Resources.Show_Space_Zones}">
AutomationProperties.LabeledBy="{Binding ElementName=spaceAroundSetting}" <ui:ToggleSwitch.Resources>
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" /> <sys:Double x:Key="ToggleSwitchThemeMinWidth">0</sys:Double>
</ui:ToggleSwitch.Resources>
</ui:ToggleSwitch>
<TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}" </StackPanel>
IsEnabled="{Binding ShowSpacing}" </StackPanel>
Margin="0,16,12,0"
TextWrapping="Wrap"
Foreground="{DynamicResource PrimaryForegroundBrush}"
x:Name="sensitivityRadiusValue" />
<ui:NumberBox Margin="0,6,0,0"
Text="{Binding SensitivityRadius}"
Width="106"
Minimum="0"
Maximum="1000"
SpinButtonPlacementMode="Compact"
HorizontalAlignment="Left"
AutomationProperties.LabeledBy="{Binding ElementName=sensitivityRadiusValue}" />
<TextBlock Text="{x:Static props:Resources.QuickKey_Select}"
Margin="0,16,12,0"
Foreground="{DynamicResource PrimaryForegroundBrush}" <StackPanel Margin="0, 12, 0, 0">
TextWrapping="Wrap" <TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"/> x:Name="distanceTitle"
<ComboBox x:Name="quickKeySelectionComboBox" Margin="28,0,0,4"
Margin="0,6,0,0" TextWrapping="Wrap" />
ItemsSource="{Binding QuickKeysAvailable}" <StackPanel Orientation="Horizontal">
SelectedItem="{Binding QuickKey}" <TextBlock FontFamily="Segoe MDL2 Assets"
Width="106" VerticalAlignment="Center"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"/> FontSize="16"
ToolTip="{x:Static props:Resources.Distance_adjacent_zones}"
Text="&#xF617;" />
<ui:NumberBox Text="{Binding SensitivityRadius}"
Width="216"
Minimum="0"
Maximum="1000"
KeyDown="EditDialogNumberBox_KeyDown"
Margin="12,0,0,0"
AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
AutomationProperties.LabeledBy="{Binding ElementName=distanceTitle}"
SpinButtonPlacementMode="Compact"
HorizontalAlignment="Left" />
<TextBlock Text="{x:Static props:Resources.Pixels}"
Margin="6,-4,0,0"
FontSize="12"
Foreground="{DynamicResource SecondaryForegroundBrush}"
TextWrapping="Wrap"
VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</StackPanel> </StackPanel>
</Grid> </Grid>
</ui:ContentDialog> </ui:ContentDialog>

9
src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml.cs
View File

@@ -421,5 +421,14 @@ namespace FancyZonesEditor
{ {
_openedDialog = null; _openedDialog = null;
} }
private void EditDialogNumberBox_KeyDown(object sender, KeyEventArgs e)
{
// Making sure that pressing Enter when changing values in a NumberBox will not close the edit dialog.
if (e.Key == Key.Enter)
{
e.Handled = true;
}
}
} }
} }

35
src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.Designer.cs generated
View File

@@ -250,7 +250,7 @@ namespace FancyZonesEditor.Properties {
} }
/// <summary> /// <summary>
/// Looks up a localized string similar to Distance to highlight adjacent zones. /// Looks up a localized string similar to Highlight distance.
/// </summary> /// </summary>
public static string Distance_adjacent_zones { public static string Distance_adjacent_zones {
get { get {
@@ -537,6 +537,15 @@ namespace FancyZonesEditor.Properties {
} }
} }
/// <summary>
/// Looks up a localized string similar to Number of zones.
/// </summary>
public static string Number_of_zones {
get {
return ResourceManager.GetString("Number_of_zones", resourceCulture);
}
}
/// <summary> /// <summary>
/// Looks up a localized string similar to Number of zones. /// Looks up a localized string similar to Number of zones.
/// </summary> /// </summary>
@@ -546,6 +555,15 @@ namespace FancyZonesEditor.Properties {
} }
} }
/// <summary>
/// Looks up a localized string similar to px.
/// </summary>
public static string Pixels {
get {
return ResourceManager.GetString("Pixels", resourceCulture);
}
}
/// <summary> /// <summary>
/// Looks up a localized string similar to None. /// Looks up a localized string similar to None.
/// </summary> /// </summary>
@@ -556,11 +574,20 @@ namespace FancyZonesEditor.Properties {
} }
/// <summary> /// <summary>
/// Looks up a localized string similar to Select a key to quickly apply the layout (Win + Ctrl + Alt + key). /// Looks up a localized string similar to Press Win + Ctrl + Alt + selected key to apply this layout.
/// </summary> /// </summary>
public static string QuickKey_Select { public static string QuickKey_Description {
get { get {
return ResourceManager.GetString("QuickKey_Select", resourceCulture); return ResourceManager.GetString("QuickKey_Description", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Layout shortcut.
/// </summary>
public static string QuickKey_Title {
get {
return ResourceManager.GetString("QuickKey_Title", resourceCulture);
} }
} }

17
src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.resx
View File

@@ -145,7 +145,8 @@
<value>Custom layout creator</value> <value>Custom layout creator</value>
</data> </data>
<data name="Distance_adjacent_zones" xml:space="preserve"> <data name="Distance_adjacent_zones" xml:space="preserve">
<value>Distance to highlight adjacent zones</value> <value>Highlight distance</value>
<comment>Distance of when an adjacent zone should light up when the window is close to it</comment>
</data> </data>
<data name="Edit_Layout" xml:space="preserve"> <data name="Edit_Layout" xml:space="preserve">
<value>Edit layout</value> <value>Edit layout</value>
@@ -343,10 +344,20 @@
<value>Splitter:</value> <value>Splitter:</value>
<comment>Title for concept: A segmenter visual for splitting one item into two. This would be the vertical line</comment> <comment>Title for concept: A segmenter visual for splitting one item into two. This would be the vertical line</comment>
</data> </data>
<data name="QuickKey_Select" xml:space="preserve"> <data name="QuickKey_Description" xml:space="preserve">
<value>Select a key to quickly apply the layout (Win + Ctrl + Alt + key)</value> <value>Press Win + Ctrl + Alt + selected key to apply this layout</value>
</data> </data>
<data name="Quick_Key_None" xml:space="preserve"> <data name="Quick_Key_None" xml:space="preserve">
<value>None</value> <value>None</value>
</data> </data>
<data name="Number_of_zones" xml:space="preserve">
<value>Number of zones</value>
</data>
<data name="Pixels" xml:space="preserve">
<value>px</value>
<comment>Abbreviation of pixels</comment>
</data>
<data name="QuickKey_Title" xml:space="preserve">
<value>Layout shortcut</value>
</data>
</root> </root>

2
src/modules/fancyzones/editor/FancyZonesEditor/Styles/ButtonStyles.xaml
View File

@@ -16,7 +16,7 @@
<Setter Property="VerticalContentAlignment" Value="Top" /> <Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="MinWidth" Value="120" /> <Setter Property="MinWidth" Value="0" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" /> <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
<Setter Property="ui:FocusVisualHelper.UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" /> <Setter Property="ui:FocusVisualHelper.UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="0" /> <Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="0" />