Merge pull request #21491 from mk56-spn/footer_V2_implementation

New song select footer design implementation

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

@@ -0,0 +1,146 @@
+// 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.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Overlays;
+using osu.Game.Overlays.Mods;
+using osu.Game.Screens.Select.FooterV2;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.SongSelect
+{
+    public partial class TestSceneSongSelectFooterV2 : OsuManualInputManagerTestScene
+    {
+        private FooterButtonRandomV2 randomButton = null!;
+        private FooterButtonModsV2 modsButton = null!;
+
+        private bool nextRandomCalled;
+        private bool previousRandomCalled;
+
+        private DummyOverlay overlay = null!;
+
+        [Cached]
+        private OverlayColourProvider colourProvider { get; set; } = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
+        [SetUp]
+        public void SetUp() => Schedule(() =>
+        {
+            nextRandomCalled = false;
+            previousRandomCalled = false;
+
+            FooterV2 footer;
+
+            Children = new Drawable[]
+            {
+                footer = new FooterV2
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre
+                },
+                overlay = new DummyOverlay()
+            };
+
+            footer.AddButton(modsButton = new FooterButtonModsV2(), overlay);
+            footer.AddButton(randomButton = new FooterButtonRandomV2
+            {
+                NextRandom = () => nextRandomCalled = true,
+                PreviousRandom = () => previousRandomCalled = true
+            });
+            footer.AddButton(new FooterButtonOptionsV2());
+
+            overlay.Hide();
+        });
+
+        [Test]
+        public void TestState()
+        {
+            AddToggleStep("set options enabled state", state => this.ChildrenOfType<FooterButtonV2>().Last().Enabled.Value = state);
+        }
+
+        [Test]
+        public void TestFooterRandom()
+        {
+            AddStep("press F2", () => InputManager.Key(Key.F2));
+            AddAssert("next random invoked", () => nextRandomCalled && !previousRandomCalled);
+        }
+
+        [Test]
+        public void TestFooterRandomViaMouse()
+        {
+            AddStep("click button", () =>
+            {
+                InputManager.MoveMouseTo(randomButton);
+                InputManager.Click(MouseButton.Left);
+            });
+            AddAssert("next random invoked", () => nextRandomCalled && !previousRandomCalled);
+        }
+
+        [Test]
+        public void TestFooterRewind()
+        {
+            AddStep("press Shift+F2", () =>
+            {
+                InputManager.PressKey(Key.LShift);
+                InputManager.PressKey(Key.F2);
+                InputManager.ReleaseKey(Key.F2);
+                InputManager.ReleaseKey(Key.LShift);
+            });
+            AddAssert("previous random invoked", () => previousRandomCalled && !nextRandomCalled);
+        }
+
+        [Test]
+        public void TestFooterRewindViaShiftMouseLeft()
+        {
+            AddStep("shift + click button", () =>
+            {
+                InputManager.PressKey(Key.LShift);
+                InputManager.MoveMouseTo(randomButton);
+                InputManager.Click(MouseButton.Left);
+                InputManager.ReleaseKey(Key.LShift);
+            });
+            AddAssert("previous random invoked", () => previousRandomCalled && !nextRandomCalled);
+        }
+
+        [Test]
+        public void TestFooterRewindViaMouseRight()
+        {
+            AddStep("right click button", () =>
+            {
+                InputManager.MoveMouseTo(randomButton);
+                InputManager.Click(MouseButton.Right);
+            });
+            AddAssert("previous random invoked", () => previousRandomCalled && !nextRandomCalled);
+        }
+
+        [Test]
+        public void TestOverlayPresent()
+        {
+            AddStep("Press F1", () =>
+            {
+                InputManager.MoveMouseTo(modsButton);
+                InputManager.Click(MouseButton.Left);
+            });
+            AddAssert("Overlay visible", () => overlay.State.Value == Visibility.Visible);
+            AddStep("Hide", () => overlay.Hide());
+        }
+
+        private partial class DummyOverlay : ShearedOverlayContainer
+        {
+            public DummyOverlay()
+                : base(OverlayColourScheme.Green)
+            {
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                Header.Title = "An overlay";
+            }
+        }
+    }
+}

