Merge pull request #20739 from peppy/settings-toolbox

Adjust visuals of settings toolboxes (gameplay loading screen and editor)

osu.Game.Rulesets.Osu.Tests/Editor/TestSceneOsuDistanceSnapGrid.cs

@@ -12,6 +12,7 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input;
 using osu.Framework.Utils;
 using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit;
 using osu.Game.Rulesets.Osu.Beatmaps;
 using osu.Game.Rulesets.Osu.Edit;
@@ -33,6 +34,9 @@ namespace osu.Game.Rulesets.Osu.Tests.Editor
         [Cached(typeof(IBeatSnapProvider))]
         private readonly EditorBeatmap editorBeatmap;
 
+        [Cached]
+        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
         [Cached]
         private readonly EditorClock editorClock;
 

osu.Game.Tests/Visual/Editing/TestSceneEditorComposeRadioButtons.cs

@@ -4,8 +4,10 @@
 #nullable disable
 
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
+using osu.Game.Overlays;
 using osu.Game.Screens.Edit.Components.RadioButtons;
 
 namespace osu.Game.Tests.Visual.Editing
@@ -13,6 +15,9 @@ namespace osu.Game.Tests.Visual.Editing
     [TestFixture]
     public class TestSceneEditorComposeRadioButtons : OsuTestScene
     {
+        [Cached]
+        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
         public TestSceneEditorComposeRadioButtons()
         {
             EditorRadioButtonCollection collection;

osu.Game.Tests/Visual/Editing/TestSceneHitObjectComposer.cs

@@ -148,10 +148,6 @@ namespace osu.Game.Tests.Visual.Editing
             });
 
             AddAssert("no circles placed", () => editorBeatmap.HitObjects.Count == 0);
-
-            AddStep("place circle", () => InputManager.Click(MouseButton.Left));
-
-            AddAssert("circle placed", () => editorBeatmap.HitObjects.Count == 1);
         }
 
         [Test]

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

@@ -5,12 +5,14 @@
 
 using System.Linq;
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Testing;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Overlays;
 using osu.Game.Overlays.Settings;
+using osuTK;
 using osuTK.Input;
 
 namespace osu.Game.Tests.Visual.UserInterface
@@ -20,11 +22,17 @@ namespace osu.Game.Tests.Visual.UserInterface
     {
         private SettingsToolboxGroup group;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
         [SetUp]
         public void SetUp() => Schedule(() =>
         {
             Child = group = new SettingsToolboxGroup("example")
             {
+                Scale = new Vector2(3),
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
                 Children = new Drawable[]
                 {
                     new RoundedButton

osu.Game/Overlays/SettingsToolboxGroup.cs

@@ -1,8 +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.
 
-#nullable disable
+using osu.Framework.Allocation;
-
 using osu.Framework.Bindables;
 using osu.Framework.Caching;
 using osu.Framework.Extensions.EnumExtensions;
@@ -23,25 +22,40 @@ namespace osu.Game.Overlays
 {
     public class SettingsToolboxGroup : Container, IExpandable
     {
+        private readonly string title;
         public const int CONTAINER_WIDTH = 270;
 
         private const float transition_duration = 250;
-        private const int border_thickness = 2;
         private const int header_height = 30;
         private const int corner_radius = 5;
 
-        private const float fade_duration = 800;
-        private const float inactive_alpha = 0.5f;
-
         private readonly Cached headerTextVisibilityCache = new Cached();
 
-        private readonly FillFlowContainer content;
+        protected override Container<Drawable> Content => content;
+
+        private readonly FillFlowContainer content = new FillFlowContainer
+        {
+            Name = @"Content",
+            Origin = Anchor.TopCentre,
+            Anchor = Anchor.TopCentre,
+            Direction = FillDirection.Vertical,
+            RelativeSizeAxes = Axes.X,
+            AutoSizeDuration = transition_duration,
+            AutoSizeEasing = Easing.OutQuint,
+            AutoSizeAxes = Axes.Y,
+            Padding = new MarginPadding { Horizontal = 10, Top = 5, Bottom = 10 },
+            Spacing = new Vector2(0, 15),
+        };
 
         public BindableBool Expanded { get; } = new BindableBool(true);
 
-        private readonly OsuSpriteText headerText;
+        private OsuSpriteText headerText = null!;
 
-        private readonly Container headerContent;
+        private Container headerContent = null!;
+
+        private Box background = null!;
+
+        private IconButton expandButton = null!;
 
         /// <summary>
         /// Create a new instance.
@@ -49,20 +63,25 @@ namespace osu.Game.Overlays
         /// <param name="title">The title to be displayed in the header of this group.</param>
         public SettingsToolboxGroup(string title)
         {
+            this.title = title;
+
             AutoSizeAxes = Axes.Y;
             Width = CONTAINER_WIDTH;
             Masking = true;
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(OverlayColourProvider? colourProvider)
+        {
             CornerRadius = corner_radius;
-            BorderColour = Color4.Black;
-            BorderThickness = border_thickness;
 
             InternalChildren = new Drawable[]
             {
-                new Box
+                background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = Color4.Black,
+                    Alpha = 0.1f,
-                    Alpha = 0.5f,
+                    Colour = colourProvider?.Background4 ?? Color4.Black,
                 },
                 new FillFlowContainer
                 {
@@ -88,7 +107,7 @@ namespace osu.Game.Overlays
                                     Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 17),
                                     Padding = new MarginPadding { Left = 10, Right = 30 },
                                 },
-                                new IconButton
+                                expandButton = new IconButton
                                 {
                                     Origin = Anchor.Centre,
                                     Anchor = Anchor.CentreRight,
@@ -99,19 +118,7 @@ namespace osu.Game.Overlays
                                 },
                             }
                         },
-                        content = new FillFlowContainer
+                        content
-                        {
-                            Name = @"Content",
-                            Origin = Anchor.TopCentre,
-                            Anchor = Anchor.TopCentre,
-                            Direction = FillDirection.Vertical,
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeDuration = transition_duration,
-                            AutoSizeEasing = Easing.OutQuint,
-                            AutoSizeAxes = Axes.Y,
-                            Padding = new MarginPadding(15),
-                            Spacing = new Vector2(0, 15),
-                        }
                     }
                 },
             };
@@ -175,9 +182,10 @@ namespace osu.Game.Overlays
 
         private void updateFadeState()
         {
-            this.FadeTo(IsHovered ? 1 : inactive_alpha, fade_duration, Easing.OutQuint);
+            const float fade_duration = 500;
-        }
 
-        protected override Container<Drawable> Content => content;
+            background.FadeTo(IsHovered ? 1 : 0.1f, fade_duration, Easing.OutQuint);
+            expandButton.FadeTo(IsHovered ? 1 : 0, fade_duration, Easing.OutQuint);
+        }
     }
 }

