Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FancyZones Editor] Fluent UX and theming support #6899

Closed
wants to merge 14 commits into from
Closed

[FancyZones Editor] Fluent UX and theming support #6899

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
395b4bc
Support for dark theme and redesign of layout window
niels9001 Sep 28, 2020
9e94e06
Updated grid and canvas zone windows to support theming
niels9001 Sep 29, 2020
ad71624
Replaced images with text based glyphs
niels9001 Sep 29, 2020
fe15d07
Resources clean up
niels9001 Sep 29, 2020
d962cc7
Margin fixes
niels9001 Sep 29, 2020
92804e0
Updated theme manager
niels9001 Sep 29, 2020
1273913
Updates to thememanager
niels9001 Sep 29, 2020
3740448
Commit
niels9001 Oct 2, 2020
3f58606
Moved zone numbers back into tab, fixed dark/light theme colors
niels9001 Oct 2, 2020
d6e8e51
Added high contrast themes and fixed lagging accent color
niels9001 Oct 2, 2020
7795778
Fixed markup and localized new strings
niels9001 Oct 3, 2020
199f093
Merge branch 'master' into users/niels9001/fzeditor-darkmode
niels9001 Oct 6, 2020
500efeb
Added localized strings and scrollbar
niels9001 Oct 6, 2020
78cb81c
Merge branch 'master' into users/niels9001/fzeditor-darkmode
niels9001 Oct 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions src/modules/fancyzones/editor/FancyZonesEditor/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,15 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:FancyZonesEditor"
xmlns:ui="http://schemas.modernwpf.com/2019"
Startup="OnStartup">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
<ui:ThemeResources />
<ui:XamlControlsResources />
<ResourceDictionary Source="pack://application:,,,/Styles/TextStyles.xaml" />
</ResourceDictionary.MergedDictionaries>

<SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#BF333333"/>
<SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#FF1a1a1a"/>

</ResourceDictionary>
</Application.Resources>
</Application>
</Application>
4 changes: 4 additions & 0 deletions src/modules/fancyzones/editor/FancyZonesEditor/App.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ namespace FancyZonesEditor
/// </summary>
public partial class App : Application
{
private ThemeManager _themeManager;

public Settings ZoneSettings { get; }

public App()
Expand All @@ -37,6 +39,8 @@ private void OnStartup(object sender, StartupEventArgs e)
Environment.Exit(0);
});

_themeManager = new ThemeManager(this);

LayoutModel foundModel = null;

foreach (LayoutModel model in ZoneSettings.DefaultModels)
Expand Down
237 changes: 73 additions & 164 deletions src/modules/fancyzones/editor/FancyZonesEditor/CanvasEditorWindow.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,185 +6,94 @@
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:local="clr-namespace:FancyZonesEditor"
xmlns:props="clr-namespace:FancyZonesEditor.Properties"
xmlns:ui="http://schemas.modernwpf.com/2019"
ui:WindowHelper.UseModernWindowStyle="True"
mc:Ignorable="d"
Title=""
Width="528"
SizeToContent="Height"
Background="White"
Background="{DynamicResource BackgroundBrush}"
BorderThickness="0"
ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
Closed="OnClosed">

<Grid>
<Grid
Height="36"
Background="{DynamicResource WindowTitleBarBackgroundBrush}"
Margin="0,-36,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Stretch">
<Border
Background="{DynamicResource WindowTitleBarIconBrush}"
Width="30"
Height="3"
CornerRadius="1.5"
VerticalAlignment="Center"
Margin="0,4,0,0" />
</Grid>

