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:DataType="vm:TaskListViewModel"
x:Name="Root"> x:Name="Root">
<DockPanel> <DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="4"> <!-- Inline add field at bottom -->
<TextBlock Text="Tasks" FontWeight="Bold" FontSize="14" VerticalAlignment="Center" Margin="4,0"/> <Border DockPanel.Dock="Bottom" Padding="8,8"
</StackPanel> BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Spacing="4" Margin="4"> <TextBox x:Name="InlineAddBox"
<Button Content="+ Task" Command="{Binding AddTaskCommand}" MinWidth="60"/> Text="{Binding InlineAddTitle, Mode=TwoWay}"
<Button Content="Edit" Command="{Binding EditTaskCommand}" MinWidth="50"/> Watermark="+ Add a task..."
<Button Content="Delete" Command="{Binding DeleteTaskCommand}" MinWidth="50"/> BorderThickness="1"
</StackPanel> BorderBrush="{StaticResource BorderSubtleBrush}"
<ListBox ItemsSource="{Binding Tasks}" 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}" SelectedItem="{Binding SelectedTask}"
Margin="4"> Background="Transparent"
Margin="4,0"
KeyDown="OnTaskListKeyDown">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="vm:TaskItemViewModel"> <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> <Grid.ContextFlyout>
<MenuFlyout> <MenuFlyout>
<MenuItem Header="Edit" <MenuItem Header="Edit"
@@ -31,19 +46,51 @@
Command="{Binding RunNowCommand}"/> Command="{Binding RunNowCommand}"/>
</MenuFlyout> </MenuFlyout>
</Grid.ContextFlyout> </Grid.ContextFlyout>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Title}" FontWeight="SemiBold"/> <!-- Circular checkbox -->
<TextBlock Text="{Binding TagsText}" FontSize="10" Foreground="Gray" <Border Grid.Column="0" Width="22" Height="22"
IsVisible="{Binding TagsText, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/> CornerRadius="11"
</StackPanel> BorderThickness="2"
<Border Grid.Column="1" CornerRadius="3" Padding="6,2" Margin="4,0" BorderBrush="{Binding StatusText, Converter={x:Static conv:CheckboxBorderConverter.Instance}}"
Background="{Binding StatusText, Converter={x:Static conv:StatusColorConverter.Instance}}" Background="Transparent"
VerticalAlignment="Center"> VerticalAlignment="Center" Margin="0,0,10,0"
<TextBlock Text="{Binding StatusText}" Foreground="White" FontSize="11"/> 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> </Border>
<Button Grid.Column="2" Content="Run" Command="{Binding RunNowCommand}"
Margin="4,0,0,0" VerticalAlignment="Center" Padding="8,2" <!-- Task content -->
FontSize="11"/> <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> </Grid>
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>

View File

@@ -31,4 +31,10 @@ public partial class TaskListView : UserControl
e.Handled = true; 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) { }
} }