mirror of
https://github.com/Artemis-RGB/Artemis
synced 2026-11-12 11:56:30 +00:00
Color brush - Fixed gradient picker not appearing
Gradient picker - Use dialog instead of a popup window
This commit is contained in:
SpoinkyNL committed
1 parent
a8912076d3
commit
92a3e0d61b
21 files changed
+206
-101
No files matched your search
@@ -22,7 +22,7 @@
|
||||
<PackageReference Include="AvalonEdit" Version="6.0.1" />
|
||||
<PackageReference Include="Humanizer.Core" Version="2.7.9" />
|
||||
<PackageReference Include="MaterialDesignExtensions" Version="3.0.0" />
|
||||
<PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
|
||||
<PackageReference Include="MaterialDesignThemes" Version="3.1.0" />
|
||||
<PackageReference Include="Ninject" Version="3.3.4" />
|
||||
<PackageReference Include="Ninject.Extensions.Conventions" Version="3.3.0" />
|
||||
<PackageReference Include="SkiaSharp" Version="1.68.2-preview.29" />
|
||||
|
||||
@@ -21,14 +21,28 @@ namespace Artemis.UI.Shared.Controls
|
||||
private readonly DrawingGroup _backingStore;
|
||||
private readonly List<DeviceVisualizerLed> _deviceVisualizerLeds;
|
||||
private BitmapImage _deviceImage;
|
||||
private bool _subscribed;
|
||||
|
||||
public DeviceVisualizer()
|
||||
{
|
||||
_backingStore = new DrawingGroup();
|
||||
_deviceVisualizerLeds = new List<DeviceVisualizerLed>();
|
||||
|
||||
RGBSurface.Instance.Updated += RgbSurfaceOnUpdated;
|
||||
Unloaded += (sender, args) => Dispose();
|
||||
Loaded += (sender, args) => SubscribeToUpdate(true);
|
||||
Unloaded += (sender, args) => SubscribeToUpdate(false);
|
||||
}
|
||||
|
||||
private void SubscribeToUpdate(bool subscribe)
|
||||
{
|
||||
if (_subscribed == subscribe)
|
||||
return;
|
||||
|
||||
if (subscribe)
|
||||
RGBSurface.Instance.Updated += RgbSurfaceOnUpdated;
|
||||
else
|
||||
RGBSurface.Instance.Updated -= RgbSurfaceOnUpdated;
|
||||
|
||||
_subscribed = subscribe;
|
||||
}
|
||||
|
||||
public ArtemisDevice Device
|
||||
@@ -131,7 +145,7 @@ namespace Artemis.UI.Shared.Controls
|
||||
bitmapBrush.Freeze();
|
||||
_backingStore.OpacityMask = bitmapBrush;
|
||||
}
|
||||
|
||||
|
||||
private void RgbSurfaceOnUpdated(UpdatedEventArgs e)
|
||||
{
|
||||
Dispatcher.Invoke(() =>
|
||||
|
||||
@@ -46,6 +46,15 @@ namespace Artemis.UI.Shared.Controls
|
||||
set => SetValue(ColorGradientProperty, value);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets the currently selected color gradient
|
||||
/// </summary>
|
||||
public string DialogHost
|
||||
{
|
||||
get => (string) GetValue(DialogHostProperty);
|
||||
set => SetValue(DialogHostProperty, value);
|
||||
}
|
||||
|
||||
public event PropertyChangedEventHandler PropertyChanged;
|
||||
|
||||
[NotifyPropertyChangedInvocator]
|
||||
@@ -67,7 +76,7 @@ namespace Artemis.UI.Shared.Controls
|
||||
|
||||
private void UIElement_OnMouseUp(object sender, MouseButtonEventArgs e)
|
||||
{
|
||||
GradientPickerService.ShowGradientPicker(ColorGradient);
|
||||
GradientPickerService.ShowGradientPicker(ColorGradient, DialogHost);
|
||||
}
|
||||
|
||||
#region Static WPF fields
|
||||
@@ -75,6 +84,9 @@ namespace Artemis.UI.Shared.Controls
|
||||
public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientPicker),
|
||||
new FrameworkPropertyMetadata(default(ColorGradient), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, ColorGradientPropertyChangedCallback));
|
||||
|
||||
public static readonly DependencyProperty DialogHostProperty = DependencyProperty.Register(nameof(DialogHost), typeof(string), typeof(GradientPicker),
|
||||
new FrameworkPropertyMetadata(default(string)));
|
||||
|
||||
public static readonly RoutedEvent ColorGradientChangedEvent =
|
||||
EventManager.RegisterRoutedEvent(nameof(ColorGradient), RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<ColorGradient>), typeof(GradientPicker));
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<DataTrigger.ExitActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard TargetProperty="StrokeThickness">
|
||||
<DoubleAnimation To="0" Duration="0:0:0.1" />
|
||||
<DoubleAnimation To="1" Duration="0:0:0.1" />
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</DataTrigger.ExitActions>
|
||||
@@ -53,7 +53,7 @@
|
||||
<Path Style="{StaticResource ColorStopStyle}"
|
||||
Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
|
||||
Stroke="{DynamicResource MaterialDesignBody}"
|
||||
StrokeThickness="0"
|
||||
StrokeThickness="1"
|
||||
Cursor="Hand"
|
||||
MouseDown="{s:Action StopMouseDown}"
|
||||
MouseUp="{s:Action StopMouseUp}"
|
||||
|
||||
@@ -1,43 +1,42 @@
|
||||
<controls:MaterialWindow x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorView"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
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:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
|
||||
xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
|
||||
xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
|
||||
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
|
||||
xmlns:shared="clr-namespace:Artemis.UI.Shared"
|
||||
xmlns:s="https://github.com/canton7/Stylet"
|
||||
xmlns:controls1="clr-namespace:Artemis.UI.Shared.Controls"
|
||||
mc:Ignorable="d"
|
||||
Title="Gradient Editor"
|
||||
Background="{DynamicResource MaterialDesignPaper}"
|
||||
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
|
||||
Width="500"
|
||||
Height="500"
|
||||
ResizeMode="NoResize"
|
||||
Icon="/Resources/Images/Logo/logo-512.png"
|
||||
FadeContentIfInactive="False"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
|
||||
<controls:MaterialWindow.Resources>
|
||||
<UserControl x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorView"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
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:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
|
||||
xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
|
||||
xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
|
||||
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
|
||||
xmlns:shared="clr-namespace:Artemis.UI.Shared"
|
||||
xmlns:s="https://github.com/canton7/Stylet"
|
||||
xmlns:controls1="clr-namespace:Artemis.UI.Shared.Controls"
|
||||
mc:Ignorable="d"
|
||||
Background="{DynamicResource MaterialDesignPaper}"
|
||||
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
|
||||
Width="500"
|
||||
Height="500"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
|
||||
<UserControl.Resources>
|
||||
<converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
|
||||
<converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
|
||||
</controls:MaterialWindow.Resources>
|
||||
<Grid>
|
||||
</UserControl.Resources>
|
||||
<Grid Margin="16">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<materialDesign:Card Grid.Row="0" Margin="15 15 15 7" Padding="15" >
|
||||
<materialDesign:Card Grid.Row="0" Margin="15 15 15 7" >
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="16">
|
||||
<materialDesign:PackIcon Kind="Crane" Width="80" Height="80" HorizontalAlignment="Center" />
|
||||
<TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
|
||||
<TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap"
|
||||
HorizontalAlignment="Center">
|
||||
Gradient saving not implemented yet
|
||||
</TextBlock>
|
||||
<TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
|
||||
<TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap"
|
||||
HorizontalAlignment="Center">
|
||||
Soon you'll be able to store different gradients for usage throughout your profiles and quickly select them
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
@@ -50,14 +49,16 @@
|
||||
|
||||
<Rectangle x:Name="Preview" Width="440" Height="40" Margin="15 0">
|
||||
<Rectangle.Fill>
|
||||
<LinearGradientBrush GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
|
||||
<LinearGradientBrush
|
||||
GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
|
||||
</Rectangle.Fill>
|
||||
</Rectangle>
|
||||
|
||||
<ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0" MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
|
||||
<ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0"
|
||||
MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent"/>
|
||||
<Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent" />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemContainerStyle>
|
||||
@@ -85,31 +86,39 @@
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Label Grid.Column="0" HorizontalAlignment="Right">Color:</Label>
|
||||
<controls1:ColorPicker
|
||||
<controls1:ColorPicker
|
||||
Grid.Row="0"
|
||||
Grid.Column="1"
|
||||
x:Name="CurrentColor"
|
||||
Width="85"
|
||||
Width="85"
|
||||
Color="{Binding Path=SelectedColorStopViewModel.ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}"
|
||||
IsEnabled="{Binding HasSelectedColorStopViewModel}"/>
|
||||
IsEnabled="{Binding HasSelectedColorStopViewModel}" />
|
||||
|
||||
<Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right">Location:</Label>
|
||||
<StackPanel Grid.Row="0" Grid.Column="3" Orientation="Horizontal">
|
||||
<TextBox Width="40" Text="{Binding SelectedColorStopViewModel.OffsetPercent}" IsEnabled="{Binding HasSelectedColorStopViewModel}" materialDesign:HintAssist.Hint="0"/>
|
||||
<TextBox Width="40" Text="{Binding SelectedColorStopViewModel.OffsetPercent}"
|
||||
IsEnabled="{Binding HasSelectedColorStopViewModel}" materialDesign:HintAssist.Hint="0" />
|
||||
<Label>%</Label>
|
||||
</StackPanel>
|
||||
|
||||
<Button Grid.Row="0" Grid.Column="4"
|
||||
Style="{StaticResource MaterialDesignRaisedButton}"
|
||||
Width="80"
|
||||
Height="25"
|
||||
<Button Grid.Row="0" Grid.Column="4"
|
||||
Style="{StaticResource MaterialDesignRaisedButton}"
|
||||
Width="80"
|
||||
Height="25"
|
||||
IsEnabled="{Binding HasSelectedColorStopViewModel}"
|
||||
Command="{s:Action RemoveColorStop}"
|
||||
Command="{s:Action RemoveColorStop}"
|
||||
CommandParameter="{Binding SelectedColorStopViewModel}">
|
||||
Delete
|
||||
</Button>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</materialDesign:Card >
|
||||
</materialDesign:Card>
|
||||
|
||||
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
|
||||
<Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0"
|
||||
Command="{s:Action Cancel}" Content="Cancel" />
|
||||
<Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True" Margin="0 8 0 0"
|
||||
Command="{s:Action Confirm}" Content="Accept" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</controls:MaterialWindow>
|
||||
</UserControl>
|
||||
@@ -1,23 +1,29 @@
|
||||
using System.ComponentModel;
|
||||
using System.Collections.Generic;
|
||||
using System.ComponentModel;
|
||||
using System.Linq;
|
||||
using System.Windows;
|
||||
using System.Windows.Controls;
|
||||
using System.Windows.Input;
|
||||
using Artemis.Core.Models.Profile;
|
||||
using Artemis.UI.Shared.Services.Dialog;
|
||||
using Artemis.UI.Shared.Utilities;
|
||||
using SkiaSharp;
|
||||
using Stylet;
|
||||
|
||||
namespace Artemis.UI.Shared.Screens.GradientEditor
|
||||
{
|
||||
public class GradientEditorViewModel : Screen
|
||||
public class GradientEditorViewModel : DialogViewModelBase
|
||||
{
|
||||
private ColorStopViewModel _selectedColorStopViewModel;
|
||||
private readonly List<ColorGradientStop> _originalStops;
|
||||
|
||||
public GradientEditorViewModel(ColorGradient colorGradient)
|
||||
{
|
||||
ColorGradient = colorGradient;
|
||||
ColorStopViewModels = new BindableCollection<ColorStopViewModel>();
|
||||
|
||||
_originalStops = ColorGradient.Stops.Select(s => new ColorGradientStop(s.Color, s.Position)).ToList();
|
||||
|
||||
foreach (var colorStop in ColorGradient.Stops.OrderBy(s => s.Position))
|
||||
ColorStopViewModels.Add(new ColorStopViewModel(this, colorStop));
|
||||
}
|
||||
@@ -37,7 +43,8 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
|
||||
public bool HasSelectedColorStopViewModel => SelectedColorStopViewModel != null;
|
||||
|
||||
public ColorGradient ColorGradient { get; }
|
||||
public double PreviewWidth => 437.5;
|
||||
// TODO: Find the width out from view
|
||||
public double PreviewWidth => 408;
|
||||
|
||||
public void AddColorStop(object sender, MouseEventArgs e)
|
||||
{
|
||||
@@ -75,5 +82,22 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
|
||||
foreach (var stopViewModel in ColorStopViewModels)
|
||||
stopViewModel.IsSelected = stopViewModel == SelectedColorStopViewModel;
|
||||
}
|
||||
|
||||
public void Confirm()
|
||||
{
|
||||
if (!Session.IsEnded)
|
||||
Session.Close(true);
|
||||
}
|
||||
|
||||
public void Cancel()
|
||||
{
|
||||
// Restore the saved state
|
||||
ColorGradient.Stops.Clear();
|
||||
ColorGradient.Stops.AddRange(_originalStops);
|
||||
ColorGradient.OnColorValuesUpdated();
|
||||
|
||||
if (!Session.IsEnded)
|
||||
Session.Close(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
using Artemis.Core.Models.Profile;
|
||||
using System.Collections.Generic;
|
||||
using Artemis.Core.Models.Profile;
|
||||
using Artemis.UI.Shared.Ninject.Factories;
|
||||
using Artemis.UI.Shared.Screens.GradientEditor;
|
||||
using Artemis.UI.Shared.Services.Interfaces;
|
||||
using LiteDB.Engine;
|
||||
using Ninject;
|
||||
using Stylet;
|
||||
|
||||
@@ -10,17 +12,21 @@ namespace Artemis.UI.Shared.Services
|
||||
public class GradientPickerService : IGradientPickerService
|
||||
{
|
||||
private readonly IGradientEditorVmFactory _gradientEditorVmFactory;
|
||||
private readonly IDialogService _dialogService;
|
||||
private readonly IWindowManager _windowManager;
|
||||
|
||||
public GradientPickerService(IGradientEditorVmFactory gradientEditorVmFactory, IWindowManager windowManager)
|
||||
public GradientPickerService(IGradientEditorVmFactory gradientEditorVmFactory, IDialogService dialogService)
|
||||
{
|
||||
_gradientEditorVmFactory = gradientEditorVmFactory;
|
||||
_windowManager = windowManager;
|
||||
_dialogService = dialogService;
|
||||
}
|
||||
|
||||
public void ShowGradientPicker(ColorGradient colorGradient)
|
||||
public void ShowGradientPicker(ColorGradient colorGradient, string dialogHost)
|
||||
{
|
||||
_windowManager.ShowDialog(_gradientEditorVmFactory.Create(colorGradient));
|
||||
if (!string.IsNullOrWhiteSpace(dialogHost))
|
||||
_dialogService.ShowDialogAt<GradientEditorViewModel>(dialogHost, new Dictionary<string, object> {{"colorGradient", colorGradient}});
|
||||
else
|
||||
_dialogService.ShowDialog<GradientEditorViewModel>(new Dictionary<string, object> {{"colorGradient", colorGradient}});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,6 @@ namespace Artemis.UI.Shared.Services.Interfaces
|
||||
{
|
||||
public interface IGradientPickerService : IArtemisSharedUIService
|
||||
{
|
||||
void ShowGradientPicker(ColorGradient colorGradient);
|
||||
void ShowGradientPicker(ColorGradient colorGradient, string dialogHost);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user