feat: add CalendarDatePicker theme.

2023-02-15 17:18:05 +08:00 · 2023-02-15 17:18:05 +08:00 · 73e2ebc316
commit 73e2ebc316
parent 1bfe7a6744
6 changed files with 56 additions and 21 deletions
--- a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
@ -31,7 +31,8 @@
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Padding" Value="4 0" />
+        <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerDefaultHeight}" />
+        <Setter Property="Padding" Value="8 0" />
        <Setter Property="Template">
            <ControlTemplate TargetType="CalendarDatePicker">
                <Panel
@ -51,6 +52,7 @@
                            <TextBox
                                Name="PART_TextBox"
                                Grid.Column="0"
+                                MinHeight="{DynamicResource CalendarDatePickerInnerDefaultHeight}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Center"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@ -63,19 +65,25 @@
                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
                                Watermark="{TemplateBinding Watermark}">
                                <TextBox.Styles>
-                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_BorderElement">
+                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                        <Setter Property="Background" Value="Transparent" />
+                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                        <Setter Property="BorderThickness" Value="0" />
+                                    </Style>
+                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
                                        <Setter Property="Background" Value="Transparent" />
                                        <Setter Property="BorderBrush" Value="Transparent" />
                                        <Setter Property="BorderThickness" Value="0" />
                                    </Style>
                                    <Style Selector="TextBox#PART_TextBox:disabled">
-                                        <Style Selector="^ /template/ Border#PART_BorderElement">
+                                        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
                                            <Setter Property="Background" Value="Transparent" />
                                            <Setter Property="BorderBrush" Value="Transparent" />
                                        </Style>
-                                        <Style Selector="^ /template/ TextBlock#PART_Watermark, ^ TextBlock#PART_FloatingWatermark">
+                                        <Style Selector="^ /template/ TextBlock#PART_Watermark">
                                            <Setter Property="TextElement.Foreground" Value="{DynamicResource CalendarDatePickerTextForegroundDisabled}" />
                                        </Style>
                                    </Style>
@ -113,11 +121,29 @@
            </ControlTemplate>
        </Setter>

+        <Style Selector="^.Large">
+            <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerLargeHeight}" />
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerSmallHeight}" />
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerPointeroverBackground}" />
+            </Style>
+        </Style>
+
        <!--  Disabled State  -->
        <Style Selector="^:disabled">
            <Style Selector="^ /template/ Border#Background">
                <Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerDisabledBorderBrush}" />
            </Style>

            <Style Selector="^ /template/ Button#PART_Button">
--- a/src/Semi.Avalonia/Controls/TextBox.axaml
+++ b/src/Semi.Avalonia/Controls/TextBox.axaml
@ -93,7 +93,7 @@
        <Setter Property="TextBox.FontSize" Value="14" />
        <Setter Property="TextBox.Cursor" Value="IBeam" />
        <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
-        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperDefaultHeight}" />
        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
@ -207,10 +207,10 @@
            </Style>
        </Style>
        <Style Selector="^.Large">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxLargeHeight}" />
+            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
        </Style>
        <Style Selector="^.Small">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxSmallHeight}" />
+            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperSmallHeight}" />
        </Style>

        <Style Selector="^.Bordered">
--- a/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
@ -6,8 +6,8 @@
    <Thickness x:Key="AutoCompleteBoxPopupMargin">4</Thickness>
    <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
    <CornerRadius x:Key="AutoCompleteBoxCornerRadius">3</CornerRadius>
-    <x:Double x:Key="AutoCompleteBoxDefaultHeight">30</x:Double>
-    <x:Double x:Key="AutoCompleteBoxSmallHeight">22</x:Double>
-    <x:Double x:Key="AutoCompleteBoxLargeHeight">38</x:Double>
+    <x:Double x:Key="AutoCompleteBoxDefaultHeight">32</x:Double>
+    <x:Double x:Key="AutoCompleteBoxSmallHeight">24</x:Double>
+    <x:Double x:Key="AutoCompleteBoxLargeHeight">40</x:Double>
    <x:Double x:Key="AutoCompleteMaxDropdownHeight">600</x:Double>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml
@ -3,13 +3,15 @@
    <SolidColorBrush x:Key="CalendarDatePickerIconForeground" Opacity="0.62" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarDatePickerIconPointeroverForeground" Color="#F9F9F9" />
    <PathGeometry x:Key="CalendarDatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
-    <SolidColorBrush x:Key="CalendarDatePickerBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="CalendarDatePickerBorderBrush" Color="#41464C" />
+    <SolidColorBrush x:Key="CalendarDatePickerBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="CalendarDatePickerPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="CalendarDatePickerPressedBackground" Opacity="0.2" Color="White" />
+    <SolidColorBrush x:Key="CalendarDatePickerBorderBrush" Color="Transparent" />
    <Thickness x:Key="CalendarDatePickerBorderThickness">1</Thickness>
    <CornerRadius x:Key="CalendarDatePickerCornerRadius">3</CornerRadius>
