style(ui): only top-level lists align to the folder chevron

This commit is contained in:
mika kuns
2026-09-30 08:48:36 +02:00
parent cf4b5c507c
commit 5da8036b9a
@@ -8,6 +8,16 @@
<!-- Implicit, type-matched templates: the sidebar's top level is one mixed ItemsControl over
TopLevel (folders and folder-less lists interleaved), and each folder's children resolve the
list template the same way. -->
<!-- Glyph alignment is a style, not a local value, so the nested class can override it. -->
<UserControl.Styles>
<Style Selector="Panel.list-glyph > :is(Control)">
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style Selector="Panel.list-glyph.nested > :is(Control)">
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
</UserControl.Styles>
<UserControl.DataTemplates>
<!-- One user-list row. Shared by the top level and by each folder's children, so the
row (context menu, drag handlers, drop indicators) exists once. -->
@@ -57,11 +67,11 @@
CommandParameter="{Binding}"/>
</ContextMenu>
</Border.ContextMenu>
<!-- Icon left-aligned in a chevron-width slot, so a list starts where a sibling folder's
chevron does. -->
<Grid ColumnDefinitions="14,*,Auto">
<!-- Inside a folder: a spacer for the chevron slot, so list and subfolder icons line up.
At the top level: no spacer, glyph left-aligned to where a folder's chevron starts. -->
<Grid ColumnDefinitions="Auto,20,*,Auto">
<!-- Left accent bar for active state -->
<Border Grid.Column="0" Grid.ColumnSpan="3"
<Border Grid.Column="0" Grid.ColumnSpan="4"
Background="Transparent"
CornerRadius="8" IsHitTestVisible="False"
IsVisible="{Binding IsActive}">
@@ -72,20 +82,25 @@
Margin="-2,0,0,0"/>
</Border>
<!-- Icon (list-settings → Icon tab; "Folder" when unset) -->
<PathIcon Grid.Column="0" Classes="list-icon"
<Border Grid.Column="0" Width="12"
IsVisible="{Binding FolderId, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
<Panel Grid.Column="1" Classes="list-glyph"
Classes.nested="{Binding FolderId, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
<PathIcon Classes="list-icon"
Width="14" Height="14" IsVisible="{Binding !IsDot}"
Data="{Binding IconKey, Converter={StaticResource IconKey}}"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Ellipse Grid.Column="0" Width="8" Height="8" IsVisible="{Binding IsDot}"
VerticalAlignment="Center"/>
<Ellipse Width="8" Height="8" IsVisible="{Binding IsDot}"
Fill="{Binding DotColorKey, Converter={StaticResource DotBrush}}"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
VerticalAlignment="Center"/>
</Panel>
<!-- Name -->
<TextBlock Grid.Column="1" Classes="list-label"
<TextBlock Grid.Column="2" Classes="list-label"
Text="{Binding Name}" ToolTip.Tip="{Binding Name}"
VerticalAlignment="Center" Margin="8,0"
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
<!-- Count -->
<TextBlock Grid.Column="2" Classes="list-count"
<TextBlock Grid.Column="3" Classes="list-count"
Text="{Binding Count}" IsVisible="{Binding HasCount}"/>
</Grid>
</Border>