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

Jump to bottom

refactor(DatePicker): lightweight styling for datepicker #1097

Merged
merged 1 commit into from
Jul 27, 2023
Merged

refactor(DatePicker): lightweight styling for datepicker #1097

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
85 changes: 55 additions & 30 deletions src/library/Uno.Material/Styles/Controls/v2/DatePicker.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,6 @@
xmlns:wasm="http://uno.ui/wasm"
mc:Ignorable="ios android wasm not_win">

<x:Double x:Key="DateTimeFlyoutBorderThickness">1</x:Double>
<x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
<x:Double x:Key="DatePickerHeight">53</x:Double>
<x:Double x:Key="DatePickerFlyoutElevation">8</x:Double>
<x:Double x:Key="DatePickerFlyoutButtonOpacityPressed">0.65</x:Double>
<x:Double x:Key="DatePickerFlyoutButtonOpacityDisabled">0.65</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterWidth">296</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterMinWidth">296</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterMaxHeight">398</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
<Thickness x:Key="DatePickerHostPadding">24,24,8,8</Thickness>
<Thickness x:Key="DatePickerFlyoutButtonPadding">0</Thickness>
<CornerRadius x:Key="DatePickerCornerRadius">4,4,0,0</CornerRadius>

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<!-- MaterialDatePickerFlyoutButtonStyle -->
Expand Down Expand Up @@ -58,6 +43,26 @@
<StaticResource x:Key="DatePickerFlyoutPresenterFontFamily" ResourceKey="MaterialRegularFontFamily" />
<StaticResource x:Key="DatePickerFlyoutPresenterFontSize" ResourceKey="ControlContentThemeFontSize" />
<!--#endregion-->

<x:Double x:Key="DatePickerFlyoutBorderThickness">1</x:Double>
<x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
<x:Double x:Key="DatePickerHeight">53</x:Double>
<x:Double x:Key="DatePickerFlyoutElevation">8</x:Double>
<x:Double x:Key="DatePickerFlyoutButtonOpacityPressed">0.65</x:Double>
<x:Double x:Key="DatePickerFlyoutButtonOpacityDisabled">0.65</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterWidth">296</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterMinWidth">296</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterMaxHeight">398</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
<x:Double x:Key="DatePickerButtonBottomBorderHeight">2</x:Double>
<x:Double x:Key="DatePickerButtonContentHeight">24</x:Double>
<Thickness x:Key="DatePickerButtonHeaderMargin">10,8,10,0</Thickness>
<Thickness x:Key="DatePickerButtonPlaceholderMargin">4,0,0,0</Thickness>
<Thickness x:Key="DatePickerButtonContentMargin">6,24,10,0</Thickness>
<Thickness x:Key="DatePickerHostPadding">24,24,8,8</Thickness>
<Thickness x:Key="DatePickerFlyoutButtonPadding">0</Thickness>
<CornerRadius x:Key="DatePickerCornerRadius">4,4,0,0</CornerRadius>
</ResourceDictionary>

<ResourceDictionary x:Key="Light">
Expand Down Expand Up @@ -94,6 +99,26 @@
<StaticResource x:Key="DatePickerFlyoutPresenterFontFamily" ResourceKey="MaterialRegularFontFamily" />
<StaticResource x:Key="DatePickerFlyoutPresenterFontSize" ResourceKey="ControlContentThemeFontSize" />
<!--#endregion-->

<x:Double x:Key="DatePickerFlyoutBorderThickness">1</x:Double>
<x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
<x:Double x:Key="DatePickerHeight">53</x:Double>
<x:Double x:Key="DatePickerFlyoutElevation">8</x:Double>
<x:Double x:Key="DatePickerFlyoutButtonOpacityPressed">0.65</x:Double>
<x:Double x:Key="DatePickerFlyoutButtonOpacityDisabled">0.65</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterWidth">296</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterMinWidth">296</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterMaxHeight">398</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
<x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
<x:Double x:Key="DatePickerButtonBottomBorderHeight">2</x:Double>
<x:Double x:Key="DatePickerButtonContentHeight">24</x:Double>
<Thickness x:Key="DatePickerButtonHeaderMargin">10,8,10,0</Thickness>
<Thickness x:Key="DatePickerButtonPlaceholderMargin">4,0,0,0</Thickness>
<Thickness x:Key="DatePickerButtonContentMargin">6,24,10,0</Thickness>
<Thickness x:Key="DatePickerHostPadding">24,24,8,8</Thickness>
<Thickness x:Key="DatePickerFlyoutButtonPadding">0</Thickness>
<CornerRadius x:Key="DatePickerCornerRadius">4,4,0,0</CornerRadius>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Expand All @@ -102,7 +127,7 @@
TargetType="Button">

