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:
Mika Kuns
2026-04-14 10:29:44 +02:00
parent 2d6b5bbaff
commit eb7c1ebf69
2 changed files with 76 additions and 23 deletions

View File

@@ -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>

View File

@@ -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) { }
}