Merge pull request #15070 from bdach/dropdown-refresh

Refresh dropdown appearance & add themed variant to settings sidebar

osu.Game.Tests/Visual/SongSelect/TestSceneFilterControl.cs

@@ -205,7 +205,7 @@ namespace osu.Game.Tests.Visual.SongSelect
         private void assertCollectionDropdownContains(string collectionName, bool shouldContain = true) =>
             AddAssert($"collection dropdown {(shouldContain ? "contains" : "does not contain")} '{collectionName}'",
                 // A bit of a roundabout way of going about this, see: https://github.com/ppy/osu-framework/issues/3871 + https://github.com/ppy/osu-framework/issues/3872
-                () => shouldContain == (getCollectionDropdownItems().Any(i => i.ChildrenOfType<FillFlowContainer>().OfType<IHasText>().First().Text == collectionName)));
+                () => shouldContain == (getCollectionDropdownItems().Any(i => i.ChildrenOfType<CompositeDrawable>().OfType<IHasText>().First().Text == collectionName)));
 
         private IconButton getAddOrRemoveButton(int index)
             => getCollectionDropdownItems().ElementAt(index).ChildrenOfType<IconButton>().Single();

osu.Game/Graphics/Containers/OsuScrollContainer.cs

@@ -1,11 +1,14 @@
 // 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 enable
+
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
+using osu.Game.Overlays;
 using osuTK;
 using osuTK.Graphics;
 using osuTK.Input;
@@ -141,12 +144,12 @@ namespace osu.Game.Graphics.Containers
                 Child = box = new Box { RelativeSizeAxes = Axes.Both };
             }
 
-            [BackgroundDependencyLoader]
+            [BackgroundDependencyLoader(true)]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider? colourProvider, OsuColour colours)
             {
                 Colour = defaultColour = colours.Gray8;
                 hoverColour = colours.GrayF;
-                highlightColour = colours.Green;
+                highlightColour = colourProvider?.Highlight1 ?? colours.Green;
             }
 
             public override void ResizeTo(float val, int duration = 0, Easing easing = Easing.None)

osu.Game/Graphics/UserInterface/OsuDropdown.cs

@@ -1,8 +1,9 @@
 // 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 enable
+
 using System.Linq;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
@@ -14,13 +15,15 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Localisation;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterface
 {
     public class OsuDropdown<T> : Dropdown<T>, IHasAccentColour
     {
-        private const float corner_radius = 4;
+        private const float corner_radius = 5;
 
         private Color4 accentColour;
 
@@ -34,11 +37,11 @@ namespace osu.Game.Graphics.UserInterface
             }
         }
 
-        [BackgroundDependencyLoader]
+        [BackgroundDependencyLoader(true)]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider? colourProvider, OsuColour colours)
         {
             if (accentColour == default)
-                accentColour = colours.PinkDarker;
+                accentColour = colourProvider?.Light4 ?? colours.PinkDarker;
             updateAccentColour();
         }
 
