style(ui): island layout with Warm Charcoal theme (Rider-style)

Replace flat columns with rounded island panels on a dark base.
Remove GridSplitters, add gap-based spacing between islands.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mika Kuns
2026-04-14 10:52:52 +02:00
parent 5f51fe9621
commit c3fed45481
2 changed files with 83 additions and 76 deletions

View File

@@ -18,9 +18,11 @@
<SolidColorBrush x:Key="TextDimBrush" Color="#475569"/> <SolidColorBrush x:Key="TextDimBrush" Color="#475569"/>
<!-- Borders & Backgrounds --> <!-- Borders & Backgrounds -->
<SolidColorBrush x:Key="BorderSubtleBrush" Color="#3a4560"/> <SolidColorBrush x:Key="BorderSubtleBrush" Color="#3a3f46"/>
<SolidColorBrush x:Key="SidebarBgBrush" Color="#1a1a2e"/> <SolidColorBrush x:Key="WindowBgBrush" Color="#1c1e21"/>
<SolidColorBrush x:Key="ContentBgBrush" Color="#16162a"/> <SolidColorBrush x:Key="IslandBgBrush" Color="#272a2e"/>
<SolidColorBrush x:Key="SidebarBgBrush" Color="#272a2e"/>
<SolidColorBrush x:Key="ContentBgBrush" Color="#272a2e"/>
<!-- Status colors (for checkboxes) --> <!-- Status colors (for checkboxes) -->
<SolidColorBrush x:Key="StatusGrayBrush" Color="#475569"/> <SolidColorBrush x:Key="StatusGrayBrush" Color="#475569"/>

View File