osu.Game/Screens/Select/FooterV2/FooterButtonModsV2.cs

@@ -0,0 +1,20 @@
+// 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.Allocation;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+
+namespace osu.Game.Screens.Select.FooterV2
+{
+    public partial class FooterButtonModsV2 : FooterButtonV2
+    {
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colour)
+        {
+            Text = "Mods";
+            Icon = FontAwesome.Solid.ExchangeAlt;
+            AccentColour = colour.Lime1;
+        }
+    }
+}

osu.Game/Screens/Select/FooterV2/FooterButtonOptionsV2.cs

@@ -0,0 +1,22 @@
+// 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.Allocation;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Input.Bindings;
+
+namespace osu.Game.Screens.Select.FooterV2
+{
+    public partial class FooterButtonOptionsV2 : FooterButtonV2
+    {
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colour)
+        {
+            Text = "Options";
+            Icon = FontAwesome.Solid.Cog;
+            AccentColour = colour.Purple1;
+            Hotkey = GlobalAction.ToggleBeatmapOptions;
+        }
+    }
+}

osu.Game/Screens/Select/FooterV2/FooterButtonRandomV2.cs

@@ -0,0 +1,161 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Input.Bindings;
+using osuTK;
+using osuTK.Input;
+
+namespace osu.Game.Screens.Select.FooterV2
+{
+    public partial class FooterButtonRandomV2 : FooterButtonV2
+    {
+        public Action? NextRandom { get; set; }
+        public Action? PreviousRandom { get; set; }
+
+        private Container persistentText = null!;
+        private OsuSpriteText randomSpriteText = null!;
+        private OsuSpriteText rewindSpriteText = null!;
+        private bool rewindSearch;
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colour)
+        {
+            //TODO: use https://fontawesome.com/icons/shuffle?s=solid&f=classic when local Fontawesome is updated
+            Icon = FontAwesome.Solid.Random;
+            AccentColour = colour.Blue1;
+            TextContainer.Add(persistentText = new Container
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                AlwaysPresent = true,
+                AutoSizeAxes = Axes.Both,
+                Children = new[]
+                {
+                    randomSpriteText = new OsuSpriteText
+                    {
+                        Font = OsuFont.TorusAlternate.With(size: 19),
+                        AlwaysPresent = true,
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        Text = "Random",
+                    },
+                    rewindSpriteText = new OsuSpriteText
+                    {
+                        Font = OsuFont.TorusAlternate.With(size: 19),
+                        AlwaysPresent = true,
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        Text = "Rewind",
+                        Alpha = 0f,
+                    }
+                }
+            });
+
+            Action = () =>
+            {
+                if (rewindSearch)
+                {
+                    const double fade_time = 500;
+
+                    OsuSpriteText fallingRewind;
+
+                    TextContainer.Add(fallingRewind = new OsuSpriteText
+                    {
+                        Alpha = 0,
+                        Text = rewindSpriteText.Text,
+                        AlwaysPresent = true, // make sure the button is sized large enough to always show this
+                        Anchor = Anchor.BottomCentre,
+                        Origin = Anchor.BottomCentre,
+                        Font = OsuFont.TorusAlternate.With(size: 19),
+                    });
+
+                    fallingRewind.FadeOutFromOne(fade_time, Easing.In);
+                    fallingRewind.MoveTo(Vector2.Zero).MoveTo(new Vector2(0, 10), fade_time, Easing.In);
+                    fallingRewind.Expire();
+
+                    persistentText.FadeInFromZero(fade_time, Easing.In);
+
+                    PreviousRandom?.Invoke();
+                }
+                else
+                {
+                    NextRandom?.Invoke();
+                }
+            };
+        }
+
+        protected override bool OnKeyDown(KeyDownEvent e)
+        {
+            updateText(e.ShiftPressed);
+            return base.OnKeyDown(e);
+        }
+
+        protected override void OnKeyUp(KeyUpEvent e)
+        {
+            updateText(e.ShiftPressed);
+            base.OnKeyUp(e);
+        }
+
+        protected override bool OnClick(ClickEvent e)
+        {
+            try
+            {
+                // this uses OR to handle rewinding when clicks are triggered by other sources (i.e. right button in OnMouseUp).
+                rewindSearch |= e.ShiftPressed;
+                return base.OnClick(e);
+            }
+            finally
+            {
+                rewindSearch = false;
+            }
+        }
+
+        protected override void OnMouseUp(MouseUpEvent e)
+        {
+            if (e.Button == MouseButton.Right)
+            {
+                rewindSearch = true;
+                TriggerClick();
+                return;
+            }
+
+            base.OnMouseUp(e);
+        }
+
+        public override bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
+        {
+            rewindSearch = e.Action == GlobalAction.SelectPreviousRandom;
+
+            if (e.Action != GlobalAction.SelectNextRandom && e.Action != GlobalAction.SelectPreviousRandom)
+            {
+                return false;
+            }
+
+            if (!e.Repeat)
+                TriggerClick();
+            return true;
+        }
+
+        public override void OnReleased(KeyBindingReleaseEvent<GlobalAction> e)
+        {
+            if (e.Action == GlobalAction.SelectPreviousRandom)
+            {
+                rewindSearch = false;
+            }
+        }
+
+        private void updateText(bool rewind = false)
+        {
+            randomSpriteText.Alpha = rewind ? 0 : 1;
+            rewindSpriteText.Alpha = rewind ? 1 : 0;
+        }
+    }
+}

