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 <!-- 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 TopLevel (folders and folder-less lists interleaved), and each folder's children resolve the
list template the same way. --> 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> <UserControl.DataTemplates>
<!-- One user-list row. Shared by the top level and by each folder's children, so the <!-- 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. --> row (context menu, drag handlers, drop indicators) exists once. -->
@@ -57,11 +67,11 @@
CommandParameter="{Binding}"/> CommandParameter="{Binding}"/>
</ContextMenu> </ContextMenu>
</Border.ContextMenu> </Border.ContextMenu>
<!-- Icon left-aligned in a chevron-width slot, so a list starts where a sibling folder's <!-- Inside a folder: a spacer for the chevron slot, so list and subfolder icons line up.
chevron does. --> At the top level: no spacer, glyph left-aligned to where a folder's chevron starts. -->
<Grid ColumnDefinitions="14,*,Auto"> <Grid ColumnDefinitions="Auto,20,*,Auto">
<!-- Left accent bar for active state --> <!-- Left accent bar for active state -->
<Border Grid.Column="0" Grid.ColumnSpan="3" <Border Grid.Column="0" Grid.ColumnSpan="4"
Background="Transparent" Background="Transparent"
CornerRadius="8" IsHitTestVisible="False" CornerRadius="8" IsHitTestVisible="False"
IsVisible="{Binding IsActive}"> IsVisible="{Binding IsActive}">
@@ -72,20 +82,25 @@
Margin="-2,0,0,0"/> Margin="-2,0,0,0"/>
</Border> </Border>
<!-- Icon (list-settings → Icon tab; "Folder" when unset) --> <!-- Icon (list-settings → Icon tab; "Folder" when unset) -->
<PathIcon Grid.Column="0" Classes="list-icon" <Border Grid.Column="0" Width="12"
Width="14" Height="14" IsVisible="{Binding !IsDot}" IsVisible="{Binding FolderId, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
Data="{Binding IconKey, Converter={StaticResource IconKey}}" <Panel Grid.Column="1" Classes="list-glyph"
HorizontalAlignment="Left" VerticalAlignment="Center"/> Classes.nested="{Binding FolderId, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
<Ellipse Grid.Column="0" Width="8" Height="8" IsVisible="{Binding IsDot}" <PathIcon Classes="list-icon"
Fill="{Binding DotColorKey, Converter={StaticResource DotBrush}}" Width="14" Height="14" IsVisible="{Binding !IsDot}"
HorizontalAlignment="Left" VerticalAlignment="Center"/> Data="{Binding IconKey, Converter={StaticResource IconKey}}"
VerticalAlignment="Center"/>
<Ellipse Width="8" Height="8" IsVisible="{Binding IsDot}"
Fill="{Binding DotColorKey, Converter={StaticResource DotBrush}}"
VerticalAlignment="Center"/>
</Panel>
<!-- Name --> <!-- Name -->
<TextBlock Grid.Column="1" Classes="list-label" <TextBlock Grid.Column="2" Classes="list-label"
Text="{Binding Name}" ToolTip.Tip="{Binding Name}" Text="{Binding Name}" ToolTip.Tip="{Binding Name}"
VerticalAlignment="Center" Margin="8,0" VerticalAlignment="Center" Margin="8,0"
Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/> Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
<!-- Count --> <!-- Count -->
<TextBlock Grid.Column="2" Classes="list-count" <TextBlock Grid.Column="3" Classes="list-count"
Text="{Binding Count}" IsVisible="{Binding HasCount}"/> Text="{Binding Count}" IsVisible="{Binding HasCount}"/>
</Grid> </Grid>
</Border> </Border>