@@ -59,14 +62,13 @@ namespace osu.Game.Graphics.UserInterface
         {
             public override bool HandleNonPositionalInput => State == MenuState.Open;
 
-            private Sample sampleOpen;
+            private Sample? sampleOpen;
-            private Sample sampleClose;
+            private Sample? sampleClose;
 
             // todo: this uses the same styling as OsuMenu. hopefully we can just use OsuMenu in the future with some refactoring
             public OsuDropdownMenu()
             {
                 CornerRadius = corner_radius;
-                BackgroundColour = Color4.Black.Opacity(0.5f);
 
                 MaskingContainer.CornerRadius = corner_radius;
                 Alpha = 0;
@@ -75,9 +77,11 @@ namespace osu.Game.Graphics.UserInterface
                 ItemsContainer.Padding = new MarginPadding(5);
             }
 
-            [BackgroundDependencyLoader]
+            [BackgroundDependencyLoader(true)]
-            private void load(AudioManager audio)
+            private void load(OverlayColourProvider? colourProvider, AudioManager audio)
             {
+                BackgroundColour = colourProvider?.Background5 ?? Color4.Black.Opacity(0.5f);
+
                 sampleOpen = audio.Samples.Get(@"UI/dropdown-open");
                 sampleClose = audio.Samples.Get(@"UI/dropdown-close");
             }
@@ -159,6 +163,8 @@ namespace osu.Game.Graphics.UserInterface
                 {
                     BackgroundColourHover = accentColour ?? nonAccentHoverColour;
                     BackgroundColourSelected = accentColour ?? nonAccentSelectedColour;
+                    BackgroundColour = BackgroundColourHover.Opacity(0);
+
                     UpdateBackgroundColour();
                     UpdateForegroundColour();
                 }
@@ -178,8 +184,6 @@ namespace osu.Game.Graphics.UserInterface
                 [BackgroundDependencyLoader]
                 private void load(OsuColour colours)
                 {
-                    BackgroundColour = Color4.Transparent;
-
                     nonAccentHoverColour = colours.PinkDarker;
                     nonAccentSelectedColour = Color4.Black.Opacity(0.5f);
                     updateColours();
@@ -187,16 +191,29 @@ namespace osu.Game.Graphics.UserInterface
                     AddInternal(new HoverSounds());
                 }
 
+                protected override void UpdateBackgroundColour()
+                {
+                    if (!IsPreSelected && !IsSelected)
+                    {
+                        Background.FadeOut(600, Easing.OutQuint);
+                        return;
+                    }
+
+                    Background.FadeIn(100, Easing.OutQuint);
+                    Background.FadeColour(IsPreSelected ? BackgroundColourHover : BackgroundColourSelected, 100, Easing.OutQuint);
+                }
+
                 protected override void UpdateForegroundColour()
                 {
                     base.UpdateForegroundColour();
 
-                    if (Foreground.Children.FirstOrDefault() is Content content) content.Chevron.Alpha = IsHovered ? 1 : 0;
+                    if (Foreground.Children.FirstOrDefault() is Content content)
+                        content.Hovering = IsHovered;
                 }
 
                 protected override Drawable CreateContent() => new Content();
 
-                protected new class Content : FillFlowContainer, IHasText
+                protected new class Content : CompositeDrawable, IHasText
                 {
                     public LocalisableString Text
                     {
@@ -207,32 +224,64 @@ namespace osu.Game.Graphics.UserInterface
                     public readonly OsuSpriteText Label;
                     public readonly SpriteIcon Chevron;
 
+                    private const float chevron_offset = -3;
+
                     public Content()
                     {
                         RelativeSizeAxes = Axes.X;
                         AutoSizeAxes = Axes.Y;
-                        Direction = FillDirection.Horizontal;
 
-                        Children = new Drawable[]
+                        InternalChildren = new Drawable[]
                         {
                             Chevron = new SpriteIcon
                             {
-                                AlwaysPresent = true,
                                 Icon = FontAwesome.Solid.ChevronRight,
-                                Colour = Color4.Black,
-                                Alpha = 0.5f,
                                 Size = new Vector2(8),
+                                Alpha = 0,
+                                X = chevron_offset,
                                 Margin = new MarginPadding { Left = 3, Right = 3 },
                                 Origin = Anchor.CentreLeft,
                                 Anchor = Anchor.CentreLeft,
                             },
                             Label = new OsuSpriteText
                             {
+                                X = 15,
                                 Origin = Anchor.CentreLeft,
                                 Anchor = Anchor.CentreLeft,
                             },
                         };
                     }
+
+                    [BackgroundDependencyLoader(true)]
+                    private void load(OverlayColourProvider? colourProvider)
+                    {
+                        Chevron.Colour = colourProvider?.Background5 ?? Color4.Black;
+                    }
+
+                    private bool hovering;
+
+                    public bool Hovering
+                    {
+                        get => hovering;
+                        set
+                        {
+                            if (value == hovering)
+                                return;
+
+                            hovering = value;
+
+                            if (hovering)
+                            {
+                                Chevron.FadeIn(400, Easing.OutQuint);
+                                Chevron.MoveToX(0, 400, Easing.OutQuint);
+                            }
+                            else
+                            {
+                                Chevron.FadeOut(200);
+                                Chevron.MoveToX(chevron_offset, 200, Easing.In);
+                            }
+                        }
+                    }
                 }
             }
 
@@ -267,7 +316,7 @@ namespace osu.Game.Graphics.UserInterface
 
             public OsuDropdownHeader()
             {
-                Foreground.Padding = new MarginPadding(4);
+                Foreground.Padding = new MarginPadding(10);
 
                 AutoSizeAxes = Axes.None;
                 Margin = new MarginPadding { Bottom = 4 };
@@ -303,8 +352,7 @@ namespace osu.Game.Graphics.UserInterface
                                 Icon = FontAwesome.Solid.ChevronDown,
                                 Anchor = Anchor.CentreRight,
                                 Origin = Anchor.CentreRight,
-                                Margin = new MarginPadding { Horizontal = 5 },
+                                Size = new Vector2(16),
-                                Size = new Vector2(12),
                             },
                         }
                     }
