From 46b3fdf3436971dd8d901cd669f0174791132cb0 Mon Sep 17 00:00:00 2001 From: Luke Taylor Date: Mon, 26 Apr 2021 21:25:16 -0400 Subject: [PATCH 1/8] Add Gradient Helper Buttons --- .../GradientEditor/ColorStopViewModel.cs | 15 ++++++ .../GradientEditor/GradientEditorView.xaml | 53 ++++++++++++++++--- .../GradientEditor/GradientEditorViewModel.cs | 42 ++++++++++++++- 3 files changed, 102 insertions(+), 8 deletions(-) diff --git a/src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs b/src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs index 7629a9899..60080f009 100644 --- a/src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs +++ b/src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs @@ -32,6 +32,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor ColorStop.Position = (float) Math.Round(value / _gradientEditorViewModel.PreviewWidth, 3, MidpointRounding.AwayFromZero); NotifyOfPropertyChange(nameof(Offset)); NotifyOfPropertyChange(nameof(OffsetPercent)); + NotifyOfPropertyChange(nameof(OffsetFloat)); } } @@ -43,6 +44,20 @@ namespace Artemis.UI.Shared.Screens.GradientEditor ColorStop.Position = Math.Min(100, Math.Max(0, value)) / 100f; NotifyOfPropertyChange(nameof(Offset)); NotifyOfPropertyChange(nameof(OffsetPercent)); + NotifyOfPropertyChange(nameof(OffsetFloat)); + } + } + + // Functionally similar to Offset Percent, but doesn't round on get in order to prevent inconsistencies (and is 0 to 1) + public float OffsetFloat + { + get => ColorStop.Position; + set + { + ColorStop.Position = Math.Min(1, Math.Max(0, value)); + NotifyOfPropertyChange(nameof(Offset)); + NotifyOfPropertyChange(nameof(OffsetPercent)); + NotifyOfPropertyChange(nameof(OffsetFloat)); } } diff --git a/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml b/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml index 64e084204..2d8a50a73 100644 --- a/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml +++ b/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml @@ -12,9 +12,9 @@ Background="{DynamicResource MaterialDesignPaper}" FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto" Width="400" - Height="400" - d:DesignHeight="450" - d:DesignWidth="800" + Height="425" + d:DesignHeight="425" + d:DesignWidth="400" d:DataContext="{d:DesignInstance local:GradientEditorViewModel}"> @@ -90,8 +90,43 @@ - - Selected stop + + + + + + + Selected stop: @@ -122,8 +157,12 @@ Margin="8,0,0,0" IsEnabled="{Binding HasSelectedColorStopViewModel}" Command="{s:Action RemoveColorStop}" - CommandParameter="{Binding SelectedColorStopViewModel}"> - DELETE + CommandParameter="{Binding SelectedColorStopViewModel}" + ToolTip="Delete Selected Stop"> + + + Delete + diff --git a/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs b/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs index 497d81963..fb170cc33 100644 --- a/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs +++ b/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs @@ -27,6 +27,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor PropertyChanged += UpdateColorStopViewModels; ColorGradient.CollectionChanged += ColorGradientOnCollectionChanged; + ColorStopViewModels.CollectionChanged += ColorStopViewModelsOnCollectionChanged; } #region Overrides of DialogViewModelBase @@ -53,6 +54,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor } public bool HasSelectedColorStopViewModel => SelectedColorStopViewModel != null; + public bool HasMoreThanOneStop => ColorStopViewModels.Count > 1; public ColorGradient ColorGradient { get; } @@ -79,6 +81,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor ColorStopViewModels.Insert(index, viewModel); SelectColorStop(viewModel); + NotifyOfPropertyChange(nameof(HasMoreThanOneStop)); } public void RemoveColorStop(ColorStopViewModel colorStopViewModel) @@ -90,6 +93,38 @@ namespace Artemis.UI.Shared.Screens.GradientEditor ColorGradient.Remove(colorStopViewModel.ColorStop); SelectColorStop(null); + NotifyOfPropertyChange(nameof(HasMoreThanOneStop)); + } + + public void SpreadColorStops() + { + var stops = ColorStopViewModels.OrderBy(x => x.OffsetFloat); + int index = 0; + foreach (ColorStopViewModel stop in stops) + { + stop.OffsetFloat = index / ((float)stops.Count() - 1); + index++; + } + } + + public void RotateColorStops() + { + var stops = ColorStopViewModels.OrderByDescending(x => x.OffsetFloat); + float lastStopPosition = stops.Last().OffsetFloat; + foreach (ColorStopViewModel stop in stops) + { + float tempStop = stop.OffsetFloat; + stop.OffsetFloat = lastStopPosition; + lastStopPosition = tempStop; + } + } + + public void FlipColorStops() + { + foreach (ColorStopViewModel stop in ColorStopViewModels) + { + stop.OffsetFloat = 1 - stop.OffsetFloat; + } } public Point GetPositionInPreview(object sender, MouseEventArgs e) @@ -127,10 +162,15 @@ namespace Artemis.UI.Shared.Screens.GradientEditor foreach (ColorGradientStop colorStop in ColorGradient) ColorStopViewModels.Add(new ColorStopViewModel(this, colorStop)); } - + private void ColorGradientOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) { NotifyOfPropertyChange(nameof(ColorGradient)); } + + private void ColorStopViewModelsOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) + { + NotifyOfPropertyChange(nameof(HasMoreThanOneStop)); + } } } \ No newline at end of file From a874a494ff33143efe1fdb0e232901d1c682c346 Mon Sep 17 00:00:00 2001 From: Luke Taylor Date: Wed, 28 Apr 2021 09:49:35 -0400 Subject: [PATCH 2/8] Add more gradient tools --- .../GradientEditor/GradientEditorView.xaml | 51 ++++++++++++++----- .../GradientEditor/GradientEditorViewModel.cs | 38 ++++++++++++++ 2 files changed, 76 insertions(+), 13 deletions(-) diff --git a/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml b/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml index 2d8a50a73..32236519e 100644 --- a/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml +++ b/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml @@ -12,8 +12,8 @@ Background="{DynamicResource MaterialDesignPaper}" FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto" Width="400" - Height="425" - d:DesignHeight="425" + Height="450" + d:DesignHeight="450" d:DesignWidth="400" d:DataContext="{d:DesignInstance local:GradientEditorViewModel}"> @@ -90,41 +90,66 @@ - + + + + + + Selected stop: @@ -135,7 +160,7 @@ - + - x.OffsetFloat).Last(); + + if (stop == SelectedColorStopViewModel) SelectColorStop(null); + + ColorStopViewModels.Remove(stop); + ColorGradient.Remove(stop.ColorStop); + + // Distribute the stops if there is still more than one + if (ColorGradient.Count > 1) + SpreadColorStops(); + } + else + { + // Add a stop to the end that is the same color as the first stop + ColorGradientStop stop = new(ColorGradient.First().Color, 100); + ColorGradient.Add(stop); + + ColorStopViewModel viewModel = new(this, stop); + ColorStopViewModels.Add(viewModel); + + NotifyOfPropertyChange(nameof(HasMoreThanOneStop)); + + // Distribute the stops + SpreadColorStops(); + } + } + public void ClearGradient() + { + ColorGradient.Clear(); + ColorStopViewModels.Clear(); + } + public Point GetPositionInPreview(object sender, MouseEventArgs e) { Canvas? parent = VisualTreeUtilities.FindParent((DependencyObject) sender, null); From e82c031f3b5ed7c465384deaf873163b45e6e01e Mon Sep 17 00:00:00 2001 From: Luke Taylor Date: Wed, 28 Apr 2021 09:51:00 -0400 Subject: [PATCH 3/8] Color Picker Textbox QoL Change Make the text always uppercase and make the font monospace to make sure it's visible in low width environments (ie. the gradient picker) --- src/Artemis.UI.Shared/Controls/ColorPicker.xaml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Artemis.UI.Shared/Controls/ColorPicker.xaml b/src/Artemis.UI.Shared/Controls/ColorPicker.xaml index 740f659f0..c28b32576 100644 --- a/src/Artemis.UI.Shared/Controls/ColorPicker.xaml +++ b/src/Artemis.UI.Shared/Controls/ColorPicker.xaml @@ -73,7 +73,9 @@ MinWidth="95" MaxLength="9" Margin="0" - HorizontalAlignment="Stretch"> + HorizontalAlignment="Stretch" + FontFamily="Consolas" + CharacterCasing="Upper">