Merge pull request #29936 from u4vh3/skinning-colour-customisation

Add colour customisation to layout editor

osu.Game.Tests/Visual/Settings/TestSceneSettingsSource.cs

@@ -5,6 +5,7 @@ using NUnit.Framework;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
 using osu.Framework.Localisation;
 using osu.Game.Configuration;
 using osu.Game.Overlays.Settings;
@@ -19,7 +20,10 @@ namespace osu.Game.Tests.Visual.Settings
         {
             Children = new Drawable[]
             {
-                new FillFlowContainer
+                new PopoverContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = new FillFlowContainer
                     {
                         RelativeSizeAxes = Axes.Both,
                         Direction = FillDirection.Vertical,
@@ -30,6 +34,7 @@ namespace osu.Game.Tests.Visual.Settings
                         Padding = new MarginPadding(50),
                         ChildrenEnumerable = new TestTargetClass().CreateSettingsControls()
                     },
+                },
             };
         }
 
@@ -66,6 +71,13 @@ namespace osu.Game.Tests.Visual.Settings
 
             [SettingSource("Sample number textbox", "Textbox number entry", SettingControlType = typeof(SettingsNumberBox))]
             public Bindable<int?> IntTextBoxBindable { get; } = new Bindable<int?>();
+
+            [SettingSource("Sample colour", "Change the colour", SettingControlType = typeof(SettingsColour))]
+            public BindableColour4 ColourBindable { get; } = new BindableColour4
+            {
+                Default = Colour4.White,
+                Value = Colour4.Red
+            };
         }
 
         private enum TestEnum

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

@@ -0,0 +1,75 @@
+// 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.Linq;
+using NUnit.Framework;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Testing;
+using osu.Framework.Utils;
+using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Overlays.Settings;
+using osuTK.Graphics;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public partial class TestSceneSettingsColour : OsuManualInputManagerTestScene
+    {
+        private SettingsColour? component;
+
+        [Test]
+        public void TestColour()
+        {
+            createContent();
+
+            AddRepeatStep("set random colour", () => component!.Current.Value = randomColour(), 4);
+        }
+
+        [Test]
+        public void TestUserInteractions()
+        {
+            createContent();
+
+            AddStep("click colour", () =>
+            {
+                InputManager.MoveMouseTo(component!);
+                InputManager.Click(MouseButton.Left);
+            });
+
+            AddAssert("colour picker spawned", () => this.ChildrenOfType<OsuColourPicker>().Any());
+        }
+
+        private void createContent()
+        {
+            AddStep("create component", () =>
+            {
+                Child = new PopoverContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = new FillFlowContainer
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Width = 500,
+                        AutoSizeAxes = Axes.Y,
+                        Children = new Drawable[]
+                        {
+                            component = new SettingsColour
+                            {
+                                LabelText = "a sample component",
+                            },
+                        },
+                    },
+                };
+            });
+        }
+
+        private Colour4 randomColour() => new Color4(
+            RNG.NextSingle(),
+            RNG.NextSingle(),
+            RNG.NextSingle(),
+            1);
+    }
+}

osu.Game/Configuration/SettingSourceAttribute.cs

@@ -186,6 +186,16 @@ namespace osu.Game.Configuration
 
                         break;
 
+                    case BindableColour4 bColour:
+                        yield return new SettingsColour
+                        {
+                            LabelText = attr.Label,
+                            TooltipText = attr.Description,
+                            Current = bColour
+                        };
+
+                        break;
+
                     case IBindable bindable:
                         var dropdownType = typeof(ModSettingsEnumDropdown<>).MakeGenericType(bindable.GetType().GetGenericArguments()[0]);
                         var dropdown = (Drawable)Activator.CreateInstance(dropdownType)!;
@@ -227,6 +237,9 @@ namespace osu.Game.Configuration
                 case Bindable<bool> b:
                     return b.Value;
 
+                case BindableColour4 c:
+                    return c.Value.ToHex();
+
                 case IBindable u:
                     return BindableValueAccessor.GetValue(u);
 

osu.Game/Localisation/SkinComponents/SkinnableComponentStrings.cs

@@ -59,6 +59,26 @@ namespace osu.Game.Localisation.SkinComponents
         /// </summary>
         public static LocalisableString ShowLabelDescription => new TranslatableString(getKey(@"show_label_description"), @"Whether the component's label should be shown.");
 
+        /// <summary>
+        /// "Colour"
+        /// </summary>
+        public static LocalisableString Colour => new TranslatableString(getKey(@"colour"), @"Colour");
+
+        /// <summary>
+        /// "The colour of the component."
+        /// </summary>
+        public static LocalisableString ColourDescription => new TranslatableString(getKey(@"colour_description"), @"The colour of the component.");
+
+        /// <summary>
+        /// "Text colour"
+        /// </summary>
+        public static LocalisableString TextColour => new TranslatableString(getKey(@"text_colour"), @"Text colour");
+
+        /// <summary>
+        /// "The colour of the text."
+        /// </summary>
+        public static LocalisableString TextColourDescription => new TranslatableString(getKey(@"text_colour_description"), @"The colour of the text.");
+
         private static string getKey(string key) => $@"{prefix}:{key}";
     }
 }

