style(ui): redesign task rows with checkboxes, inline add field, remove toolbar
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,20 +6,35 @@
|
||||
x:DataType="vm:TaskListViewModel"
|
||||
x:Name="Root">
|
||||
<DockPanel>
|
||||
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="4">
|
||||
<TextBlock Text="Tasks" FontWeight="Bold" FontSize="14" VerticalAlignment="Center" Margin="4,0"/>
|
||||
</StackPanel>
|
||||
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Spacing="4" Margin="4">
|
||||
<Button Content="+ Task" Command="{Binding AddTaskCommand}" MinWidth="60"/>
|
||||
<Button Content="Edit" Command="{Binding EditTaskCommand}" MinWidth="50"/>
|
||||
<Button Content="Delete" Command="{Binding DeleteTaskCommand}" MinWidth="50"/>
|
||||
</StackPanel>
|
||||
<ListBox ItemsSource="{Binding Tasks}"
|
||||
<!-- Inline add field at bottom -->
|
||||
<Border DockPanel.Dock="Bottom" Padding="8,8"
|
||||
BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}">
|
||||
<TextBox x:Name="InlineAddBox"
|
||||
Text="{Binding InlineAddTitle, Mode=TwoWay}"
|
||||
Watermark="+ Add a task..."
|
||||
BorderThickness="1"
|
||||
BorderBrush="{StaticResource BorderSubtleBrush}"
|
||||
CornerRadius="8"
|
||||
Padding="10,8"
|
||||
FontSize="13"
|
||||
KeyDown="OnInlineAddKeyDown"
|
||||
GotFocus="OnInlineAddGotFocus"
|
||||
LostFocus="OnInlineAddLostFocus"/>
|
||||
</Border>
|
||||
|
||||
<!-- Task list -->
|
||||
<ListBox x:Name="TaskListBox"
|
||||
ItemsSource="{Binding Tasks}"
|
||||
SelectedItem="{Binding SelectedTask}"
|
||||
Margin="4">
|
||||
Background="Transparent"
|
||||
Margin="4,0"
|
||||
KeyDown="OnTaskListKeyDown">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="vm:TaskItemViewModel">
|
||||
<Grid ColumnDefinitions="*,Auto,Auto" Margin="4,2" Background="Transparent" HorizontalAlignment="Stretch" DoubleTapped="OnTaskItemDoubleTapped" PointerPressed="OnTaskItemPointerPressed">
|
||||
<Grid ColumnDefinitions="Auto,*" Margin="4,4"
|
||||
Background="Transparent"
|
||||
DoubleTapped="OnTaskItemDoubleTapped"
|
||||
PointerPressed="OnTaskItemPointerPressed">
|
||||
<Grid.ContextFlyout>
|
||||
<MenuFlyout>
|
||||
<MenuItem Header="Edit"
|
||||
@@ -31,19 +46,51 @@
|
||||
Command="{Binding RunNowCommand}"/>
|
||||
</MenuFlyout>
|
||||
</Grid.ContextFlyout>
|
||||
<StackPanel Grid.Column="0">
|
||||
<TextBlock Text="{Binding Title}" FontWeight="SemiBold"/>
|
||||
<TextBlock Text="{Binding TagsText}" FontSize="10" Foreground="Gray"
|
||||
IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
|
||||
</StackPanel>
|
||||
<Border Grid.Column="1" CornerRadius="3" Padding="6,2" Margin="4,0"
|
||||
Background="{Binding StatusText, Converter={x:Static conv:StatusColorConverter.Instance}}"
|
||||
VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding StatusText}" Foreground="White" FontSize="11"/>
|
||||
|
||||
<!-- Circular checkbox -->
|
||||
<Border Grid.Column="0" Width="22" Height="22"
|
||||
CornerRadius="11"
|
||||
BorderThickness="2"
|
||||
BorderBrush="{Binding StatusText, Converter={x:Static conv:CheckboxBorderConverter.Instance}}"
|
||||
Background="Transparent"
|
||||
VerticalAlignment="Center" Margin="0,0,10,0"
|
||||
Cursor="Hand"
|
||||
PointerPressed="OnCheckboxPressed">
|
||||
<Panel>
|
||||
<!-- Checkmark for done -->
|
||||
<Canvas Width="12" Height="12"
|
||||
IsVisible="{Binding IsDone}"
|
||||
HorizontalAlignment="Center" VerticalAlignment="Center">
|
||||
<Path Stroke="{StaticResource StatusGreenBrush}" StrokeThickness="2"
|
||||
Data="M 1,6 L 4.5,9.5 L 11,3"/>
|
||||
</Canvas>
|
||||
<!-- Running dot -->
|
||||
<Ellipse Width="8" Height="8"
|
||||
Fill="{StaticResource StatusOrangeBrush}"
|
||||
IsVisible="{Binding IsRunning}"
|
||||
HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Panel>
|
||||
</Border>
|
||||
<Button Grid.Column="2" Content="Run" Command="{Binding RunNowCommand}"
|
||||
Margin="4,0,0,0" VerticalAlignment="Center" Padding="8,2"
|
||||
FontSize="11"/>
|
||||
|
||||
<!-- Task content -->
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding Title}" FontWeight="Medium"
|
||||
Foreground="{StaticResource TextPrimaryBrush}"
|
||||
TextTrimming="CharacterEllipsis"/>
|
||||
<TextBlock FontSize="11"
|
||||
Foreground="{StaticResource TextDimBrush}"
|
||||
IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
|
||||
<TextBlock.Text>
|
||||
<MultiBinding StringFormat="{}{0} · {1}">
|
||||
<Binding Path="TagsText"/>
|
||||
<Binding Path="StatusText"/>
|
||||
</MultiBinding>
|
||||
</TextBlock.Text>
|
||||
</TextBlock>
|
||||
<TextBlock Text="{Binding StatusText}" FontSize="11"
|
||||
Foreground="{StaticResource TextDimBrush}"
|
||||
IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNullOrEmpty}}"/>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
|
||||
@@ -31,4 +31,10 @@ public partial class TaskListView : UserControl
|
||||
e.Handled = true;
|
||||
}
|
||||
}
|
||||
|
||||
private void OnInlineAddKeyDown(object? sender, Avalonia.Input.KeyEventArgs e) { }
|
||||
private void OnInlineAddGotFocus(object? sender, Avalonia.Interactivity.RoutedEventArgs e) { }
|
||||
private void OnInlineAddLostFocus(object? sender, Avalonia.Interactivity.RoutedEventArgs e) { }
|
||||
private void OnTaskListKeyDown(object? sender, Avalonia.Input.KeyEventArgs e) { }
|
||||
private void OnCheckboxPressed(object? sender, Avalonia.Input.PointerPressedEventArgs e) { }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user