releases/ClaudeDo
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

style(ui): custom title bar with brand and window controls

Browse Source 
Replace character-glyph window buttons with PathIcon controls using
Lucide-style StreamGeometry. Add left brand block (check glyph +
CLAUDEDO + separator dot + selected list name) and draggable middle
strip. Close button hover turns BloodBrush.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
2026-04-20 11:16:39 +02:00
parent 27c6a4b859
commit 480d05975d
2 changed files with 88 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/ClaudeDo.Ui/Design/IslandStyles.axaml
View File

@@ -14,6 +14,40 @@
<Styles xmlns="https://github.com/avaloniaui" <Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- ============================================================ -->
<!-- ICON GEOMETRY RESOURCES -->
<!-- ============================================================ -->
<Styles.Resources>
<!-- Window control icons (from icons.jsx: min, max, close) -->
<StreamGeometry x:Key="Icon.WinMin">M5 10h10</StreamGeometry>
<StreamGeometry x:Key="Icon.WinMax">M5 5 h10 v10 h-10 z</StreamGeometry>
<StreamGeometry x:Key="Icon.WinClose">M5 5l14 14M19 5L5 19</StreamGeometry>
<!-- Brand check glyph (checkbox-style tick inside a rounded square) -->
<StreamGeometry x:Key="Icon.BrandCheck">M3 3 h18 v18 h-18 z M6 12 l4 4 8-8</StreamGeometry>
</Styles.Resources>
<!-- ============================================================ -->
<!-- TITLE BAR CONTROLS -->
<!-- ============================================================ -->
<Style Selector="Button.title-ctrl">
<Setter Property="Width" Value="36" />
<Setter Property="Height" Value="36" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<Style Selector="Button.title-ctrl:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="Button.title-ctrl.close:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource BloodBrush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- ============================================================ --> <!-- ============================================================ -->
<!-- ISLAND --> <!-- ISLAND -->
<!-- ============================================================ --> <!-- ============================================================ -->

63
src/ClaudeDo.Ui/Views/MainWindow.axaml
View File

@@ -17,16 +17,61 @@
</Window.KeyBindings> </Window.KeyBindings>
<Grid RowDefinitions="36,*"> <Grid RowDefinitions="36,*">
<!-- Custom title bar --> <!-- Custom title bar -->
<Border Grid.Row="0" Background="{DynamicResource DeepBrush}" PointerPressed="OnTitleBarPressed"> <Border Grid.Row="0"
<Grid ColumnDefinitions="*,Auto"> Background="{DynamicResource DeepBrush}"
<TextBlock Grid.Column="0" Margin="14,0" VerticalAlignment="Center" BorderBrush="{DynamicResource LineBrush}"
FontFamily="{DynamicResource SansFamily}" FontSize="12" BorderThickness="0,0,0,1">
Foreground="{DynamicResource TextDimBrush}" Text="ClaudeDo"/> <Grid ColumnDefinitions="Auto,*,Auto">
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="0">
<Button Classes="title-btn" Click="OnMinimize" Content="—"/> <!-- Left: brand block -->
<Button Classes="title-btn" Click="OnToggleMax" Content="▢"/> <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8"
<Button Classes="title-btn close" Click="OnClose" Content="✕"/> VerticalAlignment="Center" Margin="14,0,0,0">
<!-- Green checkbox glyph -->
<PathIcon Classes="title-brand-icon"
Data="{StaticResource Icon.BrandCheck}"
Width="14" Height="14"
Foreground="{DynamicResource MossBrush}" />
<!-- CLAUDEDO label -->
<TextBlock Classes="title-brand-name"
Text="CLAUDEDO"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
Foreground="{DynamicResource TextBrush}"
LetterSpacing="1.4"
VerticalAlignment="Center"/>
<!-- separator dot -->
<TextBlock Text="·"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
Foreground="{DynamicResource TextFaintBrush}"
VerticalAlignment="Center"/>
<!-- current list name -->
<TextBlock Text="{Binding Lists.SelectedList.Name}"
FontFamily="{DynamicResource MonoFont}"
FontSize="11"
Foreground="{DynamicResource TextDimBrush}"
LetterSpacing="1.4"
VerticalAlignment="Center"/>
</StackPanel> </StackPanel>
<!-- Middle: draggable strip -->
<Border Grid.Column="1" Background="Transparent"
PointerPressed="OnTitleBarPressed" />
<!-- Right: window controls -->
<StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="0"
VerticalAlignment="Center" Margin="0,0,4,0">
<Button Classes="title-ctrl" Click="OnMinimize">
<PathIcon Data="{StaticResource Icon.WinMin}" Width="10" Height="10"/>
</Button>
<Button Classes="title-ctrl" Click="OnToggleMax">
<PathIcon Data="{StaticResource Icon.WinMax}" Width="10" Height="10"/>
</Button>
<Button Classes="title-ctrl close" Click="OnClose">
<PathIcon Data="{StaticResource Icon.WinClose}" Width="10" Height="10"/>
</Button>
</StackPanel>
</Grid> </Grid>
</Border> </Border>