osu.Game/Overlays/Settings/SettingsColour.cs

@@ -0,0 +1,80 @@
+// 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 osu.Framework.Bindables;
+using osu.Framework.Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterfaceV2;
+
+namespace osu.Game.Overlays.Settings
+{
+    public partial class SettingsColour : SettingsItem<Colour4>
+    {
+        protected override Drawable CreateControl() => new ColourControl();
+
+        public partial class ColourControl : OsuClickableContainer, IHasPopover, IHasCurrentValue<Colour4>
+        {
+            private readonly BindableWithCurrent<Colour4> current = new BindableWithCurrent<Colour4>(Colour4.White);
+
+            public Bindable<Colour4> Current
+            {
+                get => current.Current;
+                set => current.Current = value;
+            }
+
+            private readonly Box fill;
+            private readonly OsuSpriteText colourHexCode;
+
+            public ColourControl()
+            {
+                RelativeSizeAxes = Axes.X;
+                Height = 40;
+                CornerRadius = 20;
+                Masking = true;
+                Action = this.ShowPopover;
+
+                Children = new Drawable[]
+                {
+                    fill = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    colourHexCode = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Font = OsuFont.Default.With(size: 20)
+                    }
+                };
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                Current.BindValueChanged(_ => updateColour(), true);
+            }
+
+            private void updateColour()
+            {
+                fill.Colour = Current.Value;
+                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/Overlays/SkinEditor/SkinEditor.cs

@@ -33,6 +33,7 @@ using osu.Game.Screens.Edit;
 using osu.Game.Screens.Edit.Components;
 using osu.Game.Screens.Edit.Components.Menus;
 using osu.Game.Skinning;
+using osu.Framework.Graphics.Cursor;
 
 namespace osu.Game.Overlays.SkinEditor
 {
@@ -116,6 +117,9 @@ namespace osu.Game.Overlays.SkinEditor
             RelativeSizeAxes = Axes.Both;
 
             InternalChild = new OsuContextMenuContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Child = new PopoverContainer
                 {
                     RelativeSizeAxes = Axes.Both,
                     Child = new GridContainer
@@ -221,6 +225,7 @@ namespace osu.Game.Overlays.SkinEditor
                             },
                         }
                     }
+                }
             };
 
             clipboardContent = clipboard.Content.GetBoundCopy();

osu.Game/Screens/Play/HUD/ArgonSongProgress.cs

@@ -9,6 +9,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Game.Configuration;
 using osu.Game.Graphics;
 using osu.Game.Localisation.HUD;
+using osu.Game.Localisation.SkinComponents;
 using osu.Game.Rulesets.Objects;
 
 namespace osu.Game.Screens.Play.HUD
@@ -29,6 +30,9 @@ namespace osu.Game.Screens.Play.HUD
         [SettingSource(typeof(SongProgressStrings), nameof(SongProgressStrings.ShowTime), nameof(SongProgressStrings.ShowTimeDescription))]
         public Bindable<bool> ShowTime { get; } = new BindableBool(true);
 
+        [SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
+        public BindableColour4 AccentColour { get; } = new BindableColour4(Colour4.White);
+
         [Resolved]
         private Player? player { get; set; }
 
@@ -94,6 +98,7 @@ namespace osu.Game.Screens.Play.HUD
             Interactive.BindValueChanged(_ => bar.Interactive = Interactive.Value, true);
             ShowGraph.BindValueChanged(_ => updateGraphVisibility(), true);
             ShowTime.BindValueChanged(_ => info.FadeTo(ShowTime.Value ? 1 : 0, 200, Easing.In), true);
+            AccentColour.BindValueChanged(_ => Colour = AccentColour.Value, true);
         }
 
         protected override void UpdateObjects(IEnumerable<HitObject> objects)

osu.Game/Screens/Play/HUD/ArgonWedgePiece.cs

@@ -9,6 +9,7 @@ using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Configuration;
+using osu.Game.Localisation.SkinComponents;
 using osu.Game.Skinning;
 using osuTK;
 
@@ -21,6 +22,9 @@ namespace osu.Game.Screens.Play.HUD
         [SettingSource("Inverted shear")]
         public BindableBool InvertShear { get; } = new BindableBool();
 