@@ -11,88 +11,93 @@
MinWidth="800" MinHeight="500" MinWidth="800" MinHeight="500"
KeyDown="OnGlobalKeyDown"> KeyDown="OnGlobalKeyDown">
<DockPanel> <DockPanel Background="{StaticResource WindowBgBrush}">
<v:StatusBarView DockPanel.Dock="Bottom" DataContext="{Binding StatusBar}" /> <v:StatusBarView DockPanel.Dock="Bottom" DataContext="{Binding StatusBar}" />
<Grid ColumnDefinitions="1*,Auto,2*,Auto,1.5*"> <Grid ColumnDefinitions="1*,2*,1.5*" Margin="8,8,8,0">
<DockPanel Grid.Column="0" MinWidth="180" MaxWidth="320" <!-- Lists island -->
Background="{StaticResource SidebarBgBrush}"> <Border Grid.Column="0" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
MinWidth="180" MaxWidth="320" Margin="0,0,4,8" ClipToBounds="True">
<DockPanel>
<TextBlock DockPanel.Dock="Top"
Text="Lists" FontWeight="SemiBold" FontSize="13"
Foreground="{StaticResource TextSecondaryBrush}"
Margin="16,14,16,10"/>
<TextBlock DockPanel.Dock="Top" <Border DockPanel.Dock="Bottom" Padding="8,8"
Text="Lists" FontWeight="SemiBold" FontSize="13" BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}">
Foreground="{StaticResource TextSecondaryBrush}" <Button Content="+ New List"
Margin="16,14,16,10"/> Command="{Binding AddListCommand}"
Background="Transparent"
Foreground="{StaticResource AccentBrush}"
BorderThickness="0"
Padding="12,8"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
FontSize="13"
Cursor="Hand"/>
</Border>
<Border DockPanel.Dock="Bottom" Padding="8,8" <ListBox x:Name="ListsBox"
BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderSubtleBrush}"> ItemsSource="{Binding Lists}"
<Button Content="+ New List" SelectedItem="{Binding SelectedList}"
Command="{Binding AddListCommand}" Background="Transparent"
Background="Transparent" Margin="4,0">
Foreground="{StaticResource AccentBrush}" <ListBox.ItemTemplate>
BorderThickness="0" <DataTemplate x:DataType="vm:ListItemViewModel">
Padding="12,8" <Grid ColumnDefinitions="Auto,*" Margin="8,6"
HorizontalAlignment="Stretch" Background="Transparent"
HorizontalContentAlignment="Left" DoubleTapped="OnListItemDoubleTapped"
FontSize="13" PointerPressed="OnListItemPointerPressed">
Cursor="Hand"/> <Grid.ContextFlyout>
</Border> <MenuFlyout>
<MenuItem Header="Edit"
Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).EditListCommand}"/>
<MenuItem Header="Delete"
Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).DeleteListCommand}"/>
<Separator/>
<MenuItem Header="New Task"
Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).TaskList.AddTaskCommand}"/>
</MenuFlyout>
</Grid.ContextFlyout>
<ListBox x:Name="ListsBox" <Ellipse Grid.Column="0" Width="8" Height="8"
ItemsSource="{Binding Lists}" Fill="{Binding DotBrush}"
SelectedItem="{Binding SelectedList}" VerticalAlignment="Center" Margin="0,0,10,0"/>
Background="Transparent"
Margin="4,0">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="vm:ListItemViewModel">
<Grid ColumnDefinitions="Auto,*" Margin="8,6"
Background="Transparent"
DoubleTapped="OnListItemDoubleTapped"
PointerPressed="OnListItemPointerPressed">
<Grid.ContextFlyout>
<MenuFlyout>
<MenuItem Header="Edit"
Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).EditListCommand}"/>
<MenuItem Header="Delete"
Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).DeleteListCommand}"/>
<Separator/>
<MenuItem Header="New Task"
Command="{Binding $parent[Window].((vm:MainWindowViewModel)DataContext).TaskList.AddTaskCommand}"/>
</MenuFlyout>
</Grid.ContextFlyout>
<Ellipse Grid.Column="0" Width="8" Height="8" <StackPanel Grid.Column="1">
Fill="{Binding DotBrush}" <TextBlock Text="{Binding Name}" FontWeight="Medium"
VerticalAlignment="Center" Margin="0,0,10,0"/> Foreground="{StaticResource TextSecondaryBrush}"/>
<TextBlock Text="{Binding WorkingDir}" FontSize="10"
Foreground="{StaticResource TextDimBrush}"
IsVisible="{Binding WorkingDir, Converter={x:Static ObjectConverters.IsNotNull}}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</Border>
<StackPanel Grid.Column="1"> <!-- Tasks island -->
<TextBlock Text="{Binding Name}" FontWeight="Medium" <Border Grid.Column="1" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
Foreground="{StaticResource TextSecondaryBrush}"/> Margin="4,0,4,8" ClipToBounds="True">
<TextBlock Text="{Binding WorkingDir}" FontSize="10" <DockPanel>
Foreground="{StaticResource TextDimBrush}" <TextBlock DockPanel.Dock="Top"
IsVisible="{Binding WorkingDir, Converter={x:Static ObjectConverters.IsNotNull}}"/> Text="{Binding TaskList.ListName, FallbackValue='Tasks'}"
</StackPanel> FontWeight="SemiBold" FontSize="16"
</Grid> Foreground="{StaticResource TextPrimaryBrush}"
</DataTemplate> Margin="16,14,16,10"/>
</ListBox.ItemTemplate> <v:TaskListView DataContext="{Binding TaskList}" />
</ListBox> </DockPanel>
</DockPanel> </Border>
<GridSplitter Grid.Column="1" Width="4" ResizeDirection="Columns"/> <!-- Detail island -->
<Border Grid.Column="2" CornerRadius="12" Background="{StaticResource IslandBgBrush}"
<DockPanel Grid.Column="2" Background="{StaticResource ContentBgBrush}"> MinWidth="280" MaxWidth="500" Margin="4,0,0,8" ClipToBounds="True">
<TextBlock DockPanel.Dock="Top" <v:TaskDetailView DataContext="{Binding TaskDetail}" />
Text="{Binding TaskList.ListName, FallbackValue='Tasks'}" </Border>
FontWeight="SemiBold" FontSize="16"
Foreground="{StaticResource TextPrimaryBrush}"
Margin="16,14,16,10"/>
<v:TaskListView DataContext="{Binding TaskList}" />
</DockPanel>
<GridSplitter Grid.Column="3" Width="4" ResizeDirection="Columns"/>
<v:TaskDetailView Grid.Column="4" DataContext="{Binding TaskDetail}"
MinWidth="280" MaxWidth="500" />
</Grid> </Grid>
</DockPanel> </DockPanel>
</Window> </Window>