@@ -313,11 +361,11 @@ namespace osu.Game.Graphics.UserInterface
                 AddInternal(new HoverClickSounds());
             }
 
-            [BackgroundDependencyLoader]
+            [BackgroundDependencyLoader(true)]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider? colourProvider, OsuColour colours)
             {
-                BackgroundColour = Color4.Black.Opacity(0.5f);
+                BackgroundColour = colourProvider?.Background5 ?? Color4.Black.Opacity(0.5f);
-                BackgroundColourHover = colours.PinkDarker;
+                BackgroundColourHover = colourProvider?.Light4 ?? colours.PinkDarker;
             }
         }
     }

osu.Game/Graphics/UserInterface/SlimEnumDropdown.cs

@@ -2,11 +2,8 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.UserInterface;
-using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterface
 {
@@ -15,30 +12,13 @@ namespace osu.Game.Graphics.UserInterface
     {
         protected override DropdownHeader CreateHeader() => new SlimDropdownHeader();
 
-        protected override DropdownMenu CreateMenu() => new SlimMenu();
-
         private class SlimDropdownHeader : OsuDropdownHeader
         {
             public SlimDropdownHeader()
             {
                 Height = 25;
-                Icon.Size = new Vector2(16);
                 Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 8, Right = 4 };
             }
-
-            protected override void LoadComplete()
-            {
-                base.LoadComplete();
-                BackgroundColour = Color4.Black.Opacity(0.25f);
-            }
-        }
-
-        private class SlimMenu : OsuDropdownMenu
-        {
-            public SlimMenu()
-            {
-                BackgroundColour = Color4.Black.Opacity(0.7f);
-            }
         }
     }
 }

osu.Game/Graphics/UserInterfaceV2/LabelledDrawable.cs

@@ -1,12 +1,15 @@
 // 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 enable
+
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.Containers;
+using osu.Game.Overlays;
 using osuTK;
 
 namespace osu.Game.Graphics.UserInterfaceV2
@@ -44,6 +47,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
         /// </summary>
         protected readonly T Component;
 
+        private readonly Box background;
         private readonly GridContainer grid;
         private readonly OsuTextFlowContainer labelText;
         private readonly OsuTextFlowContainer descriptionText;
@@ -62,10 +66,9 @@ namespace osu.Game.Graphics.UserInterfaceV2
 
             InternalChildren = new Drawable[]
             {
-                new Box
+                background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = Color4Extensions.FromHex("1c2125"),
                 },
                 new FillFlowContainer
                 {
@@ -146,9 +149,10 @@ namespace osu.Game.Graphics.UserInterfaceV2
             }
         }
 
-        [BackgroundDependencyLoader]
+        [BackgroundDependencyLoader(true)]
-        private void load(OsuColour osuColour)
+        private void load(OverlayColourProvider? colourProvider, OsuColour osuColour)
         {
+            background.Colour = colourProvider?.Background4 ?? Color4Extensions.FromHex(@"1c2125");
             descriptionText.Colour = osuColour.Yellow;
         }
 

osu.Game/Graphics/UserInterfaceV2/SwitchButton.cs

@@ -1,6 +1,8 @@
 // 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 enable
+
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
@@ -10,6 +12,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
+using osu.Game.Overlays;
 using osuTK;
 using osuTK.Graphics;
 
