feat(lists): selectable list/folder colors with accent-aware swatches and custom picker
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user