-    <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#54A9FF" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledBackground" Color="#1C1F23" />
-    <SolidColorBrush x:Key="CalendarDatePickerDisabledBorderBrush" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CalendarDatePickerDisabledBorderBrush" Color="Transparent" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledIconForeground" Opacity="0.4" Color="#E6E8EA" />
    <BoxShadows x:Key="CalendarDatePickerPopupBoxShadows">0 0 8 0 #1AFFFFFF</BoxShadows>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
@ -6,8 +6,8 @@
    <Thickness x:Key="AutoCompleteBoxPopupMargin">4</Thickness>
    <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
    <CornerRadius x:Key="AutoCompleteBoxCornerRadius">3</CornerRadius>
-    <x:Double x:Key="AutoCompleteBoxDefaultHeight">30</x:Double>
-    <x:Double x:Key="AutoCompleteBoxSmallHeight">22</x:Double>
-    <x:Double x:Key="AutoCompleteBoxLargeHeight">38</x:Double>
+    <x:Double x:Key="AutoCompleteBoxDefaultHeight">32</x:Double>
+    <x:Double x:Key="AutoCompleteBoxSmallHeight">24</x:Double>
+    <x:Double x:Key="AutoCompleteBoxLargeHeight">40</x:Double>
    <x:Double x:Key="AutoCompleteMaxDropdownHeight">600</x:Double>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml
@ -3,13 +3,20 @@
    <SolidColorBrush x:Key="CalendarDatePickerIconForeground" Opacity="0.62" Color="#1C1F23" />
    <SolidColorBrush x:Key="CalendarDatePickerIconPointeroverForeground" Color="#1C1F23" />
    <PathGeometry x:Key="CalendarDatePickerIconGlyph">M4 20V8H20V20H4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM6 10.5C6 10.2239 6.22386 10 6.5 10H8.5C8.77614 10 9 10.2239 9 10.5V12.5C9 12.7761 8.77614 13 8.5 13H6.5C6.22386 13 6 12.7761 6 12.5V10.5ZM6.5 15C6.22386 15 6 15.2239 6 15.5V17.5C6 17.7761 6.22386 18 6.5 18H8.5C8.77614 18 9 17.7761 9 17.5V15.5C9 15.2239 8.77614 15 8.5 15H6.5ZM10.5 10.5C10.5 10.2239 10.7239 10 11 10H13C13.2761 10 13.5 10.2239 13.5 10.5V12.5C13.5 12.7761 13.2761 13 13 13H11C10.7239 13 10.5 12.7761 10.5 12.5V10.5ZM11 15C10.7239 15 10.5 15.2239 10.5 15.5V17.5C10.5 17.7761 10.7239 18 11 18H13C13.2761 18 13.5 17.7761 13.5 17.5V15.5C13.5 15.2239 13.2761 15 13 15H11ZM15 10.5C15 10.2239 15.2239 10 15.5 10H17.5C17.7761 10 18 10.2239 18 10.5V12.5C18 12.7761 17.7761 13 17.5 13H15.5C15.2239 13 15 12.7761 15 12.5V10.5ZM15.5 15C15.2239 15 15 15.2239 15 15.5V17.5C15 17.7761 15.2239 18 15.5 18H17.5C17.7761 18 18 17.7761 18 17.5V15.5C18 15.2239 17.7761 15 17.5 15H15.5Z</PathGeometry>
-    <SolidColorBrush x:Key="CalendarDatePickerBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="CalendarDatePickerBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="CalendarDatePickerBackground" Opacity="0.05" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="CalendarDatePickerBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="CalendarDatePickerPointeroverBackground" Opacity="0.09" Color="#FF2E3238" />
    <Thickness x:Key="CalendarDatePickerBorderThickness">1</Thickness>
    <CornerRadius x:Key="CalendarDatePickerCornerRadius">3</CornerRadius>
-    <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="CalendarDatePickerFocusBorderBrush" Color="#FF0077FA" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledBackground" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledBorderBrush" Color="#F9F9F9" />
    <SolidColorBrush x:Key="CalendarDatePickerDisabledIconForeground" Opacity="0.4" Color="#2E3238" />
    <BoxShadows x:Key="CalendarDatePickerPopupBoxShadows">0 0 8 0 #1A000000</BoxShadows>
+    <x:Double x:Key="CalendarDatePickerInnerDefaultHeight">30</x:Double>
+    <x:Double x:Key="CalendarDatePickerInnerSmallHeight">22</x:Double>
+    <x:Double x:Key="CalendarDatePickerInnerLargeHeight">38</x:Double>
+    <x:Double x:Key="CalendarDatePickerDefaultHeight">32</x:Double>
+    <x:Double x:Key="CalendarDatePickerSmallHeight">24</x:Double>
+    <x:Double x:Key="CalendarDatePickerLargeHeight">40</x:Double>
 </ResourceDictionary>