osu.Game/Rulesets/Edit/DistancedHitObjectComposer.cs

@@ -8,6 +8,8 @@ using osu.Framework.Bindables;
 using osu.Framework.Extensions;
 using osu.Framework.Extensions.LocalisationExtensions;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Bindings;
 using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
@@ -52,14 +54,24 @@ namespace osu.Game.Rulesets.Edit
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
-            AddInternal(RightSideToolboxContainer = new ExpandingToolboxContainer(130, 250)
+            AddInternal(new Container
             {
-                Padding = new MarginPadding(10),
-                Alpha = DistanceSpacingMultiplier.Disabled ? 0 : 1,
                 Anchor = Anchor.TopRight,
                 Origin = Anchor.TopRight,
+                RelativeSizeAxes = Axes.Y,
+                AutoSizeAxes = Axes.X,
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        Colour = colourProvider.Background5,
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    RightSideToolboxContainer = new ExpandingToolboxContainer(130, 250)
+                    {
+                        Alpha = DistanceSpacingMultiplier.Disabled ? 0 : 1,
                         Child = new EditorToolboxGroup("snapping")
                         {
                             Child = distanceSpacingSlider = new ExpandableSlider<double, SizeSlider<double>>
@@ -68,6 +80,8 @@ namespace osu.Game.Rulesets.Edit
                                 KeyboardStep = adjust_step,
                             }
                         }
+                    }
+                }
             });
         }
 

osu.Game/Rulesets/Edit/HitObjectComposer.cs

@@ -12,10 +12,12 @@ using osu.Framework.Bindables;
 using osu.Framework.Extensions.EnumExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input;
 using osu.Framework.Input.Events;
 using osu.Framework.Logging;
 using osu.Game.Beatmaps;
+using osu.Game.Overlays;
 using osu.Game.Rulesets.Configuration;
 using osu.Game.Rulesets.Edit.Tools;
 using osu.Game.Rulesets.Mods;
@@ -80,7 +82,7 @@ namespace osu.Game.Rulesets.Edit
             dependencies = new DependencyContainer(base.CreateChildDependencies(parent));
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
             Config = Dependencies.Get<IRulesetConfigCache>().GetConfigFor(Ruleset);
 
@@ -116,9 +118,19 @@ namespace osu.Game.Rulesets.Edit
                                               .WithChild(BlueprintContainer = CreateBlueprintContainer())
                     }
                 },
-                new ExpandingToolboxContainer(90, 200)
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Y,
+                    AutoSizeAxes = Axes.X,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            Colour = colourProvider.Background5,
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        new ExpandingToolboxContainer(60, 200)
                         {
-                    Padding = new MarginPadding(10),
                             Children = new Drawable[]
                             {
                                 new EditorToolboxGroup("toolbox (1-9)")
@@ -137,6 +149,8 @@ namespace osu.Game.Rulesets.Edit
                                 }
                             }
                         },
+                    }
+                },
             };
 
             toolboxCollection.Items = CompositionTools

osu.Game/Screens/Edit/Components/RadioButtons/EditorRadioButton.cs

