Add support for adding new colours to palette

osu.Game/Graphics/UserInterfaceV2/ColourPalette.cs

@@ -1,12 +1,17 @@
 // 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;
+using System.Collections.Generic;
 using System.Collections.Specialized;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osuTK;
 
@@ -36,36 +41,24 @@ namespace osu.Game.Graphics.UserInterfaceV2
             }
         }
 
-        private FillFlowContainer<ColourDisplay> palette;
+        private FillFlowContainer palette;
-        private Container placeholder;
+
+        private IEnumerable<ColourDisplay> colourDisplays => palette.OfType<ColourDisplay>();
 
         [BackgroundDependencyLoader]
         private void load()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
+            AutoSizeDuration = fade_duration;
+            AutoSizeEasing = Easing.OutQuint;
 
-            InternalChildren = new Drawable[]
+            InternalChild = palette = new FillFlowContainer
-            {
-                palette = new FillFlowContainer<ColourDisplay>
             {
                 RelativeSizeAxes = Axes.X,
                 AutoSizeAxes = Axes.Y,
                 Spacing = new Vector2(10),
                 Direction = FillDirection.Full
-                },
-                placeholder = new Container
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Child = new OsuSpriteText
-                    {
-                        Anchor = Anchor.CentreRight,
-                        Origin = Anchor.CentreRight,
-                        Text = "(none)",
-                        Font = OsuFont.Default.With(weight: FontWeight.Bold)
-                    }
-                }
             };
         }
 
@@ -73,30 +66,20 @@ namespace osu.Game.Graphics.UserInterfaceV2
         {
             base.LoadComplete();
 
-            Colours.BindCollectionChanged((_, args) => updatePalette(args), true);
+            Colours.BindCollectionChanged((_, args) =>
+            {
+                if (args.Action != NotifyCollectionChangedAction.Replace)
+                    updatePalette();
+            }, true);
             FinishTransforms(true);
         }
 
         private const int fade_duration = 200;
 
-        private void updatePalette(NotifyCollectionChangedEventArgs args)
+        private void updatePalette()
         {
-            if (args.Action == NotifyCollectionChangedAction.Replace)
-                return;
-
             palette.Clear();
 
-            if (Colours.Any())
-            {
-                palette.FadeIn(fade_duration, Easing.OutQuint);
-                placeholder.FadeOut(fade_duration, Easing.OutQuint);
-            }
-            else
-            {
-                palette.FadeOut(fade_duration, Easing.OutQuint);
-                placeholder.FadeIn(fade_duration, Easing.OutQuint);
-            }
-
             for (int i = 0; i < Colours.Count; ++i)
             {
                 // copy to avoid accesses to modified closure.
@@ -111,6 +94,11 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 display.Current.BindValueChanged(colour => Colours[colourIndex] = colour.NewValue);
             }
 
+            palette.Add(new AddColourButton
+            {
+                Action = () => Colours.Add(Colour4.White)
+            });
+
             reindexItems();
         }
 
@@ -118,11 +106,74 @@ namespace osu.Game.Graphics.UserInterfaceV2
         {
             int index = 1;
 
-            foreach (var colour in palette)
+            foreach (var colourDisplay in colourDisplays)
             {
-                colour.ColourName = $"{colourNamePrefix} {index}";
+                colourDisplay.ColourName = $"{colourNamePrefix} {index}";
                 index += 1;
             }
         }
+
+        private class AddColourButton : CompositeDrawable
+        {
+            public Action Action
+            {
+                set => circularButton.Action = value;
+            }
+
+            private readonly OsuClickableContainer circularButton;
+
+            public AddColourButton()
+            {
+                AutoSizeAxes = Axes.Y;
+                Width = 100;
+
+                InternalChild = new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0, 10),
+                    Children = new Drawable[]
+                    {
+                        circularButton = new OsuClickableContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = 100,
+                            CornerRadius = 50,
+                            Masking = true,
+                            BorderThickness = 5,
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Colour = Colour4.Transparent,
+                                    AlwaysPresent = true
+                                },
+                                new SpriteIcon
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    Size = new Vector2(20),
+                                    Icon = FontAwesome.Solid.Plus
+                                }
+                            }
+                        },
+                        new OsuSpriteText
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Text = "New"
+                        }
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                circularButton.BorderColour = colours.BlueDarker;
+            }
+        }
     }
 }