Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ThemeSelector Update Phase2 #418

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

ThemeSelector Update Phase2 #418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
afa214c
feat: temp.
rabbitism Sep 20, 2024
66e1339
feat: introduce ThemeSource to ThemeSelectorBase.
rabbitism Sep 20, 2024
17cecbe
feat: add ThemeSelector support
rabbitism Sep 20, 2024
4bdf514
feat: improve default behavior, add complex selector sample.
rabbitism Sep 20, 2024
d14a23e
Update demo/Ursa.Demo/App.axaml
rabbitism Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions demo/Ursa.Demo/Converters/ThemeIconConverter.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
using System;
using System.Globalization;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Data.Converters;

namespace Ursa.Demo.Converters;

public class ThemeIconConverter: ResourceDictionary, IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is null) return AvaloniaProperty.UnsetValue;
return TryGetResource(value, null, out var resource) ? resource : AvaloniaProperty.UnsetValue;
}

public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
79 changes: 61 additions & 18 deletions demo/Ursa.Demo/Pages/ThemeTogglerDemo.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,69 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
mc:Ignorable="d" d:DesignWidth="800"
d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.ThemeTogglerDemo">
<UserControl
x:Class="Ursa.Demo.Pages.ThemeTogglerDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Demo.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:DataType="viewModels:ThemeTogglerDemoViewModel"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<converters:ThemeIconConverter x:Key="ThemeIconConverter">
<StreamGeometry x:Key="{x:Static ThemeVariant.Dark}">M9,2C7.95,2 6.95,2.16 6,2.46C10.06,3.73 13,7.5 13,12C13,16.5 10.06,20.27 6,21.54C6.95,21.84 7.95,22 9,22A10,10 0 0,0 19,12A10,10 0 0,0 9,2Z</StreamGeometry>
<StreamGeometry x:Key="{x:Static ThemeVariant.Light}">M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z</StreamGeometry>
<StreamGeometry x:Key="{x:Static ThemeVariant.Default}">M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z</StreamGeometry>
</converters:ThemeIconConverter>
</ResourceDictionary>
</UserControl.Resources>
<Grid ColumnDefinitions="Auto, *">
<StackPanel Grid.Column="0">
<TextBlock Text="Global"></TextBlock>
<u:ThemeToggleButton/>
<TextBlock Text="Global Indicator"></TextBlock>
<u:ThemeToggleButton Mode="Indicator"/>
<TextBlock Text="Target To Scope"></TextBlock>
<u:ThemeToggleButton TargetScope="{Binding #scope}"></u:ThemeToggleButton>
<TextBlock Text="Global (Controller, TwoState)" />
<u:ThemeToggleButton Mode="Controller" />
<TextBlock Text="Global (Controller, ThreeState)" />
<u:ThemeToggleButton IsThreeState="True" Mode="Controller" />
<TextBlock Text="Global (Indicator, TwoState)" />
<u:ThemeToggleButton Mode="Indicator" />
<TextBlock Text="Global (Indicator, ThreeState)" />
<u:ThemeToggleButton IsThreeState="True" Mode="Indicator" />
<TextBlock Text="Target To Scope" />
<u:ThemeToggleButton TargetScope="{Binding #scope}" />
<u:ThemeSelector
Width="200"
Mode="Indicator"
ThemeSource="{Binding ThemeSource}" />
<u:ThemeSelector
Width="200"
Mode="Indicator"
ThemeSource="{Binding ThemeSource}">
<u:ThemeSelector.ItemTemplate>
<DataTemplate x:DataType="ThemeVariant">
<StackPanel Orientation="Horizontal">
<PathIcon
Width="16"
Height="16"
Margin="12,4"
VerticalAlignment="Center"
Data="{Binding Converter={StaticResource ThemeIconConverter}}" />
<TextBlock Text="{Binding Key}" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</u:ThemeSelector.ItemTemplate>
</u:ThemeSelector>
</StackPanel>
<ThemeVariantScope Grid.Column="1" Name="scope" RequestedThemeVariant="Dark">
<ThemeVariantScope
Name="scope"
Grid.Column="1"
RequestedThemeVariant="Dark">
<Border Theme="{DynamicResource CardBorder}">
<StackPanel>
<Button Content="Hello World"></Button>
<Calendar></Calendar>
<u:ThemeToggleButton></u:ThemeToggleButton>
<Button Content="Hello World" />
<Calendar />
<u:ThemeToggleButton />
</StackPanel>
</Border>
</ThemeVariantScope>
Expand Down
18 changes: 16 additions & 2 deletions demo/Ursa.Demo/ViewModels/ThemeTogglerDemoViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
using System.Collections.ObjectModel;
using Avalonia.Styling;
using CommunityToolkit.Mvvm.ComponentModel;

