maxmustermann/PowerToys
1
0
Fork 0
Code Issues Pull requests 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 259 additions and 137 deletions
Show stats 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>
</ItemGroup>
<ItemGroup>
<PackageReference Include="ModernWpfUI" Version="0.9.3" />
<PackageReference Include="ModernWpfUI" Version="0.9.4" />
<PackageReference Include="StyleCop.Analyzers" Version="1.1.118">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

331
src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml
View file

@ -2,16 +2,16 @@
x:Name="MainWindow1"
AutomationProperties.Name="{x:Static props:Resources.Fancy_Zones_Main_Editor}"
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: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:local="clr-namespace:FancyZonesEditor"
xmlns:Converters="clr-namespace:FancyZonesEditor.Converters"
xmlns:props="clr-namespace:FancyZonesEditor.Properties"
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:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="FancyZones Editor"
ui:WindowHelper.UseModernWindowStyle="True"
@ -84,18 +84,17 @@
</StackPanel>
</ToolTip>
</Border.ToolTip>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Name="IndexText"
TextTrimming="CharacterEllipsis"
Text="{Binding Index}"
FontSize="26"
Grid.Row="0"
FontWeight="SemiBold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource PrimaryForegroundBrush}" />
<StackPanel Orientation="Vertical"
VerticalAlignment="Center">
<TextBlock Name="IndexText"
TextTrimming="CharacterEllipsis"
Text="{Binding Index}"
FontSize="26"
Grid.Row="0"
FontWeight="SemiBold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource PrimaryForegroundBrush}" />
<TextBlock Name="ResolutionText"
TextTrimming="CharacterEllipsis"
Text="{Binding Dimensions}"
@ -125,6 +124,9 @@
</DataTemplate.Triggers>
</DataTemplate>
<DataTemplate x:Key="LayoutItemTemplate">
<Grid Background="Transparent"
Width="216"
@ -204,7 +206,7 @@
<Setter TargetName="LayoutItem"
Property="BorderBrush"
Value="{DynamicResource LayoutItemBorderPointerOverBrush}" />
<Setter TargetName="EditLayoutButton"
Property="Foreground"
Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
@ -232,6 +234,7 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{x:Static props:Resources.Templates}"
x:Name="TemplatesHeaderBlock"
FontWeight="SemiBold"
@ -302,7 +305,7 @@
</Grid>
</ScrollViewer>
<Button x:Name="NewLayoutButton"
Click="NewLayoutButton_Click"
HorizontalAlignment="Right"
@ -376,7 +379,7 @@
Opened="Dialog_Opened"
Closed="Dialog_Closed">
<Grid DataContext="{Binding SelectedModel}"
MinWidth="320" Margin="0,0,0,32">
MinWidth="320" Margin="4,4,4,32">
<StackPanel Margin="0,-37,0,0"
HorizontalAlignment="Right"
@ -412,120 +415,192 @@
</StackPanel>
<StackPanel>
<local:LayoutPreview Width="216"
Height="132"
Margin="0,16,0,16" />
<Button Click="EditZones_Click"
x:Name="editZoneLayoutButton"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
HorizontalContentAlignment="Center"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
Style="{StaticResource IconOnlyButtonStyle}"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Text="&#xE104;"
Margin="0,2,8,0"
FontFamily="Segoe MDL2 Assets" />
<TextBlock Text="{x:Static props:Resources.Edit_zones}" />
</StackPanel>
</Button.Content>
</Button>
<StackPanel Orientation="Horizontal"
Margin="0,24,0,0"
HorizontalAlignment="Stretch"
Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock FontFamily="Segoe MDL2 Assets"
ToolTip="{x:Static props:Resources.Name}"
FontSize="16"
VerticalAlignment="Bottom" Margin="0,0,0,8"
Text="&#xE932;" />
<TextBox Text="{Binding Name}"
ui:ControlHelper.PlaceholderText="{x:Static props:Resources.Name}"
AutomationProperties.Name="{x:Static props:Resources.Name}"
Margin="12,0,0,0"
ui:ControlHelper.Header="{x:Static props:Resources.Name}"
MinWidth="286"
HorizontalAlignment="Stretch" />
</StackPanel>
<!-- 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"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
<Button x:Name="decrementZones"
Width="40"
Height="40"
AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Decrement}"
ToolTip="{x:Static props:Resources.Zone_Count_Decrement}"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
Style="{StaticResource IconOnlyButtonStyle}"
Click="DecrementZones_Click">
<Button.Content>
<TextBlock Text="&#xE108;"
FontFamily="Segoe MDL2 Assets" />
</Button.Content>
</Button>
<TextBlock x:Name="zoneCount"
Text="{Binding TemplateZoneCount}"
FontWeight="SemiBold"
FontSize="18"
Width="32"
HorizontalAlignment="Center"
TextAlignment="Center"
Margin="0,-4,0,0"
ToolTip="Number of zones"
VerticalAlignment="Center" />
<Button x:Name="incrementZones"
Width="40"
Height="40"
AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Increment}"
ToolTip="{x:Static props:Resources.Zone_Count_Increment}"
Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
Style="{StaticResource IconOnlyButtonStyle}"
Click="IncrementZones_Click">
<Button.Content>
<TextBlock Text="&#xE109;"
FontFamily="Segoe MDL2 Assets" />
</Button.Content>
</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"
Content="{x:Static props:Resources.Show_Space_Zones}"
IsChecked="{Binding ShowSpacing}"
Margin="0,16,12,0"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
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>
<ui:NumberBox Margin="0,6,0,0"
IsEnabled="{Binding ShowSpacing}"
Text="{Binding Spacing}"
Width="106"
Minimum="-20"
Maximum="1000"
SpinButtonPlacementMode="Compact"
HorizontalAlignment="Left"
AutomationProperties.LabeledBy="{Binding ElementName=spaceAroundSetting}"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
</Grid>
<TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
IsEnabled="{Binding ShowSpacing}"
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}"
TextWrapping="Wrap"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"/>
<ComboBox x:Name="quickKeySelectionComboBox"
Margin="0,6,0,0"
ItemsSource="{Binding QuickKeysAvailable}"
SelectedItem="{Binding QuickKey}"
Width="106"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"/>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left"
Margin="0,16,0,0"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
<TextBlock FontFamily="Segoe MDL2 Assets"
VerticalAlignment="Center"
FontSize="16"
Margin="0,16,0,0"
ToolTip="{x:Static props:Resources.Number_of_zones}"
Text="&#xECA5;" />
<ui:NumberBox Minimum="1"
Maximum="40"
Width="216"
KeyDown="EditDialogNumberBox_KeyDown"
Margin="12,0,0,0"
Header="{x:Static props:Resources.Number_of_zones}"
SpinButtonPlacementMode="Compact"
Text="{Binding TemplateZoneCount}" />
</StackPanel>
<StackPanel Margin="0, 12, 0, 0"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}">
<TextBlock Text="{x:Static props:Resources.Space_Around_Zones}"
x:Name="spacingTitle"
Margin="28,0,0,4"
TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
VerticalAlignment="Center"
FontSize="16"
ToolTip="{x:Static props:Resources.Space_Around_Zones}"
Text="&#xE91B;" />
<ui:NumberBox Margin="12,0,0,0"
IsEnabled="{Binding ShowSpacing}"
Text="{Binding Spacing}"
Width="216"
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:ToggleSwitch x:Name="spaceAroundSetting"
IsOn="{Binding ShowSpacing}"
Margin="12,0,0,0"
OffContent=""
OnContent=""
ui:FocusVisualHelper.FocusVisualMargin="-3,-3,8,-3"
VerticalAlignment="Center"
AutomationProperties.Name="{x:Static props:Resources.Show_Space_Zones}">
<ui:ToggleSwitch.Resources>
<sys:Double x:Key="ToggleSwitchThemeMinWidth">0</sys:Double>
</ui:ToggleSwitch.Resources>
</ui:ToggleSwitch>
</StackPanel>
</StackPanel>
<StackPanel Margin="0, 12, 0, 0">
<TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
x:Name="distanceTitle"
Margin="28,0,0,4"
TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
VerticalAlignment="Center"
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>
</Grid>
</ui:ContentDialog>

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

