[FZ Editor] Light & Dark colors adjustments (#10115)

* [FZ Editor] Light & Dark colors adjustments * Reduce dark theme background transparency
2021-03-09 19:39:01 +01:00 · 2021-03-09 19:39:01 +01:00 · 2e3473bbfd
parent 5c45f2c7b8
commit 2e3473bbfd
5 changed files with 45 additions and 30 deletions
--- a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
@ -16,7 +16,12 @@
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
-                        <Border x:Name="ThumbBorder" Opacity="0" BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                        <Border x:Name="ThumbBorder"
+                                Opacity="0"
+                                CornerRadius="0"
+                                BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates" >
                                    <VisualStateGroup.Transitions>
@ -64,7 +69,9 @@
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
-                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource SystemControlBackgroundAccentBrush}"/>
+                                <Setter Property="BorderBrush"
+                                        TargetName="border"
+                                        Value="{DynamicResource SystemControlBackgroundAccentBrush}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.6"/>
@ -79,10 +86,9 @@
        </Style>
    </UserControl.Resources>

-    <Border BorderBrush="{DynamicResource LayoutPreviewZoneBorderBrush}"
+    <Border BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
            Background="{DynamicResource CanvasZoneBackgroundBrush}"
-            CornerRadius="4"
-            Effect="{StaticResource ZoneDropShadow}"
+            CornerRadius="0"
            BorderThickness="1">
        <Grid x:Name="Frame">
            <Grid.RowDefinitions>
@ -129,15 +135,15 @@

            <Thumb x:Name="Caption" Cursor="SizeAll" Background="Transparent" BorderThickness="3" Padding="4" Grid.Column="0" Grid.ColumnSpan="5" Margin="-1" Grid.Row="0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="Caption_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>

-            <Thumb x:Name="NResize" Cursor="SizeNS" BorderThickness="0,3,0,0" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="NResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="SResize" Cursor="SizeNS" BorderThickness="0,0,0,3" Grid.Row="4" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="SResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="WResize" Cursor="SizeWE" BorderThickness="3,0,0,0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="WResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="EResize" Cursor="SizeWE" BorderThickness="0,0,3,0" Grid.Column="4" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="EResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NResize" Cursor="SizeNS" BorderThickness="0,2,0,0" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="NResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SResize" Cursor="SizeNS" BorderThickness="0,0,0,2" Grid.Row="4" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="SResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="WResize" Cursor="SizeWE" BorderThickness="2,0,0,0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="WResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="EResize" Cursor="SizeWE" BorderThickness="0,0,2,0" Grid.Column="4" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="EResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>

-            <Thumb x:Name="NWResize" Cursor="SizeNWSE" BorderThickness="3,3,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="NEResize" Cursor="SizeNESW" BorderThickness="0,3,3,0" Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="SWResize" Cursor="SizeNESW" BorderThickness="3,0,0,3" Grid.Row="3" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="SEResize" Cursor="SizeNWSE" BorderThickness="0,0,3,3" Grid.Row="3" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NWResize" Cursor="SizeNWSE" BorderThickness="2,2,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NEResize" Cursor="SizeNESW" BorderThickness="0,2,2,0" Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SWResize" Cursor="SizeNESW" BorderThickness="2,0,0,2" Grid.Row="3" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SEResize" Cursor="SizeNWSE" BorderThickness="0,0,2,2" Grid.Row="3" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>

            <Button Content="&#xE894;"
                    BorderThickness="0"
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
@ -10,11 +10,10 @@
    d:DesignHeight="450"
    d:DesignWidth="800"
    Background="{DynamicResource GridZoneBackgroundBrush}"
-    BorderBrush="{DynamicResource LayoutPreviewZoneBorderBrush}"
+    BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
    BorderThickness="1"
    Opacity="1"
    ui:ControlHelper.CornerRadius="4"
