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:
@@ -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"/>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user