refactor(ui): flatten TasksIsland's task list into one virtualized ListBox
Replace the three ItemsControl sections (Overdue/Open/Completed) with a single flat Rows collection (HeaderRow | TaskRowViewModel) bound to a ListBox + VirtualizingStackPanel, so the realized container count stays bounded instead of growing with the list (measured: ~7-8 realized containers at any scroll position with 1000 source rows). Group headers become regular row entries, each section is simply omitted from Rows when empty, and the Completed section's Clear-completed action moves onto the header row itself. SectionFor/ReorderAsync/FindNextInSameSection now read a row's section off the nearest preceding HeaderRow in Rows instead of three separate bound collections, and ScrollSelectedIntoView goes through ListBox.ScrollIntoView so it still works for rows outside the realized window. Drag/reorder behavior, grouping/counts, and the Clear-completed button are unchanged. Auto-scroll-while-dragging and the cross-section reorder bug are explicitly out of scope (follow-up tasks).
This commit is contained in:
mika kuns
@@ -2,7 +2,7 @@
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
|
||||
xmlns:islands="using:ClaudeDo.Ui.Views.Islands"
|
||||
xmlns:converters="using:Avalonia.Data.Converters"
|
||||
xmlns:uiconverters="using:ClaudeDo.Ui.Converters"
|
||||
xmlns:loc="using:ClaudeDo.Ui.Localization"
|
||||
x:Class="ClaudeDo.Ui.Views.Islands.TasksIslandView"
|
||||
x:DataType="vm:TasksIslandViewModel">
|
||||
@@ -89,82 +89,64 @@
|
||||
Command="{Binding OpenNotesCommand}"
|
||||
Content="{loc:Tr tasks.notesPinnedRow}"/>
|
||||
|
||||
<!-- Task list -->
|
||||
<ScrollViewer>
|
||||
<StackPanel Margin="10,4">
|
||||
|
||||
<!-- OVERDUE -->
|
||||
<StackPanel IsVisible="{Binding HasOverdue}">
|
||||
<TextBlock Classes="eyebrow section-label overdue"
|
||||
Text="{loc:Tr tasks.overdue}" Margin="14,14,14,6"/>
|
||||
<ItemsControl ItemsSource="{Binding OverdueItems}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:TaskRowViewModel">
|
||||
<Button Classes="flat" HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<islands:TaskRowView/>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
|
||||
<!-- TASKS -->
|
||||
<StackPanel IsVisible="{Binding HasOpen}">
|
||||
<TextBlock Classes="eyebrow section-label"
|
||||
Text="{loc:Tr tasks.tasks}" Margin="14,14,14,6"
|
||||
IsVisible="{Binding ShowOpenLabel}"/>
|
||||
<ItemsControl ItemsSource="{Binding OpenItems}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:TaskRowViewModel">
|
||||
<Button Classes="flat" HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<islands:TaskRowView/>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
|
||||
<!-- COMPLETED -->
|
||||
<StackPanel>
|
||||
<StackPanel.IsVisible>
|
||||
<MultiBinding Converter="{x:Static converters:BoolConverters.And}">
|
||||
<Binding Path="HasCompleted"/>
|
||||
<Binding Path="IsShowingCompleted"/>
|
||||
</MultiBinding>
|
||||
</StackPanel.IsVisible>
|
||||
<!-- Task list: one flat, virtualized ListBox. Rows is HeaderRow | TaskRowViewModel — group
|
||||
headers are regular entries, not a separate ItemsControl per section, so a
|
||||
VirtualizingStackPanel actually bounds the realized container count. -->
|
||||
<ListBox x:Name="RowsListBox"
|
||||
ItemsSource="{Binding Rows}"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="10,4">
|
||||
<ListBox.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<VirtualizingStackPanel/>
|
||||
</ItemsPanelTemplate>
|
||||
</ListBox.ItemsPanel>
|
||||
<ListBox.Styles>
|
||||
<!-- SelectedItem is never bound — selection is handled entirely by the inner row Button's
|
||||
SelectCommand, mirroring the pre-virtualization ItemsControl. Avalonia's ListBox has
|
||||
no "no selection" mode, so neutralize the app-wide selected/pointerover
|
||||
ContentPresenter overlay (App.axaml) instead of letting it double up with
|
||||
TaskRowView's own hover/selected style. -->
|
||||
<Style Selector="ListBoxItem">
|
||||
<Setter Property="Padding" Value="0"/>
|
||||
<Setter Property="MinHeight" Value="0"/>
|
||||
<Setter Property="CornerRadius" Value="0"/>
|
||||
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
|
||||
<Setter Property="Focusable" Value="{Binding Converter={x:Static uiconverters:NotHeaderRowConverter.Instance}}"/>
|
||||
</Style>
|
||||
<Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="Transparent"/>
|
||||
</Style>
|
||||
<Style Selector="ListBoxItem:selected /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="Transparent"/>
|
||||
</Style>
|
||||
</ListBox.Styles>
|
||||
<ListBox.DataTemplates>
|
||||
<DataTemplate DataType="vm:HeaderRow">
|
||||
<Grid ColumnDefinitions="*,Auto" Margin="14,14,14,6">
|
||||
<TextBlock Grid.Column="0" Classes="eyebrow section-label"
|
||||
Text="{Binding CompletedHeader}" VerticalAlignment="Center"/>
|
||||
<Button Grid.Column="1" Classes="icon-btn"
|
||||
Command="{Binding ClearCompletedCommand}"
|
||||
Classes.overdue="{Binding IsOverdue}"
|
||||
Text="{Binding Label}" VerticalAlignment="Center"/>
|
||||
<Button Grid.Column="1" Classes="icon-btn" IsVisible="{Binding HasAction}"
|
||||
Command="{Binding ActionCommand}"
|
||||
ToolTip.Tip="{loc:Tr tasks.clearCompletedTip}"
|
||||
VerticalAlignment="Center">
|
||||
<PathIcon Data="{StaticResource Icon.Trash}" Width="13" Height="13"
|
||||
Foreground="{DynamicResource BloodBrush}"/>
|
||||
</Button>
|
||||
</Grid>
|
||||
<ItemsControl ItemsSource="{Binding CompletedItems}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:TaskRowViewModel">
|
||||
<Button Classes="flat" HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<islands:TaskRowView/>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</DataTemplate>
|
||||
<DataTemplate DataType="vm:TaskRowViewModel">
|
||||
<Button Classes="flat" HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Command="{Binding $parent[ListBox].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<islands:TaskRowView/>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ListBox.DataTemplates>
|
||||
</ListBox>
|
||||
|
||||
</DockPanel>
|
||||
</UserControl>
|
||||
|
||||
Reference in New Issue
Block a user