<Window.Resources>
<Style x:Key="titleText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="LineHeight" Value="24" />
<Setter Property="FontSize" Value="18"/>
<Setter Property="Margin" Value="16,16,0,12" />
</Style>
<Style x:Key="zoneCount" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="Regular" />
<Setter Property="FontSize" Value="24"/>
<Setter Property="LineHeight" Value="24" />
<Setter Property="Margin" Value="20,0,20,0" />
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="tabText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="#C4C4C4"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="LineHeight" Value="20" />
<Setter Property="Margin" Value="24,20,0,0" />
<Setter Property="TextAlignment" Value="Center" />
</Style>
<Style x:Key="settingText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="LineHeight" Value="20" />
<Setter Property="Margin" Value="5,10,0,0" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
<Style x:Key="templateTitleText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="Regular" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Margin" Value="0,20,0,0" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="250"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
<Style x:Key="secondaryButton" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="0,5,0,5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="#F2F2F2"/>
<Setter Property="Margin" Value="16,10,0,0" />
<Setter Property="Width" Value="239"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#BCBCBD"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="primaryButton" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="0,5,0,5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="#0078D7"/>
<Setter Property="Margin" Value="16,10,0,0" />
<Setter Property="Width" Value="239"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#024D89"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="spinnerButton" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="0,0,0,5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="#F2F2F2"/>
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
<Style x:Key="templateBackground" TargetType="Rectangle">
<Setter Property="Fill" Value="Black"/>
<Setter Property="Opacity" Value="0.05"/>
<Setter Property="RadiusX" Value="4"/>
<Setter Property="RadiusY" Value="4"/>
</Style>
<Style x:Key="templateBackgroundSelected" TargetType="Rectangle">
<Setter Property="Fill" Value="#F2F2F2"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="RadiusX" Value="4"/>
<Setter Property="RadiusY" Value="4"/>
<Setter Property="Stroke" Value="#0078D7"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
<Style x:Key="newZoneButton" TargetType="Button">
<Setter Property="Background" Value="#f2f2f2"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontFamily" Value="SegoeUI"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="120"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="textLabel" TargetType="TextBlock">
<Setter Property="FontFamily" Value="SegoeUI"/>
<Setter Property="FontWeight" Value="Regular"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Margin" Value="16,12,0,0"/>
</Style>
<Style x:Key="textBox" TargetType="TextBox">
<Setter Property="BorderBrush" Value="#cccccc"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontFamily" Value="SegoeUI"/>
<Setter Property="FontWeight" Value="Regular"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,5,0,0"/>
<Setter Property="Padding" Value="5,5,5,5"/>
</Style>
<StackPanel Margin="16">
<TextBlock
Name="windowEditorDialogTitle"
Text="{x:Static props:Resources.Custom_Layout_Creator}"
Style="{StaticResource SubtitleTextBlockStyle}" />
<TextBlock
Text="{x:Static props:Resources.Name}"
Margin="0,16,0,0"
Foreground="{DynamicResource PrimaryForegroundBrush}"/>
<TextBox
Margin="0,6,0,0"
Text="{Binding Name}"
Style="{StaticResource DefaultTextBoxStyle}"/>

</Window.Resources>
<StackPanel>
<TextBlock Name="windowEditorDialogTitle" Text="{x:Static props:Resources.Custom_Layout_Creator}" Style="{StaticResource titleText}" />
<Button x:Name="newZoneButton" Width="496" Height="136" Style="{StaticResource newZoneButton}" Click="OnAddZone">
<StackPanel>
<TextBlock x:Name="newSoneName" Text="{x:Static props:Resources.Add_zone}" Style="{StaticResource templateTitleText}" />
<TextBlock HorizontalAlignment="Center" Text="+" Margin="0,-40,0,0"/>
</StackPanel>
</Button>
<TextBlock Text="{x:Static props:Resources.Name}" Style="{StaticResource textLabel}" />
<TextBox Text="{Binding Name}" Width="496" Style="{StaticResource textBox}" />
<!--
<Button x:Name="newZoneButton"
HorizontalAlignment="Stretch"
Height="96"
Margin="0,32,0,0"
Style="{StaticResource DefaultButtonStyle}"
Click="OnAddZone">
<StackPanel Orientation="Vertical">
<TextBlock
HorizontalAlignment="Center"
Text="&#xE109;"
FontSize="32"
Margin="0,8,0,0"
FontFamily="Segoe MDL2 Assets"/>
<TextBlock
x:Name="newSoneName"
Margin="12"
Text="{x:Static props:Resources.Add_zone}"/>
</StackPanel>
</Button>