@@ -8,13 +8,12 @@ using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Cursor;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Localisation;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osuTK;
 using osuTK.Graphics;
 
@@ -30,9 +29,9 @@ namespace osu.Game.Screens.Edit.Components.RadioButtons
         public readonly RadioButton Button;
 
         private Color4 defaultBackgroundColour;
-        private Color4 defaultBubbleColour;
+        private Color4 defaultIconColour;
         private Color4 selectedBackgroundColour;
-        private Color4 selectedBubbleColour;
+        private Color4 selectedIconColour;
 
         private Drawable icon;
 
@@ -50,20 +49,13 @@ namespace osu.Game.Screens.Edit.Components.RadioButtons
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
-            defaultBackgroundColour = colours.Gray3;
+            defaultBackgroundColour = colourProvider.Background3;
-            defaultBubbleColour = defaultBackgroundColour.Darken(0.5f);
+            selectedBackgroundColour = colourProvider.Background1;
-            selectedBackgroundColour = colours.BlueDark;
-            selectedBubbleColour = selectedBackgroundColour.Lighten(0.5f);
 
-            Content.EdgeEffect = new EdgeEffectParameters
+            defaultIconColour = defaultBackgroundColour.Darken(0.5f);
-            {
+            selectedIconColour = selectedBackgroundColour.Lighten(0.5f);
-                Type = EdgeEffectType.Shadow,
-                Radius = 2,
-                Offset = new Vector2(0, 1),
-                Colour = Color4.Black.Opacity(0.5f)
-            };
 
             Add(icon = (Button.CreateIcon?.Invoke() ?? new Circle()).With(b =>
             {
@@ -98,7 +90,7 @@ namespace osu.Game.Screens.Edit.Components.RadioButtons
                 return;
 
             BackgroundColour = Button.Selected.Value ? selectedBackgroundColour : defaultBackgroundColour;
-            icon.Colour = Button.Selected.Value ? selectedBubbleColour : defaultBubbleColour;
+            icon.Colour = Button.Selected.Value ? selectedIconColour : defaultIconColour;
         }
 
         protected override SpriteText CreateText() => new OsuSpriteText

osu.Game/Screens/Edit/Components/TernaryButtons/DrawableTernaryButton.cs

@@ -6,12 +6,11 @@
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osuTK;
 using osuTK.Graphics;
 
@@ -20,9 +19,9 @@ namespace osu.Game.Screens.Edit.Components.TernaryButtons
     internal class DrawableTernaryButton : OsuButton
     {
         private Color4 defaultBackgroundColour;
-        private Color4 defaultBubbleColour;
+        private Color4 defaultIconColour;
         private Color4 selectedBackgroundColour;
-        private Color4 selectedBubbleColour;
+        private Color4 selectedIconColour;
 
         private Drawable icon;
 
@@ -38,20 +37,13 @@ namespace osu.Game.Screens.Edit.Components.TernaryButtons
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
-            defaultBackgroundColour = colours.Gray3;
+            defaultBackgroundColour = colourProvider.Background3;
-            defaultBubbleColour = defaultBackgroundColour.Darken(0.5f);
+            selectedBackgroundColour = colourProvider.Background1;
-            selectedBackgroundColour = colours.BlueDark;
-            selectedBubbleColour = selectedBackgroundColour.Lighten(0.5f);
 
-            Content.EdgeEffect = new EdgeEffectParameters
+            defaultIconColour = defaultBackgroundColour.Darken(0.5f);
-            {
+            selectedIconColour = selectedBackgroundColour.Lighten(0.5f);
-                Type = EdgeEffectType.Shadow,
-                Radius = 2,
-                Offset = new Vector2(0, 1),
-                Colour = Color4.Black.Opacity(0.5f)
-            };
 
             Add(icon = (Button.CreateIcon?.Invoke() ?? new Circle()).With(b =>
             {
@@ -85,17 +77,17 @@ namespace osu.Game.Screens.Edit.Components.TernaryButtons
             switch (Button.Bindable.Value)
             {
                 case TernaryState.Indeterminate:
-                    icon.Colour = selectedBubbleColour.Darken(0.5f);
+                    icon.Colour = selectedIconColour.Darken(0.5f);
                     BackgroundColour = selectedBackgroundColour.Darken(0.5f);
                     break;
 
                 case TernaryState.False:
-                    icon.Colour = defaultBubbleColour;
+                    icon.Colour = defaultIconColour;
                     BackgroundColour = defaultBackgroundColour;
                     break;
 
                 case TernaryState.True:
-                    icon.Colour = selectedBubbleColour;
+                    icon.Colour = selectedIconColour;
                     BackgroundColour = selectedBackgroundColour;
                     break;
             }

osu.Game/Screens/Play/PlayerLoader.cs

@@ -71,6 +71,9 @@ namespace osu.Game.Screens.Play
         private AudioFilter lowPassFilter = null!;
         private AudioFilter highPassFilter = null!;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
         protected bool BackgroundBrightnessReduction
         {
             set