style(ui): tasks header toolbar and add-task row
- Reformat subtitle to "{Weekday}, {Month} {Day} · {open} open".
- Add right-aligned running/review status pill (kbd style).
- Add header icon toolbar: Sort, Eye (toggle completed), MoreHorizontal.
- Wire Eye to IsShowingCompleted [ObservableProperty] on the VM.
- Style add-task row as rounded Surface2 border with dashed Plus circle,
borderless TextBox, and ENTER kbd chip visible on focus.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mika kuns
@@ -2,45 +2,136 @@
|
||||
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"
|
||||
x:Class="ClaudeDo.Ui.Views.Islands.TasksIslandView"
|
||||
x:DataType="vm:TasksIslandViewModel">
|
||||
<DockPanel LastChildFill="True">
|
||||
|
||||
<!-- Header -->
|
||||
<Border DockPanel.Dock="Top" Classes="island-header">
|
||||
<StackPanel Margin="18,14" Spacing="4">
|
||||
<TextBlock Classes="eyebrow" Text="{Binding HeaderEyebrow}"/>
|
||||
<TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="24"
|
||||
FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
|
||||
Text="{Binding HeaderTitle}"/>
|
||||
<TextBlock FontFamily="{DynamicResource MonoFamily}" FontSize="11"
|
||||
Foreground="{DynamicResource TextMuteBrush}" Text="{Binding Subtitle}"/>
|
||||
</StackPanel>
|
||||
<Grid ColumnDefinitions="*,Auto" Margin="18,14">
|
||||
<StackPanel Grid.Column="0" Spacing="4">
|
||||
<TextBlock Classes="eyebrow" Text="{Binding HeaderEyebrow}"/>
|
||||
<TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="24"
|
||||
FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
|
||||
Text="{Binding HeaderTitle}"
|
||||
TextTrimming="CharacterEllipsis"/>
|
||||
<TextBlock FontFamily="{DynamicResource MonoFamily}" FontSize="11"
|
||||
Foreground="{DynamicResource TextMuteBrush}"
|
||||
Text="{Binding Subtitle}"
|
||||
TextTrimming="CharacterEllipsis"/>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="4"
|
||||
VerticalAlignment="Top">
|
||||
<Border Classes="kbd" VerticalAlignment="Center" Margin="0,0,6,0"
|
||||
IsVisible="{Binding HasStatusPill}">
|
||||
<TextBlock Text="{Binding StatusPill}"/>
|
||||
</Border>
|
||||
<Button Classes="icon-btn" Command="{Binding SortCommand}" ToolTip.Tip="Sort">
|
||||
<PathIcon Width="15" Height="15" Data="{StaticResource Icon.Sort}"/>
|
||||
</Button>
|
||||
<Button Classes="icon-btn" Classes.active="{Binding IsShowingCompleted}"
|
||||
Command="{Binding ToggleShowCompletedCommand}"
|
||||
ToolTip.Tip="Show completed">
|
||||
<PathIcon Width="15" Height="15" Data="{StaticResource Icon.Eye}"/>
|
||||
</Button>
|
||||
<Button Classes="icon-btn" Command="{Binding MoreCommand}" ToolTip.Tip="More">
|
||||
<PathIcon Width="15" Height="15" Data="{StaticResource Icon.MoreHorizontal}"/>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Add-task row -->
|
||||
<Border DockPanel.Dock="Top" Margin="18,8,18,4">
|
||||
<TextBox x:Name="AddTaskBox" Watermark="Add a task…" Text="{Binding NewTaskTitle, Mode=TwoWay}">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding AddCommand}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
<Border DockPanel.Dock="Top" Classes="add-task" Margin="16,14,16,8">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||
<Border Grid.Column="0" Classes="add-task-plus" VerticalAlignment="Center">
|
||||
<PathIcon Width="12" Height="12" Data="{StaticResource Icon.Plus}"
|
||||
Foreground="{DynamicResource TextFaintBrush}"/>
|
||||
</Border>
|
||||
<TextBox Grid.Column="1" x:Name="AddTaskBox" Classes="add-task-input"
|
||||
Watermark="Add a task…"
|
||||
Text="{Binding NewTaskTitle, Mode=TwoWay}"
|
||||
VerticalAlignment="Center"
|
||||
Margin="12,0,0,0">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding AddCommand}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
<Border Grid.Column="2" Classes="kbd kbd-enter" VerticalAlignment="Center"
|
||||
IsVisible="{Binding #AddTaskBox.IsFocused}">
|
||||
<TextBlock Text="ENTER"/>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Task list -->
|
||||
<ScrollViewer>
|
||||
<ItemsControl ItemsSource="{Binding Items}" Margin="10,4">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:TaskRowViewModel">
|
||||
<Button Classes="flat" HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Command="{Binding $parent[ItemsControl].DataContext.SelectCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<islands:TaskRowView/>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
<StackPanel Margin="10,4">
|
||||
|
||||
<!-- OVERDUE -->
|
||||
<StackPanel IsVisible="{Binding HasOverdue}">
|
||||
<TextBlock Classes="eyebrow section-label overdue"
|
||||
Text="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>
|
||||
<TextBlock Classes="eyebrow section-label"
|
||||
Text="TASKS" Margin="14,14,14,6"
|
||||
IsVisible="{Binding HasOverdue}"/>
|
||||
<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>
|
||||
<TextBlock Classes="eyebrow section-label"
|
||||
Text="{Binding CompletedHeader}" Margin="14,14,14,6"/>
|
||||
<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>
|
||||
|
||||
</DockPanel>
|
||||
|
||||
Reference in New Issue
Block a user