<!--
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<CheckBox x:Name="showGridSetting" VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="True" Margin="16,4,0,0"/>
<TextBlock Text="Show snap grid" Style="{StaticResource settingText}" />
<TextBlock Text="Grid spacing" Style="{StaticResource settingText}" Margin="40,10,10,0" />
<TextBox x:Name="gridValue" Text="{Binding Path=Spacing,Mode=TwoWay}" Style="{StaticResource textBox}"/>
</StackPanel>
-->
<StackPanel Orientation="Horizontal" Margin="0,12,0,16">
<Button Content="{x:Static props:Resources.Cancel}" Style="{StaticResource secondaryButton}" Click="OnCancel"/>
<Button Content="{x:Static props:Resources.Save_Apply}" Style="{StaticResource primaryButton}" Click="OnSaveApplyTemplate" />
<Grid Margin="0,48,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="8"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button
Content="{x:Static props:Resources.Cancel}"
Style="{StaticResource DefaultButtonStyle}"
HorizontalAlignment="Stretch"
Click="OnCancel"/>
<Button
Content="{x:Static props:Resources.Save_Apply}"
Style="{StaticResource AccentButtonStyle}"
HorizontalAlignment="Stretch"
Click="OnSaveApplyTemplate"
Grid.Column="2" />
</Grid>
</StackPanel>
</StackPanel>
</local:EditorWindow>
</Grid>
</local:EditorWindow>
6 changes: 3 additions & 3 deletions src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:FancyZonesEditor"
mc:Ignorable="d"
mc:Ignorable="d"
Background="Transparent"
d:DesignHeight="450" d:DesignWidth="800">

Expand Down Expand Up @@ -67,7 +67,7 @@
</Style>
</UserControl.Resources>

<Border BorderBrush="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}" Background="{StaticResource CanvasZoneBackgroundBrush}" BorderThickness="1">
<Border BorderBrush="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}" Background="{DynamicResource CanvasZoneBackgroundBrush}" BorderThickness="1">
<Grid x:Name="Frame">
<Grid.RowDefinitions>
<RowDefinition Height="8"/>
Expand All @@ -90,7 +90,7 @@
Canvas.Bottom="10"
FontSize="64"
FontFamily="Segoe UI Light"
Foreground="White"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Grid.Column="2"
Grid.Row="2"
VerticalContentAlignment="Center"
Expand Down
5 changes: 3 additions & 2 deletions src/modules/fancyzones/editor/FancyZonesEditor/Converters/BooleanToBrushConverter.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
// See the LICENSE file in the project root for more information.

using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;

namespace FancyZonesEditor.Converters
{
public class BooleanToBrushConverter : IValueConverter
{
private static readonly Brush _selectedBrush = new SolidColorBrush(Color.FromRgb(0x00, 0x78, 0xD7));
private static readonly Brush _normalBrush = new SolidColorBrush(Color.FromRgb(0xF2, 0xF2, 0xF2));
private static readonly Brush _selectedBrush = SystemParameters.WindowGlassBrush;
private static readonly Brush _normalBrush = new SolidColorBrush(Colors.Transparent);

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
Expand Down
2 changes: 1 addition & 1 deletion src/modules/fancyzones/editor/FancyZonesEditor/EditorWindow.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

namespace FancyZonesEditor
{
public class EditorWindow : MetroWindow
public class EditorWindow : Window
{
protected void OnSaveApplyTemplate(object sender, RoutedEventArgs e)
{
Expand Down
Loading