feat(lists): selectable list/folder colors with accent-aware swatches and custom picker

This commit is contained in:
mika kuns
2026-10-01 10:29:53 +02:00
parent d316f3c6a5
commit a6926f53b5
26 changed files with 1529 additions and 45 deletions
@@ -89,12 +89,28 @@
<TextBox Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
<StackPanel Spacing="4" IsVisible="{Binding IsFolder}">
<TextBlock Classes="field-label" Text="{loc:Tr modals.listSettings.folderColor}"/>
<ListBox ItemsSource="{x:Static vm:ListSettingsModalViewModel.FolderColorOptions}"
SelectedItem="{Binding FolderColor, Mode=TwoWay}"
<!-- Colour: swatches follow the accent preset (brushes mutated in place), the picker stores a literal hex.
The empty ring is "default". Shared by lists (dot) and folders (name + guide line). -->
<StackPanel Spacing="4">
<TextBlock Classes="field-label" Text="{loc:Tr modals.listSettings.color}"/>
<ListBox ItemsSource="{x:Static vm:ListSettingsModalViewModel.SwatchOptions}"
SelectedItem="{Binding SelectedSwatch, Mode=TwoWay}"
Background="Transparent" BorderThickness="0"
HorizontalAlignment="Left">
<ListBox.Styles>
<Style Selector="ListBoxItem">
<Setter Property="Padding" Value="2"/>
<Setter Property="MinHeight" Value="0"/>
</Style>
<Style Selector="Border.swatch">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource LineBrightBrush}"/>
</Style>
<Style Selector="ListBoxItem:selected Border.swatch">
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="{DynamicResource TextBrush}"/>
</Style>
</ListBox.Styles>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
@@ -102,14 +118,27 @@
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate x:DataType="x:String">
<!-- "" renders as an empty ring: the "no colour" swatch. -->
<Border Width="18" Height="18" Margin="3" CornerRadius="9"
BorderThickness="1" BorderBrush="{DynamicResource LineBrightBrush}"
Background="{Binding Converter={x:Static conv:HexBrushConverter.Instance}, ConverterParameter=Surface2Brush}"/>
<Border Classes="swatch" Width="20" Height="20" CornerRadius="10"
Background="{Binding Converter={x:Static conv:ColorBrushConverter.Instance}, ConverterParameter=Surface2Brush}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="{loc:Tr modals.listSettings.folderColorHint}"
<StackPanel Orientation="Horizontal" Spacing="8" Margin="0,4,0,0">
<TextBlock Text="{loc:Tr modals.listSettings.colorCustom}" VerticalAlignment="Center"/>
<Border Classes="custom-swatch" Classes.on="{Binding IsCustomColor}" CornerRadius="4" Padding="2">
<Border.Styles>
<Style Selector="Border.custom-swatch">
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
<Style Selector="Border.custom-swatch.on">
<Setter Property="BorderBrush" Value="{DynamicResource TextBrush}"/>
</Style>
</Border.Styles>
<ColorPicker Color="{Binding CustomColor, Mode=TwoWay}" IsAlphaEnabled="False" IsAlphaVisible="False"/>
</Border>
</StackPanel>
<TextBlock Text="{loc:Tr modals.listSettings.colorHint}"
Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
</StackPanel>