@ -421,5 +421,14 @@ namespace FancyZonesEditor
{
_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>
/// Looks up a localized string similar to Distance to highlight adjacent zones.
/// Looks up a localized string similar to Highlight distance.
/// </summary>
public static string Distance_adjacent_zones {
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>
/// Looks up a localized string similar to Number of zones.
/// </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>
/// Looks up a localized string similar to None.
/// </summary>
@ -556,11 +574,20 @@ namespace FancyZonesEditor.Properties {
}
/// <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>
public static string QuickKey_Select {
public static string QuickKey_Description {
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>
</data>
<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 name="Edit_Layout" xml:space="preserve">
<value>Edit layout</value>
@ -343,10 +344,20 @@
<value>Splitter:</value>
<comment>Title for concept: A segmenter visual for splitting one item into two. This would be the vertical line</comment>
</data>
<data name="QuickKey_Select" xml:space="preserve">
<value>Select a key to quickly apply the layout (Win + Ctrl + Alt + key)</value>
<data name="QuickKey_Description" xml:space="preserve">
<value>Press Win + Ctrl + Alt + selected key to apply this layout</value>
</data>
<data name="Quick_Key_None" xml:space="preserve">
<value>None</value>
</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>

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

@ -16,7 +16,7 @@
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<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="ui:FocusVisualHelper.UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="0" />