@@ -66,11 +69,11 @@ namespace osu.Game.Graphics.UserInterfaceV2
             };
         }
 
-        [BackgroundDependencyLoader]
+        [BackgroundDependencyLoader(true)]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider? colourProvider, OsuColour colours)
         {
-            enabledColour = colours.BlueDark;
+            enabledColour = colourProvider?.Highlight1 ?? colours.BlueDark;
-            disabledColour = colours.Gray3;
+            disabledColour = colourProvider?.Background3 ?? colours.Gray3;
 
             switchContainer.Colour = enabledColour;
             fill.Colour = disabledColour;

osu.Game/Overlays/Settings/SettingsDropdown.cs

@@ -6,6 +6,7 @@ using System.Linq;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Game.Graphics.UserInterface;
+using osuTK;
 
 namespace osu.Game.Overlays.Settings
 {
@@ -27,6 +28,11 @@ namespace osu.Game.Overlays.Settings
 
         public override IEnumerable<string> FilterTerms => base.FilterTerms.Concat(Control.Items.Select(i => i.ToString()));
 
+        public SettingsDropdown()
+        {
+            FlowContent.Spacing = new Vector2(0, 10);
+        }
+
         protected sealed override Drawable CreateControl() => CreateDropdown();
 
         protected virtual OsuDropdown<T> CreateDropdown() => new DropdownControl();
@@ -35,7 +41,6 @@ namespace osu.Game.Overlays.Settings
         {
             public DropdownControl()
             {
-                Margin = new MarginPadding { Top = 5 };
                 RelativeSizeAxes = Axes.X;
             }
 

osu.Game/Overlays/Settings/SettingsEnumDropdown.cs

@@ -16,7 +16,6 @@ namespace osu.Game.Overlays.Settings
         {
             public DropdownControl()
             {
-                Margin = new MarginPadding { Top = 5 };
                 RelativeSizeAxes = Axes.X;
             }
 

osu.Game/Screens/Edit/EditorRoundedScreen.cs

@@ -41,7 +41,7 @@ namespace osu.Game.Screens.Edit
                     {
                         new Box
                         {
-                            Colour = ColourProvider.Dark4,
+                            Colour = ColourProvider.Background3,
                             RelativeSizeAxes = Axes.Both,
                         },
                         roundedContent = new Container

osu.Game/Screens/OnlinePlay/Multiplayer/Match/MultiplayerMatchSettingsOverlay.cs

@@ -7,7 +7,6 @@ using JetBrains.Annotations;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Extensions.ExceptionExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -99,14 +98,14 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colourProvider, OsuColour colours)
             {
                 InternalChildren = new Drawable[]
                 {
                     new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Colour = Color4Extensions.FromHex(@"28242d"),
+                        Colour = colourProvider.Background4
                     },
                     new GridContainer
                     {
@@ -249,7 +248,7 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                                         new Box
                                         {
                                             RelativeSizeAxes = Axes.Both,
-                                            Colour = Color4Extensions.FromHex(@"28242d").Darken(0.5f).Opacity(1f),
+                                            Colour = colourProvider.Background5
                                         },
                                         new FillFlowContainer
                                         {

osu.Game/Screens/OnlinePlay/Playlists/PlaylistsRoomSettingsOverlay.cs

@@ -5,7 +5,6 @@ using System;
 using System.Collections.Specialized;
 using Humanizer;
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -77,14 +76,14 @@ namespace osu.Game.Screens.OnlinePlay.Playlists
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colourProvider, OsuColour colours)
             {
                 InternalChildren = new Drawable[]
                 {
                     new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Colour = Color4Extensions.FromHex(@"28242d"),
+                        Colour = colourProvider.Background4
                     },
                     new GridContainer
                     {
@@ -256,7 +255,7 @@ namespace osu.Game.Screens.OnlinePlay.Playlists
                                         new Box
                                         {
                                             RelativeSizeAxes = Axes.Both,
-                                            Colour = Color4Extensions.FromHex(@"28242d").Darken(0.5f).Opacity(1f),
+                                            Colour = colourProvider.Background5
                                         },
                                         new FillFlowContainer
                                         {