osu.Game/Screens/Select/FooterV2/FooterButtonV2.cs

@@ -0,0 +1,211 @@
+// 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.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Bindings;
+using osu.Framework.Input.Events;
+using osu.Framework.Localisation;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Input.Bindings;
+using osu.Game.Overlays;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Screens.Select.FooterV2
+{
+    public partial class FooterButtonV2 : OsuClickableContainer, IKeyBindingHandler<GlobalAction>
+    {
+        private const int button_height = 90;
+        private const int button_width = 140;
+        private const int corner_radius = 10;
+        private const int transition_length = 500;
+
+        // This should be 12 by design, but an extra allowance is added due to the corner radius specification.
+        public const float SHEAR_WIDTH = 13.5f;
+
+        public Bindable<Visibility> OverlayState = new Bindable<Visibility>();
+
+        protected static readonly Vector2 SHEAR = new Vector2(SHEAR_WIDTH / button_height, 0);
+
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; } = null!;
+
+        private Colour4 buttonAccentColour;
+
+        protected Colour4 AccentColour
+        {
+            set
+            {
+                buttonAccentColour = value;
+                bar.Colour = buttonAccentColour;
+                icon.Colour = buttonAccentColour;
+            }
+        }
+
+        protected IconUsage Icon
+        {
+            set => icon.Icon = value;
+        }
+
+        protected LocalisableString Text
+        {
+            set => text.Text = value;
+        }
+
+        private readonly SpriteText text;
+        private readonly SpriteIcon icon;
+
+        protected Container TextContainer;
+        private readonly Box bar;
+        private readonly Box backgroundBox;
+
+        public FooterButtonV2()
+        {
+            EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Radius = 4,
+                // Figma says 50% opacity, but it does not match up visually if taken at face value, and looks bad.
+                Colour = Colour4.Black.Opacity(0.25f),
+                Offset = new Vector2(0, 2),
+            };
+            Shear = SHEAR;
+            Size = new Vector2(button_width, button_height);
+            Masking = true;
+            CornerRadius = corner_radius;
+            Children = new Drawable[]
+            {
+                backgroundBox = new Box
+                {
+                    RelativeSizeAxes = Axes.Both
+                },
+
+                // For elements that should not be sheared.
+                new Container
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Shear = -SHEAR,
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
+                        TextContainer = new Container
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Y = 42,
+                            AutoSizeAxes = Axes.Both,
+                            Child = text = new OsuSpriteText
+                            {
+                                // figma design says the size is 16, but due to the issues with font sizes 19 matches better
+                                Font = OsuFont.TorusAlternate.With(size: 19),
+                                AlwaysPresent = true
+                            }
+                        },
+                        icon = new SpriteIcon
+                        {
+                            Y = 12,
+                            Size = new Vector2(20),
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre
+                        },
+                    }
+                },
+                new Container
+                {
+                    Shear = -SHEAR,
+                    Anchor = Anchor.BottomCentre,
+                    Origin = Anchor.Centre,
+                    Y = -corner_radius,
+                    Size = new Vector2(120, 6),
+                    Masking = true,
+                    CornerRadius = 3,
+                    Child = bar = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                    }
+                }
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            OverlayState.BindValueChanged(_ => updateDisplay());
+            Enabled.BindValueChanged(_ => updateDisplay(), true);
+
+            FinishTransforms(true);
+        }
+
+        public GlobalAction? Hotkey;
+
+        private bool handlingMouse;
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            updateDisplay();
+            return true;
+        }
+
+        protected override bool OnMouseDown(MouseDownEvent e)
+        {
+            handlingMouse = true;
+            updateDisplay();
+            return base.OnMouseDown(e);
+        }
+
+        protected override void OnMouseUp(MouseUpEvent e)
+        {
+            handlingMouse = false;
+            updateDisplay();
+            base.OnMouseUp(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e) => updateDisplay();
+
+        public virtual bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
+        {
+            if (e.Action != Hotkey || e.Repeat) return false;
+
+            TriggerClick();
+            return true;
+        }
+
+        public virtual void OnReleased(KeyBindingReleaseEvent<GlobalAction> e) { }
+
+        private void updateDisplay()
+        {
+            Color4 backgroundColour = colourProvider.Background3;
+
+            if (!Enabled.Value)
+            {
+                backgroundColour = colourProvider.Background3.Darken(0.4f);
+            }
+            else
+            {
+                if (OverlayState.Value == Visibility.Visible)
+                    backgroundColour = buttonAccentColour.Darken(0.5f);
+
+                if (IsHovered)
+                {
+                    backgroundColour = backgroundColour.Lighten(0.3f);
+
+                    if (handlingMouse)
+                        backgroundColour = backgroundColour.Lighten(0.3f);
+                }
+            }
+
+            backgroundBox.FadeColour(backgroundColour, transition_length, Easing.OutQuint);
+        }
+    }
+}

