Theme selection

This commit is contained in:
Sour 2021-03-22 00:40:13 -04:00
parent d25ea09dbf
commit 780539d79e
10 changed files with 197 additions and 24 deletions

View file

@ -2,11 +2,5 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Mesen.App">
<Application.Styles>
<FluentTheme Mode="Light" />
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
<StyleInclude Source="avares://Avalonia.Themes.Fluent/DensityStyles/Compact.xaml"/>
<StyleInclude Source="avares://Material.Icons.Avalonia/App.xaml" />
<StyleInclude Source="avares://Dock.Avalonia.Themes.Default/DefaultTheme.axaml"/>
<StyleInclude Source="/Styles/MesenStyles.xaml" />
</Application.Styles>
</Application>

View file

@ -1,6 +1,7 @@
using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
using Mesen.GUI.Config;
using Mesen.Localization;
using Mesen.ViewModels;
using Mesen.Windows;
@ -12,6 +13,7 @@ namespace Mesen
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
PreferencesConfig.ApplyTheme(ConfigManager.Config.Preferences.Theme);
ResourceHelper.LoadResources(Language.English);
}

View file

@ -8,11 +8,16 @@ using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;
using ReactiveUI.Fody.Helpers;
using Avalonia.Styling;
using Avalonia;
using Avalonia.Markup.Xaml.Styling;
using Avalonia.Themes.Fluent;
namespace Mesen.GUI.Config
{
public class PreferencesConfig : BaseConfig<PreferencesConfig>
{
[Reactive] public MesenTheme Theme { get; set; } = MesenTheme.Light;
[Reactive] public Language DisplayLanguage { get; set; } = Language.English;
[Reactive] public bool AutomaticallyCheckForUpdates { get; set; } = true;
[Reactive] public bool SingleInstance { get; set; } = true;
@ -125,8 +130,28 @@ namespace Mesen.GUI.Config
}
}
public static void ApplyTheme(MesenTheme theme)
{
Application.Current.Styles.Clear();
var styles = new List<IStyle> {
new FluentTheme(new Uri("avares://Mesen-X/App.axaml")) { Mode = (theme == MesenTheme.Light) ? FluentThemeMode.Light : FluentThemeMode.Dark },
new StyleInclude(new Uri("avares://Mesen-X/App.axaml")) { Source = new Uri("avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml") },
new StyleInclude(new Uri("avares://Mesen-X/App.axaml")) { Source = new Uri("avares://Material.Icons.Avalonia/App.xaml") },
new StyleInclude(new Uri("avares://Mesen-X/App.axaml")) { Source = new Uri("avares://Dock.Avalonia.Themes.Default/DefaultTheme.axaml") },
new StyleInclude(new Uri("avares://Mesen-X/App.axaml")) { Source = new Uri("/Styles/MesenStyles.xaml", UriKind.Relative) }
};
if(theme == MesenTheme.Dark) {
styles.Add(new StyleInclude(new Uri("avares://Mesen-X/App.axaml")) { Source = new Uri("/Styles/MesenStyles.Dark.xaml", UriKind.Relative) });
}
Application.Current.Styles.AddRange(styles);
}
public void ApplyConfig()
{
/*if(Program.IsMono) {
FileAssociationHelper.ConfigureLinuxMimeTypes();
} else {
@ -168,7 +193,13 @@ namespace Mesen.GUI.Config
});*/
}
}
public enum MesenTheme
{
Light = 0,
Dark = 1
}
public struct InteropPreferencesConfig
{
[MarshalAs(UnmanagedType.I1)] public bool ShowFps;

View file

@ -7,6 +7,7 @@ using System.Reflection;
using System.Linq;
using Mesen.GUI.Config;
using Mesen.Localization;
using Avalonia.Interactivity;
namespace Mesen.Controls
{
@ -15,6 +16,14 @@ namespace Mesen.Controls
public static readonly StyledProperty<Enum> SelectedItemProperty = AvaloniaProperty.Register<EnumComboBox, Enum>(nameof(SelectedItem), null, false, Avalonia.Data.BindingMode.TwoWay);
public static readonly StyledProperty<Type> EnumTypeProperty = AvaloniaProperty.Register<EnumComboBox, Type>(nameof(EnumType));
public static readonly RoutedEvent<SelectionChangedEventArgs> SelectionChangedEvent = RoutedEvent.Register<EnumComboBox, SelectionChangedEventArgs>("SelectionChanged", RoutingStrategies.Bubble);
public event EventHandler<SelectionChangedEventArgs> SelectionChanged
{
add { AddHandler(SelectionChangedEvent, value); }
remove { RemoveHandler(SelectionChangedEvent, value); }
}
public Enum SelectedItem
{
get { return GetValue(SelectedItemProperty); }
@ -44,8 +53,9 @@ namespace Mesen.Controls
this.GetPropertyChangedObservable(SelectedItemProperty).Subscribe(_ => {
//If the binding is changed, update the inner combobox too
if(_.NewValue is Enum value) {
cbo.SelectedItem = ResourceHelper.GetEnumText(value);
if(_.NewValue is Enum newValue && _.OldValue is Enum oldValue) {
cbo.SelectedItem = ResourceHelper.GetEnumText(newValue);
RaiseEvent(new SelectionChangedEventArgs(SelectionChangedEvent, new List<Enum> { oldValue }, new List<Enum> { newValue }));
}
});

View file

@ -27,11 +27,11 @@
<None Remove="Assets\Icon.ico" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Avalonia" Version="0.10.0" />
<PackageReference Include="Avalonia.Controls.DataGrid" Version="0.10.0" />
<PackageReference Include="Avalonia.Desktop" Version="0.10.0" />
<PackageReference Include="Avalonia.Diagnostics" Version="0.10.0" />
<PackageReference Include="Avalonia.ReactiveUI" Version="0.10.0" />
<PackageReference Include="Avalonia" Version="0.10.999-cibuild0013089-beta" />
<PackageReference Include="Avalonia.Controls.DataGrid" Version="0.10.999-cibuild0013089-beta" />
<PackageReference Include="Avalonia.Desktop" Version="0.10.999-cibuild0013089-beta" />
<PackageReference Include="Avalonia.Diagnostics" Version="0.10.999-cibuild0013089-beta" />
<PackageReference Include="Avalonia.ReactiveUI" Version="0.10.999-cibuild0013089-beta" />
<PackageReference Include="Dock.Avalonia" Version="0.10.0" />
<PackageReference Include="Dock.Avalonia.Themes.Default" Version="0.10.0" />
<PackageReference Include="Dock.Model.Avalonia" Version="0.10.0" />
@ -108,6 +108,9 @@
</ItemGroup>
<ItemGroup>
<AvaloniaResource Include="Assets\Icon.ico" />
<AvaloniaResource Include="Styles\MesenStyles.Dark.xaml">
<Generator>MSBuild:Compile</Generator>
</AvaloniaResource>
<AvaloniaResource Include="Styles\MesenStyles.xaml" />
</ItemGroup>
<ItemGroup>

View file

@ -0,0 +1,95 @@
<Styles
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mui="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
>
<Design.PreviewWith>
<Window Width="300" Height="400" Padding="5">
<StackPanel>
<Menu VerticalAlignment="Top">
<MenuItem Header="File">
<MenuItem Header="Abcd">
<MenuItem.Icon>
<mui:MaterialIcon Kind="FolderOpen" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Abcd" />
</MenuItem>
</Menu>
<CheckBox Content="Test" />
<CheckBox Content="Test" IsChecked="True" />
<TabControl>
<TabItem Header="Test" />
</TabControl>
<NumericUpDown Minimum="0" />
<ComboBox SelectedIndex="0">
<ComboBoxItem>0Test</ComboBoxItem>
</ComboBox>
<TextBox Text="00bc" />
<Button Content="Testgpq" />
<RadioButton Content="Test"/>
<RadioButton Content="Test" IsChecked="True"/>
<DatePicker />
<TimePicker />
</StackPanel>
</Window>
</Design.PreviewWith>
<Styles.Resources>
<!-- Custom colors -->
<Color x:Key="MesenMenuBackground">#000</Color>
<Color x:Key="MesenMenuBackgroundHighlight">#555</Color>
<Color x:Key="MesenMenuBorderHighlight">#777</Color>
<!-- Fluent color overrides -->
<Color x:Key="MenuFlyoutPresenterBackground">#000</Color>
<Color x:Key="MenuFlyoutPresenterBorderBrush">#808080</Color>
<Color x:Key="ButtonBackground">#000</Color>
<Color x:Key="ButtonBorderBrush">#ADADAD</Color>
<Color x:Key="ButtonBackgroundPointerOver">#000</Color>
<Color x:Key="ButtonBorderBrushPointerOver">#0078D7</Color>
<Color x:Key="ButtonBackgroundPressed">#000</Color>
<Color x:Key="ButtonBorderBrushPressed">#005499</Color>
<Color x:Key="ComboBoxBackground">#000</Color>
<Color x:Key="ComboBoxBorderBrush">#ADADAD</Color>
<Color x:Key="ComboBoxBackgroundPointerOver">#000</Color>
<Color x:Key="ComboBoxBorderBrushPointerOver">#0078D7</Color>
<Color x:Key="RepeatButtonBackgroundPointerOver">#000</Color>
<Color x:Key="RepeatButtonBorderBrushPointerOver">#0078D7</Color>
<Color x:Key="RepeatButtonBackgroundPressed">#000</Color>
<Color x:Key="RepeatButtonBorderBrushPressed">#005499</Color>
<Color x:Key="CheckBoxCheckBackgroundStrokeUncheckedPointerOver">White</Color>
<Color x:Key="CheckBoxCheckBackgroundStrokeCheckedPointerOver">#000</Color>
<Color x:Key="CheckBoxBorderBrushCheckedPointerOver">White</Color>
<Color x:Key="CheckBoxCheckBackgroundFillChecked">Transparent</Color>
<Color x:Key="CheckBoxCheckGlyphForegroundChecked">White</Color>
<Color x:Key="CheckBoxCheckBackgroundFillCheckedPointerOver">Transparent</Color>
<Color x:Key="CheckBoxCheckGlyphForegroundCheckedPointerOver">White</Color>
<Color x:Key="CheckBoxBackgroundCheckedPressed">Transparent</Color>
<Color x:Key="CheckBoxCheckBackgroundFillCheckedPressed">#000</Color>
<Color x:Key="CheckBoxCheckBackgroundFillUncheckedPressed">#000</Color>
<Color x:Key="CheckBoxCheckGlyphForegroundCheckedPressed">Black</Color>
<!-- Misc fluent overrides -->
<x:Double x:Key="DatePickerThemeMinWidth">150</x:Double>
<x:Double x:Key="TimePickerThemeMinWidth">150</x:Double>
<Thickness x:Key="DatePickerTopHeaderMargin">0</Thickness>
<Thickness x:Key="DatePickerHostPadding">0</Thickness>
<Thickness x:Key="DatePickerHostMonthPadding">0</Thickness>
<Thickness x:Key="TimePickerTopHeaderMargin">0</Thickness>
<Thickness x:Key="TextControlBorderThemeThicknessFocused">1</Thickness>
<Thickness x:Key="DataGridTextColumnCellTextBlockMargin">4,0,4,0</Thickness>
<CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
<CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
</Styles.Resources>
</Styles>

View file

@ -36,8 +36,12 @@
</Design.PreviewWith>
<Styles.Resources>
<CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
<CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
<!-- Custom colors -->
<Color x:Key="MesenMenuBackground">#F1F1F1</Color>
<Color x:Key="MesenMenuBackgroundHighlight">#B5D7F3</Color>
<Color x:Key="MesenMenuBorderHighlight">#0078D7</Color>
<!-- Fluent color overrides -->
<Color x:Key="MenuFlyoutPresenterBackground">#FDFDFD</Color>
<Color x:Key="MenuFlyoutPresenterBorderBrush">#808080</Color>
@ -73,6 +77,7 @@
<Color x:Key="CheckBoxCheckBackgroundFillUncheckedPressed">#CCE4F7</Color>
<Color x:Key="CheckBoxCheckGlyphForegroundCheckedPressed">Black</Color>
<!-- Misc fluent overrides -->
<x:Double x:Key="DatePickerThemeMinWidth">150</x:Double>
<x:Double x:Key="TimePickerThemeMinWidth">150</x:Double>
<Thickness x:Key="DatePickerTopHeaderMargin">0</Thickness>
@ -84,15 +89,36 @@
<Thickness x:Key="TextControlBorderThemeThicknessFocused">1</Thickness>
<Thickness x:Key="DataGridTextColumnCellTextBlockMargin">4,0,4,0</Thickness>
<CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
<CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
</Styles.Resources>
<Style>
<Style.Resources>
<x:Double x:Key="ControlContentThemeFontSize">14</x:Double>
<x:Double x:Key="ContentControlFontSize">14</x:Double>
<x:Double x:Key="TextControlThemeMinHeight">24</x:Double>
<Thickness x:Key="TextControlThemePadding">2,2,6,1</Thickness>
<x:Double x:Key="ListViewItemMinHeight">32</x:Double>
<x:Double x:Key="TreeViewItemMinHeight">24</x:Double>
<Thickness x:Key="TimePickerHostPadding">0,1,0,2</Thickness>
<Thickness x:Key="DatePickerHostPadding">0,1,0,2</Thickness>
<Thickness x:Key="DatePickerHostMonthPadding">9,0,0,1</Thickness>
<Thickness x:Key="ComboBoxEditableTextPadding">10,0,30,0</Thickness>
<x:Double x:Key="ComboBoxMinHeight">0</x:Double>
<Thickness x:Key="ComboBoxPadding">12,1,0,3</Thickness>
<x:Double x:Key="NavigationViewItemOnLeftMinHeight">32</x:Double>
</Style.Resources>
</Style>
<Style Selector="Button:pressed, RepeatButton:pressed, ToggleButton:pressed">
<Setter Property="RenderTransform" Value="scale(1)" />
</Style>
<Style Selector="Menu">
<Setter Property="Height" Value="25" />
<Setter Property="Background" Value="#F1F1F1" />
<Setter Property="Background" Value="{DynamicResource MesenMenuBackground}" />
</Style>
<Style Selector="MenuItem">
@ -108,14 +134,14 @@
<Style Selector="Menu > MenuItem:selected /template/ Border">
<!--<Setter Property="Background" Value="#FAFAFA" />-->
<Setter Property="Background" Value="#B5D7F3" />
<Setter Property="BorderBrush" Value="#0078D7" />
<Setter Property="Background" Value="{DynamicResource MesenMenuBackgroundHighlight}" />
<Setter Property="BorderBrush" Value="{DynamicResource MesenMenuBorderHighlight}" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style Selector="MenuItem > MenuItem:selected /template/ Border">
<Setter Property="Background" Value="#B5D7F3" />
<Setter Property="BorderBrush" Value="#0078D7" />
<Setter Property="Background" Value="{DynamicResource MesenMenuBackgroundHighlight}" />
<Setter Property="BorderBrush" Value="{DynamicResource MesenMenuBorderHighlight}" />
<Setter Property="BorderThickness" Value="1" />
</Style>
@ -235,7 +261,7 @@
<Setter Property="Margin" Value="0 2 0 0" />
</Style>
<Style Selector="ButtonSpinner RepeatButton.ButtonSpinnerRepeatButton">
<Setter Property="Background" Value="#E1E1E1" />
<Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
<Setter Property="MinWidth" Value="19" />
<Setter Property="MaxWidth" Value="20" />
</Style>

View file

@ -73,8 +73,6 @@ namespace Mesen.ViewModels
}
});
this.WhenAnyValue(x => x.Multitap1).Subscribe(x => System.Diagnostics.Debug.Print("new value"));
IObservable<bool> button1Enabled = this.WhenAnyValue(x => x.Config.Controllers[0].Type, x => x == ControllerType.SnesController);
this.SetupPlayer1 = ReactiveCommand.Create<Button>(btn => this.OpenSetup(btn, 0), button1Enabled);

View file

@ -21,6 +21,10 @@
<TabControl TabStripPlacement="Top" SelectedIndex="0">
<TabItem Header="{l:Translate tpgGeneral}">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Theme:" Margin="3 0 5 0" />
<c:EnumComboBox EnumType="{x:Type cfg:MesenTheme}" SelectedItem="{CompiledBinding Config.Theme}" SelectionChanged="cboTheme_SelectionChanged" Width="75" />
</StackPanel>
<CheckBox Content="{l:Translate chkAutomaticallyCheckForUpdates}" IsChecked="{CompiledBinding Config.AutomaticallyCheckForUpdates}" />
<CheckBox Content="{l:Translate chkSingleInstance}" IsChecked="{CompiledBinding Config.SingleInstance}" />

View file

@ -3,6 +3,11 @@ using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Mesen.Utilities;
using Mesen.GUI.Config;
using Mesen.Controls;
using Avalonia.Themes.Fluent;
using Avalonia.Styling;
using System.Collections.Generic;
using Avalonia.Markup.Xaml.Styling;
namespace Mesen.Views
{
@ -17,5 +22,10 @@ namespace Mesen.Views
{
AvaloniaXamlLoader.Load(this);
}
private void cboTheme_SelectionChanged(object? sender, SelectionChangedEventArgs e)
{
PreferencesConfig.ApplyTheme((MesenTheme)e.AddedItems[0]);
}
}
}