<Setter Property="Background" Value="{ThemeResource DatePickerFlyoutButtonBackground}" />
<Setter Property="Padding" Value="{StaticResource DatePickerFlyoutButtonPadding}" />
<Setter Property="Padding" Value="{ThemeResource DatePickerFlyoutButtonPadding}" />

<Setter Property="Template">
<Setter.Value>
Expand All @@ -126,12 +151,12 @@
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.Opacity" Value="{StaticResource DatePickerFlyoutButtonOpacityPressed}" />
<Setter Target="RootGrid.Opacity" Value="{ThemeResource DatePickerFlyoutButtonOpacityPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="RootGrid.Opacity" Value="{StaticResource DatePickerFlyoutButtonOpacityDisabled}" />
<Setter Target="RootGrid.Opacity" Value="{ThemeResource DatePickerFlyoutButtonOpacityDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand All @@ -144,16 +169,16 @@

<not_win:Style x:Key="MaterialDatePickerFlyoutPresenterStyle"
TargetType="DatePickerFlyoutPresenter">
<Setter Property="Width" Value="{StaticResource DatePickerFlyoutPresenterWidth}" />
<Setter Property="MinWidth" Value="{StaticResource DatePickerFlyoutPresenterMinWidth}" />
<Setter Property="MaxHeight" Value="{StaticResource DatePickerFlyoutPresenterMaxHeight}" />
<Setter Property="Width" Value="{ThemeResource DatePickerFlyoutPresenterWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource DatePickerFlyoutPresenterMinWidth}" />
<Setter Property="MaxHeight" Value="{ThemeResource DatePickerFlyoutPresenterMaxHeight}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource DatePickerFlyoutPresenterFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource DatePickerFlyoutPresenterFontSize}" />
<Setter Property="Background" Value="{ThemeResource DatePickerFlyoutPresenterBackground}" />
<Setter Property="AutomationProperties.AutomationId" Value="DatePickerFlyoutPresenter" />
<Setter Property="BorderThickness" Value="{StaticResource DateTimeFlyoutBorderThickness}" />
<Setter Property="BorderThickness" Value="{ThemeResource DatePickerFlyoutBorderThickness}" />
<Setter Property="BorderBrush" Value="{ThemeResource DatePickerFlyoutPresenterBorderBrush}" />
<Setter Property="CornerRadius" Value="{ThemeResource DatePickerFlyoutPresenterCornerRadius}" />
<Setter Property="Template">
Expand All @@ -164,7 +189,7 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{StaticResource DatePickerFlyoutElevation}"
Elevation="{ThemeResource DatePickerFlyoutElevation}"
ShadowColor="Black">
<Border x:Name="Background">
<Grid x:Name="ContentPanel">
Expand Down Expand Up @@ -247,8 +272,8 @@
<Setter Property="Foreground" Value="{ThemeResource DatePickerButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource DatePickerButtonBorderBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Height" Value="{StaticResource DatePickerHeight}" />
<Setter Property="CornerRadius" Value="{StaticResource DatePickerCornerRadius}" />
<Setter Property="Height" Value="{ThemeResource DatePickerHeight}" />
<Setter Property="CornerRadius" Value="{ThemeResource DatePickerCornerRadius}" />
<not_win:Setter Property="FlyoutPresenterStyle"
Value="{StaticResource MaterialDatePickerFlyoutPresenterStyle}" />

Expand All @@ -272,13 +297,13 @@

<!-- Border -->
<Rectangle x:Name="BottomBorder"
Height="2"
Height="{ThemeResource DatePickerButtonBottomBorderHeight}"
VerticalAlignment="Bottom"
Fill="{TemplateBinding BorderBrush}" />

<!-- Header -->
<TextBlock x:Name="HeaderTextBlock"
Margin="10,8,10,0"
Margin="{ThemeResource DatePickerButtonHeaderMargin}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Foreground="{TemplateBinding Foreground}"
Expand All @@ -287,8 +312,8 @@
TextWrapping="Wrap" />

<Grid x:Name="FlyoutButtonContentGrid"
Height="24"
Margin="6,24,10,0"
Height="{ThemeResource DatePickerButtonContentHeight}"
Margin="{ThemeResource DatePickerButtonContentMargin}"
VerticalAlignment="Top">

<!-- DateText -->
Expand All @@ -299,7 +324,7 @@

<!-- PlaceholderText -->
<TextBlock x:Name="PlaceholderText"
Margin="4,0,0,0"
Margin="{ThemeResource DatePickerButtonPlaceholderMargin}"
Foreground="{ThemeResource DatePickerPlaceholderTextForeground}"
Style="{StaticResource MaterialBodyMedium}"
Text="{TemplateBinding Header}"
Expand Down
Loading