osu.Game/Screens/Select/FooterV2/FooterV2.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.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osuTK;
+
+namespace osu.Game.Screens.Select.FooterV2
+{
+    public partial class FooterV2 : InputBlockingContainer
+    {
+        //Should be 60, setting to 50 for now for the sake of matching the current BackButton height.
+        private const int height = 50;
+        private const int padding = 80;
+
+        private readonly List<OverlayContainer> overlays = new List<OverlayContainer>();
+
+        /// <param name="button">The button to be added.</param>
+        /// <param name="overlay">The <see cref="OverlayContainer"/> to be toggled by this button.</param>
+        public void AddButton(FooterButtonV2 button, OverlayContainer? overlay = null)
+        {
+            if (overlay != null)
+            {
+                overlays.Add(overlay);
+                button.Action = () => showOverlay(overlay);
+                button.OverlayState.BindTo(overlay.State);
+            }
+
+            buttons.Add(button);
+        }
+
+        private void showOverlay(OverlayContainer overlay)
+        {
+            foreach (var o in overlays)
+            {
+                if (o == overlay)
+                    o.ToggleVisibility();
+                else
+                    o.Hide();
+            }
+        }
+
+        private FillFlowContainer<FooterButtonV2> buttons = null!;
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            RelativeSizeAxes = Axes.X;
+            Height = height;
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colourProvider.Background5
+                },
+                buttons = new FillFlowContainer<FooterButtonV2>
+                {
+                    Position = new Vector2(TwoLayerButton.SIZE_EXTENDED.X + padding, 10),
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    Direction = FillDirection.Horizontal,
+                    Spacing = new Vector2(-FooterButtonV2.SHEAR_WIDTH + 7, 0),
+                    AutoSizeAxes = Axes.Both
+                }
+            };
+        }
+    }
+}