namespace Ursa.Demo.ViewModels;

public class ThemeTogglerDemoViewModel
public partial class ThemeTogglerDemoViewModel: ObservableObject
{

[ObservableProperty] private ObservableCollection<ThemeVariant> _themeSource;

public ThemeTogglerDemoViewModel()
{
ThemeSource = new ObservableCollection<ThemeVariant>
{
ThemeVariant.Light,
ThemeVariant.Dark,
ThemeVariant.Default
};
}
}
46 changes: 33 additions & 13 deletions src/Ursa.Themes.Semi/Controls/ThemeSelector.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme TargetType="u:ThemeToggleButton" x:Key="{x:Type u:ThemeToggleButton}">
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type u:ThemeToggleButton}" TargetType="u:ThemeToggleButton">
<Setter Property="Template">
<ControlTemplate TargetType="u:ThemeToggleButton">
<Button
Padding="8"
FontWeight="Regular"
Name="{x:Static u:ThemeToggleButton.PART_ThemeButton}"
Padding="8"
HorizontalAlignment="Center"
FontWeight="Regular"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Name="PART_Icon"
Expand All @@ -20,16 +21,35 @@
</ControlTemplate>
</Setter>
<Style Selector="^:dark /template/ PathIcon#PART_Icon">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDarkGlyph}"></Setter>
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_DARK}"></Setter>
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDarkGlyph}" />
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_DARK}" />
</Style>
<Style Selector="^:light /template/ PathIcon#PART_Icon">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonLightGlyph}"></Setter>
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_LIGHT}"></Setter>
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonLightGlyph}" />
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_LIGHT}" />
</Style>
<Style Selector="^ /template/ PathIcon#PART_Icon">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDefaultGlyph}"></Setter>
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_SYSTEM}"></Setter>
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDefaultGlyph}" />
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_SYSTEM}" />
</Style>
</ControlTheme>

<ControlTheme x:Key="{x:Type u:ThemeSelector}" TargetType="u:ThemeSelector">
<Setter Property="ItemTemplate">
<DataTemplate x:DataType="ThemeVariant">
<TextBlock Text="{Binding Key}" />
</DataTemplate>
</Setter>
<Setter Property="Template">
<ControlTemplate TargetType="u:ThemeSelector">
<ComboBox
HorizontalAlignment="Stretch"
ItemsSource="{TemplateBinding ThemeSource}"
ItemTemplate="{TemplateBinding ItemTemplate}"
SelectedItem="{Binding SelectedTheme, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">

</ComboBox>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>
18 changes: 18 additions & 0 deletions src/Ursa/Controls/ThemeSelector/ThemeSelector.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls.Templates;
using Avalonia.Metadata;

namespace Ursa.Controls;

public class ThemeSelector: ThemeSelectorBase
{
public static readonly StyledProperty<IDataTemplate?> ItemTemplateProperty = AvaloniaProperty.Register<ThemeSelector, IDataTemplate?>(
nameof(ItemTemplate));

[InheritDataTypeFromItems(nameof(ThemeSource))]
public IDataTemplate? ItemTemplate
{
get => GetValue(ItemTemplateProperty);
set => SetValue(ItemTemplateProperty, value);
}
}
Loading