-    Effect="{StaticResource ZoneDropShadow}"
    mc:Ignorable="d">
    
    <Grid x:Name="Frame">
--- a/src/modules/fancyzones/editor/FancyZonesEditor/Styles/LayoutPreviewStyles.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/Styles/LayoutPreviewStyles.xaml
@ -14,10 +14,9 @@

    <Style x:Key="GridLayoutActualScalePreviewStyle" TargetType="Border">
        <Setter Property="Background" Value="{DynamicResource LayoutPreviewActualScaleZoneBackgroundBrush}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource LayoutPreviewZoneBorderBrush}" />
-        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="4" />
-        <Setter Property="Effect" Value="{StaticResource ZoneDropShadow}" />
    </Style>

    <Style x:Key="CanvasLayoutSmallScalePreviewStyle" TargetType="Border">
@ -29,9 +28,8 @@

    <Style x:Key="CanvasLayoutActualScalePreviewStyle" TargetType="Border">
        <Setter Property="Background" Value="{DynamicResource LayoutPreviewActualScaleZoneBackgroundBrush}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource LayoutPreviewZoneBorderBrush}" />
-        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="4" />
-        <Setter Property="Effect" Value="{StaticResource ZoneDropShadow}" />
    </Style>
 </ResourceDictionary>
--- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml
@ -15,15 +15,21 @@
    <SolidColorBrush x:Key="TertiaryBackgroundBrush" Color="#FF202020" />
    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF9a9a9a" />
-    <SolidColorBrush x:Key="BackdropBrush" Color="#E55B5B5B" />
+    <SolidColorBrush x:Key="BackdropBrush" Color="#40F0F0F0" />
    <SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF9a9a9a" />
+    
+    <!-- Used for layouts and monitors -->
    <SolidColorBrush x:Key="LayoutItemBackgroundBrush" Color="#FF3A3A3A" />
    <SolidColorBrush x:Key="LayoutItemBackgroundPointerOverBrush" Color="#FF333333" />
+
+    <!-- Used for the fullscreen preview (ActualScale) and for the thumbnail preview (SmallScale) -->
    <SolidColorBrush x:Key="LayoutPreviewBackgroundBrush" Color="#331B1B1B" />
+    <!-- Currently unused -->
    <SolidColorBrush x:Key="LayoutPreviewZoneBorderBrush" Color="#FF555454" />

-    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5202020" />
+    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#B0202020" />
    <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FF202020" />
-    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5202020" />
-    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5202020" />
+
+    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#B0202020" />
+    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#B0202020" />
 </ResourceDictionary>
--- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml
@ -14,16 +14,22 @@
    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFeeeeee" />
    <SolidColorBrush x:Key="TertiaryBackgroundBrush" Color="#FFF3F3F3" />
    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF949494" />
-    <SolidColorBrush x:Key="BackdropBrush" Color="#E5949494" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF6A6A6A" />
+    <SolidColorBrush x:Key="BackdropBrush" Color="#85F0F0F0" />
    <SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF949494" />
+
+    <!-- Used for layouts and monitors -->
    <SolidColorBrush x:Key="LayoutItemBackgroundBrush" Color="#FFffffff"/>
    <SolidColorBrush x:Key="LayoutItemBackgroundPointerOverBrush" Color="#FFf2f2f2" />
+
+    <!-- Used for the fullscreen preview (ActualScale) and for the thumbnail preview (SmallScale) -->
    <SolidColorBrush x:Key="LayoutPreviewBackgroundBrush" Color="#19949494" />
+    <!-- Currently unused -->
    <SolidColorBrush x:Key="LayoutPreviewZoneBorderBrush" Color="#FFC3BEBE" />

-    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5F3F3F3" />
+    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#C5F8F8F8" />
    <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FFDCDCDC" />
-    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5F3F3F3" />
-    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5F3F3F3" />
+    
+    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#C5F8F8F8" />
+    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#C5F8F8F8" />
 </ResourceDictionary>