feat(ui): add ThemedDatePicker control and adopt in Prime settings
New themed picker supports single-date, date+time, and range modes (replaces inconsistent CalendarDatePicker / DatePicker / TimePicker visuals). Used in the Prime schedules row to combine StartDate / EndDate into a single range picker. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
167
src/ClaudeDo.Ui/Views/Controls/ThemedDatePicker.axaml
Normal file
167
src/ClaudeDo.Ui/Views/Controls/ThemedDatePicker.axaml
Normal file
@@ -0,0 +1,167 @@
|
||||
<UserControl xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
x:Class="ClaudeDo.Ui.Views.Controls.ThemedDatePicker"
|
||||
x:Name="Root">
|
||||
|
||||
<UserControl.Styles>
|
||||
<Style Selector="ToggleButton.trigger">
|
||||
<Setter Property="Background" Value="{DynamicResource DeepBrush}"/>
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource LineBrush}"/>
|
||||
<Setter Property="BorderThickness" Value="1"/>
|
||||
<Setter Property="CornerRadius" Value="{StaticResource InputCornerRadius}"/>
|
||||
<Setter Property="Padding" Value="10,6"/>
|
||||
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
|
||||
<Setter Property="VerticalContentAlignment" Value="Center"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
|
||||
<Setter Property="MinHeight" Value="30"/>
|
||||
</Style>
|
||||
<Style Selector="ToggleButton.trigger:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource Surface2Brush}"/>
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource LineBrightBrush}"/>
|
||||
</Style>
|
||||
<Style Selector="ToggleButton.trigger:checked /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource Surface2Brush}"/>
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource AccentBrush}"/>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Button.quick">
|
||||
<Setter Property="Background" Value="{DynamicResource DeepBrush}"/>
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource LineBrush}"/>
|
||||
<Setter Property="BorderThickness" Value="1"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
|
||||
<Setter Property="CornerRadius" Value="999"/>
|
||||
<Setter Property="Padding" Value="10,3"/>
|
||||
<Setter Property="FontSize" Value="11"/>
|
||||
<Setter Property="MinHeight" Value="22"/>
|
||||
</Style>
|
||||
<Style Selector="Button.quick:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource Surface3Brush}"/>
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource LineBrightBrush}"/>
|
||||
<Setter Property="TextElement.Foreground" Value="{DynamicResource TextBrush}"/>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Button.nav">
|
||||
<Setter Property="Background" Value="Transparent"/>
|
||||
<Setter Property="BorderThickness" Value="0"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
|
||||
<Setter Property="Padding" Value="6,2"/>
|
||||
<Setter Property="CornerRadius" Value="6"/>
|
||||
<Setter Property="MinWidth" Value="28"/>
|
||||
</Style>
|
||||
<Style Selector="Button.nav:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource Surface3Brush}"/>
|
||||
<Setter Property="TextElement.Foreground" Value="{DynamicResource TextBrush}"/>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Button.day">
|
||||
<Setter Property="Background" Value="Transparent"/>
|
||||
<Setter Property="BorderBrush" Value="Transparent"/>
|
||||
<Setter Property="BorderThickness" Value="1"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
|
||||
<Setter Property="Width" Value="32"/>
|
||||
<Setter Property="Height" Value="32"/>
|
||||
<Setter Property="CornerRadius" Value="999"/>
|
||||
<Setter Property="FontSize" Value="12"/>
|
||||
<Setter Property="HorizontalContentAlignment" Value="Center"/>
|
||||
<Setter Property="VerticalContentAlignment" Value="Center"/>
|
||||
<Setter Property="Padding" Value="0"/>
|
||||
</Style>
|
||||
<Style Selector="Button.day:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource Surface3Brush}"/>
|
||||
</Style>
|
||||
<Style Selector="Button.day.outside">
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextFaintBrush}"/>
|
||||
</Style>
|
||||
<Style Selector="Button.day.today">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource AccentBrush}"/>
|
||||
</Style>
|
||||
<Style Selector="Button.day.selected /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
|
||||
<Setter Property="TextElement.Foreground" Value="White"/>
|
||||
</Style>
|
||||
<Style Selector="Button.day.selected:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource AccentDimBrush}"/>
|
||||
</Style>
|
||||
|
||||
<Style Selector="TextBlock.weekday">
|
||||
<Setter Property="HorizontalAlignment" Value="Center"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextMuteBrush}"/>
|
||||
<Setter Property="FontSize" Value="10"/>
|
||||
<Setter Property="FontWeight" Value="SemiBold"/>
|
||||
</Style>
|
||||
</UserControl.Styles>
|
||||
|
||||
<Grid>
|
||||
<ToggleButton x:Name="TriggerButton" Classes="trigger">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<PathIcon Grid.Column="0" Width="14" Height="14"
|
||||
Margin="0,0,8,0"
|
||||
Foreground="{DynamicResource TextDimBrush}"
|
||||
Data="M19,4H18V2H16V4H8V2H6V4H5A2,2 0 0,0 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"/>
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="{Binding #Root.DisplayText}"
|
||||
Foreground="{Binding #Root.DisplayForeground}"
|
||||
VerticalAlignment="Center"
|
||||
TextTrimming="CharacterEllipsis"/>
|
||||
<PathIcon Grid.Column="2" Width="10" Height="10"
|
||||
Margin="8,0,0,0"
|
||||
Foreground="{DynamicResource TextMuteBrush}"
|
||||
Data="M7,10L12,15L17,10H7Z"/>
|
||||
</Grid>
|
||||
</ToggleButton>
|
||||
|
||||
<Popup x:Name="PickerPopup"
|
||||
PlacementTarget="{Binding #TriggerButton}"
|
||||
Placement="Bottom"
|
||||
IsOpen="{Binding #TriggerButton.IsChecked, Mode=TwoWay}"
|
||||
IsLightDismissEnabled="True">
|
||||
<Border Background="{DynamicResource Surface2Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="10"
|
||||
Padding="14"
|
||||
Margin="0,4,0,0"
|
||||
BoxShadow="{StaticResource ModalShadow}"
|
||||
MinWidth="300">
|
||||
<StackPanel Spacing="10">
|
||||
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||
<Button Classes="quick" Content="Today" Click="OnTodayClick"/>
|
||||
<Button Classes="quick" Content="Tomorrow" Click="OnTomorrowClick"/>
|
||||
<Button Classes="quick" Content="Next Mon" Click="OnNextMondayClick"/>
|
||||
<Button Classes="quick" Content="Clear" Click="OnClearClick"/>
|
||||
</StackPanel>
|
||||
|
||||
<Grid ColumnDefinitions="Auto,*,Auto" Margin="0,2,0,0">
|
||||
<Button Grid.Column="0" Click="OnPrevMonthClick" Classes="nav" Content="◀"/>
|
||||
<TextBlock Grid.Column="1" x:Name="MonthHeader"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontWeight="SemiBold"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource TextBrush}"/>
|
||||
<Button Grid.Column="2" Click="OnNextMonthClick" Classes="nav" Content="▶"/>
|
||||
</Grid>
|
||||
|
||||
<UniformGrid Columns="7" x:Name="WeekdayHeaders"/>
|
||||
|
||||
<UniformGrid Columns="7" Rows="6" x:Name="DayGrid"/>
|
||||
|
||||
<Grid x:Name="TimeRow"
|
||||
ColumnDefinitions="Auto,*,Auto"
|
||||
Margin="0,4,0,0">
|
||||
<TextBlock Grid.Column="0" Text="Time"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource TextDimBrush}"
|
||||
Margin="0,0,8,0"/>
|
||||
<TextBox Grid.Column="1" x:Name="TimeInput"
|
||||
Watermark="HH:mm" MaxLength="5"
|
||||
Text="{Binding #Root.TimeText, Mode=TwoWay}"/>
|
||||
<Button Grid.Column="2" Content="Done"
|
||||
Click="OnDoneClick"
|
||||
Margin="8,0,0,0"/>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</Popup>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
Reference in New Issue
Block a user