+        [SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
+        public BindableColour4 AccentColour { get; } = new BindableColour4(Color4Extensions.FromHex("#66CCFF"));
+
         public ArgonWedgePiece()
         {
             CornerRadius = 10f;
@@ -37,7 +41,6 @@ namespace osu.Game.Screens.Play.HUD
             InternalChild = new Box
             {
                 RelativeSizeAxes = Axes.Both,
-                Colour = ColourInfo.GradientVertical(Color4Extensions.FromHex("#66CCFF").Opacity(0.0f), Color4Extensions.FromHex("#66CCFF").Opacity(0.25f)),
             };
         }
 
@@ -46,6 +49,7 @@ namespace osu.Game.Screens.Play.HUD
             base.LoadComplete();
 
             InvertShear.BindValueChanged(v => Shear = new Vector2(0.8f, 0f) * (v.NewValue ? -1 : 1), true);
+            AccentColour.BindValueChanged(c => InternalChild.Colour = ColourInfo.GradientVertical(AccentColour.Value.Opacity(0.0f), AccentColour.Value.Opacity(0.25f)), true);
         }
     }
 }

osu.Game/Screens/Play/HUD/DefaultSongProgress.cs

@@ -10,6 +10,7 @@ using osu.Framework.Utils;
 using osu.Game.Configuration;
 using osu.Game.Graphics;
 using osu.Game.Localisation.HUD;
+using osu.Game.Localisation.SkinComponents;
 using osu.Game.Rulesets.Objects;
 using osuTK;
 
@@ -36,6 +37,9 @@ namespace osu.Game.Screens.Play.HUD
         [SettingSource(typeof(SongProgressStrings), nameof(SongProgressStrings.ShowTime), nameof(SongProgressStrings.ShowTimeDescription))]
         public Bindable<bool> ShowTime { get; } = new BindableBool(true);
 
+        [SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
+        public BindableColour4 AccentColour { get; } = new BindableColour4(Colour4.White);
+
         [Resolved]
         private Player? player { get; set; }
 
@@ -86,6 +90,7 @@ namespace osu.Game.Screens.Play.HUD
             Interactive.BindValueChanged(_ => updateBarVisibility(), true);
             ShowGraph.BindValueChanged(_ => updateGraphVisibility(), true);
             ShowTime.BindValueChanged(_ => updateTimeVisibility(), true);
+            AccentColour.BindValueChanged(_ => Colour = AccentColour.Value, true);
 
             base.LoadComplete();
         }

osu.Game/Skinning/Components/BeatmapAttributeText.cs

@@ -123,6 +123,8 @@ namespace osu.Game.Skinning.Components
         }
 
         protected override void SetFont(FontUsage font) => text.Font = font.With(size: 40);
+
+        protected override void SetTextColour(Colour4 textColour) => text.Colour = textColour;
     }
 
     // WARNING: DO NOT ADD ANY VALUES TO THIS ENUM ANYWHERE ELSE THAN AT THE END.

osu.Game/Skinning/Components/BoxElement.cs

@@ -27,6 +27,9 @@ namespace osu.Game.Skinning.Components
             Precision = 0.01f
         };
 
+        [SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
+        public BindableColour4 AccentColour { get; } = new BindableColour4(Colour4.White);
+
         public BoxElement()
         {
             Size = new Vector2(400, 80);
@@ -43,6 +46,13 @@ namespace osu.Game.Skinning.Components
             Masking = true;
         }
 
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            AccentColour.BindValueChanged(_ => Colour = AccentColour.Value, true);
+        }
+
         protected override void Update()
         {
             base.Update();

osu.Game/Skinning/Components/PlayerName.cs

@@ -53,5 +53,7 @@ namespace osu.Game.Skinning.Components
         }
 
         protected override void SetFont(FontUsage font) => text.Font = font.With(size: 40);
+
+        protected override void SetTextColour(Colour4 textColour) => text.Colour = textColour;
     }
 }

osu.Game/Skinning/Components/TextElement.cs

@@ -36,5 +36,7 @@ namespace osu.Game.Skinning.Components
         }
 
         protected override void SetFont(FontUsage font) => text.Font = font.With(size: 40);
+
+        protected override void SetTextColour(Colour4 textColour) => text.Colour = textColour;
     }
 }

osu.Game/Skinning/FontAdjustableSkinComponent.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Bindables;
+using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Configuration;
@@ -20,11 +21,16 @@ namespace osu.Game.Skinning
         [SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Font), nameof(SkinnableComponentStrings.FontDescription))]
         public Bindable<Typeface> Font { get; } = new Bindable<Typeface>(Typeface.Torus);
 
+        [SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.TextColour), nameof(SkinnableComponentStrings.TextColourDescription))]
+        public BindableColour4 TextColour { get; } = new BindableColour4(Colour4.White);
+
         /// <summary>
         /// Implement to apply the user font selection to one or more components.
         /// </summary>
         protected abstract void SetFont(FontUsage font);
 
+        protected abstract void SetTextColour(Colour4 textColour);
+
         protected override void LoadComplete()
         {
             base.LoadComplete();
@@ -37,6 +43,8 @@ namespace osu.Game.Skinning
                 FontUsage f = OsuFont.GetFont(e.NewValue, weight: fontWeight);
                 SetFont(f);
             }, true);
+
+            TextColour.BindValueChanged(e => SetTextColour(e.NewValue), true);
         }
     }
 }