Merge pull request #14061 from bdach/colour-picker-integration

Integrate editor colour display with colour picker & popover

osu.Game.Tests/Visual/UserInterface/TestSceneLabelledColourPalette.cs

@@ -53,15 +53,15 @@ namespace osu.Game.Tests.Visual.UserInterface
 
                 component.Colours.AddRange(new[]
                 {
-                    Color4.DarkRed,
+                    Colour4.DarkRed,
-                    Color4.Aquamarine,
+                    Colour4.Aquamarine,
-                    Color4.Goldenrod,
+                    Colour4.Goldenrod,
-                    Color4.Gainsboro
+                    Colour4.Gainsboro
                 });
             });
         }
 
-        private Color4 randomColour() => new Color4(
+        private Colour4 randomColour() => new Color4(
             RNG.NextSingle(),
             RNG.NextSingle(),
             RNG.NextSingle(),

osu.Game/Graphics/UserInterfaceV2/ColourDisplay.cs

@@ -3,30 +3,31 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Localisation;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
     /// <summary>
     /// A component which displays a colour along with related description text.
     /// </summary>
-    public class ColourDisplay : CompositeDrawable, IHasCurrentValue<Color4>
+    public class ColourDisplay : CompositeDrawable, IHasCurrentValue<Colour4>, IHasPopover
     {
-        private readonly BindableWithCurrent<Color4> current = new BindableWithCurrent<Color4>();
+        private readonly BindableWithCurrent<Colour4> current = new BindableWithCurrent<Colour4>();
 
         private Box fill;
         private OsuSpriteText colourHexCode;
         private OsuSpriteText colourName;
 
-        public Bindable<Color4> Current
+        public Bindable<Colour4> Current
         {
             get => current.Current;
             set => current.Current = value;
@@ -62,10 +63,11 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 Spacing = new Vector2(0, 10),
                 Children = new Drawable[]
                 {
-                    new CircularContainer
+                    new OsuClickableContainer
                     {
                         RelativeSizeAxes = Axes.X,
                         Height = 100,
+                        CornerRadius = 50,
                         Masking = true,
                         Children = new Drawable[]
                         {
@@ -79,7 +81,8 @@ namespace osu.Game.Graphics.UserInterfaceV2
                                 Origin = Anchor.Centre,
                                 Font = OsuFont.Default.With(size: 12)
                             }
-                        }
+                        },
+                        Action = this.ShowPopover
                     },
                     colourName = new OsuSpriteText
                     {
@@ -103,5 +106,13 @@ namespace osu.Game.Graphics.UserInterfaceV2
             colourHexCode.Text = current.Value.ToHex();
             colourHexCode.Colour = OsuColour.ForegroundTextColourFor(current.Value);
         }
+
+        public Popover GetPopover() => new OsuPopover(false)
+        {
+            Child = new OsuColourPicker
+            {
+                Current = { BindTarget = Current }
+            }
+        };
     }
 }

osu.Game/Graphics/UserInterfaceV2/ColourPalette.cs

@@ -1,6 +1,7 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System.Collections.Specialized;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
@@ -8,7 +9,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
@@ -17,7 +17,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
     /// </summary>
     public class ColourPalette : CompositeDrawable
     {
-        public BindableList<Color4> Colours { get; } = new BindableList<Color4>();
+        public BindableList<Colour4> Colours { get; } = new BindableList<Colour4>();
 
         private string colourNamePrefix = "Colour";
 
@@ -73,14 +73,17 @@ namespace osu.Game.Graphics.UserInterfaceV2
         {
             base.LoadComplete();
 
-            Colours.BindCollectionChanged((_, __) => updatePalette(), true);
+            Colours.BindCollectionChanged((_, args) => updatePalette(args), true);
             FinishTransforms(true);
         }
 
         private const int fade_duration = 200;
 
-        private void updatePalette()
+        private void updatePalette(NotifyCollectionChangedEventArgs args)
         {
+            if (args.Action == NotifyCollectionChangedAction.Replace)
+                return;
+
             palette.Clear();
 
             if (Colours.Any())
@@ -94,12 +97,18 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 placeholder.FadeIn(fade_duration, Easing.OutQuint);
             }
 
-            foreach (var item in Colours)
+            for (int i = 0; i < Colours.Count; ++i)
             {
-                palette.Add(new ColourDisplay
+                // copy to avoid accesses to modified closure.
+                int colourIndex = i;
+                ColourDisplay display;
+
+                palette.Add(display = new ColourDisplay
                 {
-                    Current = { Value = item }
+                    Current = { Value = Colours[colourIndex] }
                 });
+
+                display.Current.BindValueChanged(colour => Colours[colourIndex] = colour.NewValue);
             }
 
             reindexItems();

osu.Game/Graphics/UserInterfaceV2/LabelledColourPalette.cs

@@ -2,7 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Bindables;
-using osuTK.Graphics;
+using osu.Framework.Graphics;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
@@ -13,7 +13,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
         {
         }
 
-        public BindableList<Color4> Colours => Component.Colours;
+        public BindableList<Colour4> Colours => Component.Colours;
 
         public string ColourNamePrefix
         {

osu.Game/Screens/Edit/Setup/ColoursSection.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System.Collections.Generic;
+using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Localisation;
@@ -32,7 +33,7 @@ namespace osu.Game.Screens.Edit.Setup
 
             var colours = Beatmap.BeatmapSkin?.GetConfig<GlobalSkinColours, IReadOnlyList<Color4>>(GlobalSkinColours.ComboColours)?.Value;
             if (colours != null)
-                comboColours.Colours.AddRange(colours);
+                comboColours.Colours.AddRange(colours.Select(c => (Colour4)c));
         }
     }
 }