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

[FZ editor] UX update for edit dialog (#9709)

Browse Source 
* Layout title label fix

* Updated formatting for resolution textlabel

* Updated UX

* Added tooltip to layout title textblock

* Updated icon button styles

* Moved buttons around

* Updated margin

* Updated strings

* Revert "Updated strings"

This reverts commit cc4e1764b7.

* [spell checker] add terms

Co-authored-by: Niels Laute <niels9001@hotmail.com>
Co-authored-by: Enrico Giordani <enrico.giordani@gmail.com>
This commit is contained in:
Niels Laute
2021-02-19 14:17:13 +01:00
committed by GitHub
parent 5dae51e12e
commit a29b3aa500
8 changed files with 221 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,11 +30,12 @@
<Converters:LayoutTypeCustomToVisibilityConverter x:Key="LayoutTypeCustomToVisibilityConverter" />
<Converters:LayoutTypeTemplateToVisibilityConverter x:Key="LayoutTypeTemplateToVisibilityConverter" />
<Converters:LayoutModelTypeBlankToVisibilityConverter x:Key="LayoutModelTypeBlankToVisibilityConverter" />
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DropShadowEffect x:Key="CardShadow" BlurRadius="6"
Opacity="0.24"
ShadowDepth="1" />
<Style x:Key="CardStyle"
TargetType="Border">
<Setter Property="Background"
@@ -62,44 +63,6 @@
</Style.Triggers>
</Style>
<Style x:Key="SpinnerButton" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="{DynamicResource PrimaryForegroundBrush}"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Padding" Value="0,0,0,5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="{DynamicResource SecondaryBackgroundBrush}"/>
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{DynamicResource SecondaryBackgroundBrush}" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Background"
Value="{DynamicResource LayoutItemBackgroundPointerOverBrush}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ZoneCount" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="Regular" />
<Setter Property="FontSize" Value="18"/>
<Setter Property="LineHeight" Value="24" />
<Setter Property="Margin" Value="20,0,20,0" />
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<DataTemplate x:Key="MonitorItemTemplate">
<Border x:Name="MonitorItem"
Width="{Binding DisplayWidth}"
@@ -170,7 +133,8 @@
FontWeight="SemiBold"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-4,0,0"
Margin="0,-4,24,0"
ToolTip="{Binding Name}"
Foreground="{DynamicResource PrimaryForegroundBrush}" />
<Button Content="&#xE104;"
@@ -196,26 +160,8 @@
<local:LayoutPreview Grid.Row="1"
Margin="0,8,0,8"
VerticalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" />
<Grid Grid.Row="2"
Visibility="Collapsed"
HorizontalAlignment="Stretch"
Margin="2,0,0,0">
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock ToolTip="{x:Static props:Resources.Space_Around_Zones}"
x:Name="SpacingTextBlock"
Foreground="{DynamicResource SecondaryForegroundBrush}">
<Run FontSize="10"
Text="&#xE1D9;"
FontFamily="Segoe MDL2 Assets" />
<Run Text=" " />
<Run Text="20" />
</TextBlock>
</StackPanel>
</Grid>
</Grid>
</Border>
<Border x:Name="SelectionHighlight"
@@ -231,9 +177,6 @@
<Setter TargetName="layoutName"
Property="Foreground"
Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
<Setter TargetName="SpacingTextBlock"
Property="Foreground"
Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
<Setter TargetName="SelectionHighlight"
Property="Visibility"
Value="Visible" />
@@ -414,151 +357,129 @@
Title="{x:Static props:Resources.Edit_Layout}"
Opened="Dialog_Opened"
Closed="Dialog_Closed">
<StackPanel Margin="0,16,0,0"
MinWidth="420"
DataContext="{Binding SelectedModel}">
<Button Click="EditZones_Click"
x:Name="editZoneLayoutButton"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
Height="48"
Margin="0,0,0,16"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
Style="{StaticResource AccentButtonStyle}">
<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.Effect>
<DropShadowEffect BlurRadius="6"
Opacity="0.32"
ShadowDepth="1" />
</Button.Effect>
</Button>
<Grid DataContext="{Binding SelectedModel}"
MinWidth="320" Margin="0,0,0,32">
<Grid Margin="0,0,0,32"
Height="Auto"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,-37,0,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button Click="DuplicateLayout_Click"
x:Name="duplicateLayoutButton"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static props:Resources.Duplicate}"
Height="48"
Margin="0,0,4,0"
Grid.Column="0"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Text="&#xE8C8;"
Margin="0,2,8,0"
FontFamily="Segoe MDL2 Assets" />
<TextBlock Text="{x:Static props:Resources.Duplicate}" />
</StackPanel>
</Button.Content>
</Button>
<Button Click="DeleteLayout_Click"
x:Name="deleteLayoutButton"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static props:Resources.Delete}"
Height="48"
Margin="4,0,0,0"
Grid.Column="1"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Text="&#xE107;"
Margin="0,2,8,0"
FontFamily="Segoe MDL2 Assets" />
<TextBlock Text="{x:Static props:Resources.Delete}" />
</StackPanel>
</Button.Content>
</Button>
ToolTip="{x:Static props:Resources.Duplicate}"
Content="&#xE8C8;"
FontFamily="Segoe MDL2 Assets"
Style="{StaticResource IconOnlyButtonStyle}"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}" />
<Button Click="DuplicateLayout_Click"
x:Name="createFromTemplateLayoutButton"
HorizontalAlignment="Stretch"
AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}"
Height="48"
Margin="0,0,4,0"
Grid.Column="0"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
ToolTip="{x:Static props:Resources.Create_Custom_From_Template}"
Content="&#xE8C8;"
FontFamily="Segoe MDL2 Assets"
Style="{StaticResource IconOnlyButtonStyle}"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}" />
<Button Click="DeleteLayout_Click"
x:Name="deleteLayoutButton"
AutomationProperties.Name="{x:Static props:Resources.Delete}"
ToolTip="{x:Static props:Resources.Delete}"
Content="&#xE107;"
FontFamily="Segoe MDL2 Assets"
Foreground="#c50500"
Style="{StaticResource IconOnlyButtonStyle}"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}" />
</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="&#xE8C8;"
Margin="0,2,8,0"
FontFamily="Segoe MDL2 Assets" />
<TextBlock Text="{x:Static props:Resources.Create_Custom_From_Template}" />
<TextBlock Text="&#xE104;"
Margin="0,2,8,0"
FontFamily="Segoe MDL2 Assets" />
<TextBlock Text="{x:Static props:Resources.Edit_zones}" />
</StackPanel>
</Button.Content>
</Button>
</Grid>
<TextBlock x:Name="nameHeader"
Text="{x:Static props:Resources.Name}"
IsEnabled="{Binding ShowSpacing}"
Margin="0,0,0,0"
Foreground="{DynamicResource PrimaryForegroundBrush}" />
<TextBox Text="{Binding Name}"
Margin="0,6,0,0"
IsEnabled="{Binding IsCustom}"
AutomationProperties.LabeledBy="{Binding ElementName=nameHeader}" />
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
<TextBlock x:Name="numberOfZonesHeader"
Text="{x:Static props:Resources.NumberOfZones}"
Margin="0,16,0,0"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}" />
<StackPanel Margin="0,6,0,0"
Orientation="Horizontal"
Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
<Button x:Name="decrementZones"
Width="40"
Height="40"
AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Decrement}"
Content="-"
Style="{StaticResource SpinnerButton}"
Click="DecrementZones_Click"/>
<TextBlock x:Name="zoneCount" Text="{Binding TemplateZoneCount}" Style="{StaticResource ZoneCount}"/>
<Button x:Name="incrementZones"
Width="40"
Height="40"
AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Increment}"
Content="+"
Style="{StaticResource SpinnerButton}"
Click="IncrementZones_Click"/>
</StackPanel>
<StackPanel Margin="0,16,0,0"
Orientation="Vertical">
<ui:ToggleSwitch x:Name="spaceAroundSetting"
Header="{x:Static props:Resources.Show_Space_Zones}"
IsOn="{Binding ShowSpacing}"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
<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,0,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,0,0"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
<TextBlock x:Name="paddingValue"
Text="{x:Static props:Resources.Space_Around_Zones}"
IsEnabled="{Binding ShowSpacing}"
Margin="0,8,0,0"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
<TextBox Margin="0,6,0,0"
IsEnabled="{Binding ShowSpacing}"
Text="{Binding Spacing}"
Width="86"
HorizontalAlignment="Left"
AutomationProperties.LabeledBy="{Binding ElementName=paddingValue}"
Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}" />
<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}}" />
<TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
IsEnabled="{Binding ShowSpacing}"
@@ -566,13 +487,16 @@
Foreground="{DynamicResource PrimaryForegroundBrush}"
x:Name="sensitivityRadiusValue" />
<TextBox Margin="0,6,0,0"
Text="{Binding SensitivityRadius}"
Width="86"
AutomationProperties.LabeledBy="{Binding ElementName=sensitivityRadiusValue}"
HorizontalAlignment="Left" />
<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}" />
</StackPanel>
</StackPanel>
</Grid>
</ui:ContentDialog>
<ui:ContentDialog x:Name="NewLayoutDialog"