style(ui): lists search icon, kbd hint, footer actions
Rewrites ListsIslandView: NAVIGATOR eyebrow, search bar with PathIcon+borderless TextBox+kbd chip, two ItemsControls for SmartLists/UserLists with icon/dot + active left-bar, + New list button, and footer profile row (avatar initials, username, machine/local, MoreHorizontal button). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
@@ -1,38 +1,187 @@
|
|||||||
<UserControl xmlns="https://github.com/avaloniaui"
|
<UserControl xmlns="https://github.com/avaloniaui"
|
||||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||||
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
|
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
|
||||||
|
xmlns:converters="using:ClaudeDo.Ui.Converters"
|
||||||
x:Class="ClaudeDo.Ui.Views.Islands.ListsIslandView"
|
x:Class="ClaudeDo.Ui.Views.Islands.ListsIslandView"
|
||||||
x:DataType="vm:ListsIslandViewModel">
|
x:DataType="vm:ListsIslandViewModel">
|
||||||
|
<UserControl.Resources>
|
||||||
|
<converters:UpperCaseConverter x:Key="UpperCase"/>
|
||||||
|
<converters:IconKeyConverter x:Key="IconKey"/>
|
||||||
|
<converters:DotBrushConverter x:Key="DotBrush"/>
|
||||||
|
</UserControl.Resources>
|
||||||
|
|
||||||
<DockPanel LastChildFill="True">
|
<DockPanel LastChildFill="True">
|
||||||
|
|
||||||
|
<!-- ── Header ── -->
|
||||||
<Border DockPanel.Dock="Top" Classes="island-header">
|
<Border DockPanel.Dock="Top" Classes="island-header">
|
||||||
<StackPanel Spacing="6" Margin="14,12">
|
<StackPanel Margin="14,12,14,0" Spacing="4">
|
||||||
<TextBlock Classes="eyebrow" Text="WORKSPACE"/>
|
<TextBlock Classes="eyebrow"
|
||||||
|
Text="{Binding Converter={StaticResource UpperCase}, ConverterParameter=Navigator, FallbackValue=NAVIGATOR}"
|
||||||
|
FontFamily="{DynamicResource MonoFont}" FontSize="9"
|
||||||
|
Foreground="{DynamicResource TextFaintBrush}" LetterSpacing="1.2">
|
||||||
|
<TextBlock.Text>NAVIGATOR</TextBlock.Text>
|
||||||
|
</TextBlock>
|
||||||
<TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="18"
|
<TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="18"
|
||||||
FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
|
FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
|
||||||
Text="Lists"/>
|
Text="Lists"/>
|
||||||
<TextBox x:Name="SearchBox" Classes="search" Margin="0,8,0,0" PlaceholderText="Search…"
|
|
||||||
Text="{Binding SearchText, Mode=TwoWay}"/>
|
<!-- Search row -->
|
||||||
|
<Border Classes="search-wrap" Margin="0,8,0,12">
|
||||||
|
<Grid ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Center">
|
||||||
|
<PathIcon Grid.Column="0" Width="14" Height="14"
|
||||||
|
Data="{StaticResource Icon.Search}"
|
||||||
|
Foreground="{DynamicResource TextFaintBrush}"
|
||||||
|
Margin="2,0,0,0"/>
|
||||||
|
<TextBox Grid.Column="1" x:Name="SearchBox" Classes="search-inner"
|
||||||
|
PlaceholderText="Search tasks…"
|
||||||
|
Text="{Binding SearchText, Mode=TwoWay}"/>
|
||||||
|
<Border Grid.Column="2" Classes="kbd" Margin="0,0,2,0">
|
||||||
|
<TextBlock Text="Ctrl K"/>
|
||||||
|
</Border>
|
||||||
|
</Grid>
|
||||||
|
</Border>
|
||||||
</StackPanel>
|
</StackPanel>
|
||||||
</Border>
|
</Border>
|
||||||
|
|
||||||
|
<!-- ── Footer ── -->
|
||||||
|
<Border DockPanel.Dock="Bottom"
|
||||||
|
BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,1,0,0"
|
||||||
|
Padding="12,10">
|
||||||
|
<Grid ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Center">
|
||||||
|
<!-- Avatar circle -->
|
||||||
|
<Border Grid.Column="0" Classes="avatar-circle"
|
||||||
|
VerticalAlignment="Center">
|
||||||
|
<TextBlock Text="{Binding UserInitials}"
|
||||||
|
FontFamily="{DynamicResource MonoFont}" FontSize="10"
|
||||||
|
FontWeight="SemiBold"
|
||||||
|
Foreground="{DynamicResource DeepBrush}"
|
||||||
|
HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||||
|
</Border>
|
||||||
|
<!-- Name + machine -->
|
||||||
|
<StackPanel Grid.Column="1" Margin="8,0" Spacing="1" VerticalAlignment="Center">
|
||||||
|
<TextBlock Text="{Binding UserName}"
|
||||||
|
FontSize="12" Foreground="{DynamicResource TextBrush}"/>
|
||||||
|
<TextBlock FontFamily="{DynamicResource MonoFont}" FontSize="10"
|
||||||
|
Foreground="{DynamicResource TextFaintBrush}">
|
||||||
|
<TextBlock.Text>
|
||||||
|
<MultiBinding StringFormat="{}{0} / local">
|
||||||
|
<Binding Path="MachineName"/>
|
||||||
|
</MultiBinding>
|
||||||
|
</TextBlock.Text>
|
||||||
|
</TextBlock>
|
||||||
|
</StackPanel>
|
||||||
|
<!-- More button -->
|
||||||
|
<Button Grid.Column="2" Classes="icon-btn" VerticalAlignment="Center">
|
||||||
|
<PathIcon Data="{StaticResource Icon.MoreHorizontal}"
|
||||||
|
Width="14" Height="14"
|
||||||
|
Foreground="{DynamicResource TextMuteBrush}"/>
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Border>
|
||||||
|
|
||||||
|
<!-- ── Scrollable body ── -->
|
||||||
<ScrollViewer>
|
<ScrollViewer>
|
||||||
<ItemsControl ItemsSource="{Binding Items}" Margin="6">
|
<StackPanel Margin="6,0,6,4">
|
||||||
<ItemsControl.ItemTemplate>
|
|
||||||
<DataTemplate DataType="vm:ListNavItemViewModel">
|
<!-- SMART LISTS section -->
|
||||||
<Border Classes="list-item" Classes.active="{Binding IsActive}"
|
<TextBlock Classes="list-section-label" Text="SMART LISTS"/>
|
||||||
Tapped="OnItemTapped">
|
<ItemsControl ItemsSource="{Binding SmartLists}">
|
||||||
<Grid ColumnDefinitions="20,*,Auto" Margin="10,8">
|
<ItemsControl.ItemTemplate>
|
||||||
<PathIcon Grid.Column="0" Width="14" Height="14"/>
|
<DataTemplate DataType="vm:ListNavItemViewModel">
|
||||||
<TextBlock Grid.Column="1" Text="{Binding Name}"
|
<Border Classes="list-item" Classes.active="{Binding IsActive}"
|
||||||
VerticalAlignment="Center" Margin="8,0"
|
Tapped="OnItemTapped">
|
||||||
Foreground="{DynamicResource TextBrush}" FontSize="13"/>
|
<Grid ColumnDefinitions="20,*,Auto">
|
||||||
<TextBlock Grid.Column="2" Text="{Binding Count}"
|
<!-- Left accent bar for active state -->
|
||||||
FontFamily="{DynamicResource MonoFamily}" FontSize="10"
|
<Border Grid.Column="0" Grid.ColumnSpan="3"
|
||||||
Foreground="{DynamicResource TextFaintBrush}"/>
|
Background="Transparent"
|
||||||
</Grid>
|
CornerRadius="8" IsHitTestVisible="False">
|
||||||
</Border>
|
<Border.IsVisible>
|
||||||
</DataTemplate>
|
<Binding Path="IsActive"/>
|
||||||
</ItemsControl.ItemTemplate>
|
</Border.IsVisible>
|
||||||
</ItemsControl>
|
<Border Width="2" Height="16"
|
||||||
|
Background="{DynamicResource AccentBrush}"
|
||||||
|
CornerRadius="1"
|
||||||
|
HorizontalAlignment="Left" VerticalAlignment="Center"
|
||||||
|
Margin="-8,0,0,0"/>
|
||||||
|
</Border>
|
||||||
|
<!-- Icon -->
|
||||||
|
<PathIcon Grid.Column="0" Classes="list-icon"
|
||||||
|
Width="14" Height="14"
|
||||||
|
Data="{Binding IconKey, Converter={StaticResource IconKey}}"
|
||||||
|
Foreground="{DynamicResource TextMuteBrush}"
|
||||||
|
HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||||
|
<!-- Name -->
|
||||||
|
<TextBlock Grid.Column="1" Classes="list-label"
|
||||||
|
Text="{Binding Name}"
|
||||||
|
VerticalAlignment="Center" Margin="8,0"
|
||||||
|
Foreground="{DynamicResource TextDimBrush}" FontSize="13"/>
|
||||||
|
<!-- Count -->
|
||||||
|
<TextBlock Grid.Column="2"
|
||||||
|
Text="{Binding Count}"
|
||||||
|
FontFamily="{DynamicResource MonoFamily}" FontSize="10"
|
||||||
|
Foreground="{DynamicResource TextFaintBrush}"
|
||||||
|
VerticalAlignment="Center"/>
|
||||||
|
</Grid>
|
||||||
|
</Border>
|
||||||
|
</DataTemplate>
|
||||||
|
</ItemsControl.ItemTemplate>
|
||||||
|
</ItemsControl>
|
||||||
|
|
||||||
|
<!-- MY LISTS section -->
|
||||||
|
<TextBlock Classes="list-section-label" Text="MY LISTS"/>
|
||||||
|
<ItemsControl ItemsSource="{Binding UserLists}">
|
||||||
|
<ItemsControl.ItemTemplate>
|
||||||
|
<DataTemplate DataType="vm:ListNavItemViewModel">
|
||||||
|
<Border Classes="list-item" Classes.active="{Binding IsActive}"
|
||||||
|
Tapped="OnItemTapped">
|
||||||
|
<Grid ColumnDefinitions="20,*,Auto">
|
||||||
|
<!-- Left accent bar for active state -->
|
||||||
|
<Border Grid.Column="0" Grid.ColumnSpan="3"
|
||||||
|
Background="Transparent"
|
||||||
|
CornerRadius="8" IsHitTestVisible="False"
|
||||||
|
IsVisible="{Binding IsActive}">
|
||||||
|
<Border Width="2" Height="16"
|
||||||
|
Background="{DynamicResource AccentBrush}"
|
||||||
|
CornerRadius="1"
|
||||||
|
HorizontalAlignment="Left" VerticalAlignment="Center"
|
||||||
|
Margin="-8,0,0,0"/>
|
||||||
|
</Border>
|
||||||
|
<!-- Color dot (6px circle, color from DotColorKey) -->
|
||||||
|
<Ellipse Grid.Column="0"
|
||||||
|
Width="6" Height="6"
|
||||||
|
Fill="{Binding DotColorKey, Converter={StaticResource DotBrush}}"
|
||||||
|
HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||||
|
<!-- Name -->
|
||||||
|
<TextBlock Grid.Column="1" Classes="list-label"
|
||||||
|
Text="{Binding Name}"
|
||||||
|
VerticalAlignment="Center" Margin="8,0"
|
||||||
|
Foreground="{DynamicResource TextDimBrush}" FontSize="13"/>
|
||||||
|
<!-- Count -->
|
||||||
|
<TextBlock Grid.Column="2"
|
||||||
|
Text="{Binding Count}"
|
||||||
|
FontFamily="{DynamicResource MonoFamily}" FontSize="10"
|
||||||
|
Foreground="{DynamicResource TextFaintBrush}"
|
||||||
|
VerticalAlignment="Center"/>
|
||||||
|
</Grid>
|
||||||
|
</Border>
|
||||||
|
</DataTemplate>
|
||||||
|
</ItemsControl.ItemTemplate>
|
||||||
|
</ItemsControl>
|
||||||
|
|
||||||
|
<!-- + New list button -->
|
||||||
|
<Button Classes="new-list-btn" Margin="0,4,0,0">
|
||||||
|
<StackPanel Orientation="Horizontal" Spacing="6">
|
||||||
|
<PathIcon Data="{StaticResource Icon.Plus}"
|
||||||
|
Width="13" Height="13"
|
||||||
|
Foreground="{DynamicResource TextMuteBrush}"
|
||||||
|
VerticalAlignment="Center"/>
|
||||||
|
<TextBlock Text="New list" FontSize="12"
|
||||||
|
Foreground="{DynamicResource TextMuteBrush}"
|
||||||
|
VerticalAlignment="Center"/>
|
||||||
|
</StackPanel>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</StackPanel>
|
||||||
</ScrollViewer>
|
</ScrollViewer>
|
||||||
</DockPanel>
|
</DockPanel>
|
||||||
</UserControl>
|
</UserControl>
|
||||||
|
|||||||
Reference in New Issue
Block a user