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: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>
|
||||||
|
|||||||
@@ -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) { }
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user