Merge pull request #26147 from peppy/settings-expanded

Always show settings section text on buttons

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

@@ -13,7 +13,6 @@ using osu.Game.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Localisation;
 using osu.Game.Overlays;
-using osu.Game.Overlays.Settings;
 using osu.Game.Overlays.Settings.Sections.Input;
 using osu.Game.Rulesets.Taiko;
 using osuTK.Input;
@@ -152,7 +151,7 @@ namespace osu.Game.Tests.Visual.Settings
             AddStep("click first row with two bindings", () =>
             {
                 multiBindingRow = panel.ChildrenOfType<KeyBindingRow>().First(row => row.Defaults.Count() > 1);
-                InputManager.MoveMouseTo(multiBindingRow);
+                InputManager.MoveMouseTo(multiBindingRow.ChildrenOfType<OsuSpriteText>().First());
                 InputManager.Click(MouseButton.Left);
             });
 
@@ -256,7 +255,7 @@ namespace osu.Game.Tests.Visual.Settings
             AddStep("click first row with two bindings", () =>
             {
                 multiBindingRow = panel.ChildrenOfType<KeyBindingRow>().First(row => row.Defaults.Count() > 1);
-                InputManager.MoveMouseTo(multiBindingRow);
+                InputManager.MoveMouseTo(multiBindingRow.ChildrenOfType<OsuSpriteText>().First());
                 InputManager.Click(MouseButton.Left);
             });
 
@@ -305,7 +304,6 @@ namespace osu.Game.Tests.Visual.Settings
                 section.ChildrenOfType<ResetButton>().Single().TriggerClick();
             });
             AddStep("move mouse to centre", () => InputManager.MoveMouseTo(panel.ScreenSpaceDrawQuad.Centre));
-            AddUntilStep("wait for collapsed", () => panel.ChildrenOfType<SettingsSidebar>().Single().Expanded.Value, () => Is.False);
             scrollToAndStartBinding("Left (rim)");
             AddStep("attempt to bind M1 to two keys", () => InputManager.Click(MouseButton.Left));
 
@@ -325,7 +323,6 @@ namespace osu.Game.Tests.Visual.Settings
                 section.ChildrenOfType<ResetButton>().Single().TriggerClick();
             });
             AddStep("move mouse to centre", () => InputManager.MoveMouseTo(panel.ScreenSpaceDrawQuad.Centre));
-            AddUntilStep("wait for collapsed", () => panel.ChildrenOfType<SettingsSidebar>().Single().Expanded.Value, () => Is.False);
             scrollToAndStartBinding("Left (rim)");
             AddStep("attempt to bind M1 to two keys", () => InputManager.Click(MouseButton.Left));
 
@@ -345,7 +342,6 @@ namespace osu.Game.Tests.Visual.Settings
                 section.ChildrenOfType<ResetButton>().Single().TriggerClick();
             });
             AddStep("move mouse to centre", () => InputManager.MoveMouseTo(panel.ScreenSpaceDrawQuad.Centre));
-            AddUntilStep("wait for collapsed", () => panel.ChildrenOfType<SettingsSidebar>().Single().Expanded.Value, () => Is.False);
             scrollToAndStartBinding("Left (centre)");
             AddStep("clear binding", () =>
             {
@@ -377,7 +373,6 @@ namespace osu.Game.Tests.Visual.Settings
                 section.ChildrenOfType<ResetButton>().Single().TriggerClick();
             });
             AddStep("move mouse to centre", () => InputManager.MoveMouseTo(panel.ScreenSpaceDrawQuad.Centre));
-            AddUntilStep("wait for collapsed", () => panel.ChildrenOfType<SettingsSidebar>().Single().Expanded.Value, () => Is.False);
             scrollToAndStartBinding("Left (centre)");
             AddStep("clear binding", () =>
             {

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

@@ -41,6 +41,7 @@ namespace osu.Game.Tests.Visual.Settings
         public void TestBasic()
         {
             AddStep("do nothing", () => { });
+            AddToggleStep("toggle visibility", visible => settings.State.Value = visible ? Visibility.Visible : Visibility.Hidden);
         }
 
         [Test]
@@ -110,7 +111,7 @@ namespace osu.Game.Tests.Visual.Settings
 
             AddStep("Press back", () => settings
                                         .ChildrenOfType<KeyBindingPanel>().FirstOrDefault()?
-                                        .ChildrenOfType<SettingsSubPanel.BackButton>().FirstOrDefault()?.TriggerClick());
+                                        .ChildrenOfType<SettingsSidebar.BackButton>().FirstOrDefault()?.TriggerClick());
 
             AddUntilStep("top-level textbox focused", () => settings.SectionsContainer.ChildrenOfType<SettingsSearchTextBox>().FirstOrDefault()?.HasFocus == true);
         }

osu.Game/Graphics/Containers/ExpandingButtonContainer.cs

@@ -1,21 +0,0 @@
-// 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.
-
-namespace osu.Game.Graphics.Containers
-{
-    /// <summary>
-    /// An <see cref="ExpandingContainer"/> with a long hover expansion delay.
-    /// </summary>
-    /// <remarks>
-    /// Mostly used for buttons with explanatory labels, in which the label would display after a "long hover".
-    /// </remarks>
-    public partial class ExpandingButtonContainer : ExpandingContainer
-    {
-        protected ExpandingButtonContainer(float contractedWidth, float expandedWidth)
-            : base(contractedWidth, expandedWidth)
-        {
-        }
-
-        protected override double HoverExpansionDelay => 400;
-    }
-}

osu.Game/Graphics/Containers/ExpandingContainer.cs

@@ -1,8 +1,6 @@
 // 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.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -26,6 +24,8 @@ namespace osu.Game.Graphics.Containers
         /// </summary>
         protected virtual double HoverExpansionDelay => 0;
 
+        protected virtual bool ExpandOnHover => true;
+
         protected override Container<Drawable> Content => FillFlow;
 
         protected FillFlowContainer FillFlow { get; }
@@ -53,7 +53,7 @@ namespace osu.Game.Graphics.Containers
             };
         }
 
-        private ScheduledDelegate hoverExpandEvent;
+        private ScheduledDelegate? hoverExpandEvent;
 
         protected override void LoadComplete()
         {
@@ -93,6 +93,9 @@ namespace osu.Game.Graphics.Containers
 
         private void updateHoverExpansion()
         {
+            if (!ExpandOnHover)
+                return;
+
             hoverExpandEvent?.Cancel();
 
             if (IsHovered && !Expanded.Value)

osu.Game/Overlays/NotificationOverlay.cs

@@ -227,7 +227,7 @@ namespace osu.Game.Overlays
         protected override void PopIn()
         {
             this.MoveToX(0, TRANSITION_LENGTH, Easing.OutQuint);
-            mainContent.FadeTo(1, TRANSITION_LENGTH, Easing.OutQuint);
+            mainContent.FadeTo(1, TRANSITION_LENGTH / 2, Easing.OutQuint);
             mainContent.FadeEdgeEffectTo(WaveContainer.SHADOW_OPACITY, WaveContainer.APPEAR_DURATION, Easing.Out);
 
             toastTray.FlushAllToasts();
@@ -240,7 +240,7 @@ namespace osu.Game.Overlays
             markAllRead();
 
             this.MoveToX(WIDTH, TRANSITION_LENGTH, Easing.OutQuint);
-            mainContent.FadeTo(0, TRANSITION_LENGTH, Easing.OutQuint);
+            mainContent.FadeTo(0, TRANSITION_LENGTH / 2, Easing.OutQuint);
             mainContent.FadeEdgeEffectTo(0, WaveContainer.DISAPPEAR_DURATION, Easing.In);
         }
 

osu.Game/Overlays/Settings/SettingsSidebar.cs

@@ -1,21 +1,36 @@
 // 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.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osuTK;
 
 namespace osu.Game.Overlays.Settings
 {
-    public partial class SettingsSidebar : ExpandingButtonContainer
+    public partial class SettingsSidebar : ExpandingContainer
     {
-        public const float DEFAULT_WIDTH = 70;
+        public const float CONTRACTED_WIDTH = 70;
-        public const int EXPANDED_WIDTH = 200;
+        public const int EXPANDED_WIDTH = 170;
 
-        public SettingsSidebar()
+        public Action? BackButtonAction;
-            : base(DEFAULT_WIDTH, EXPANDED_WIDTH)
+
+        protected override bool ExpandOnHover => false;
+
+        private readonly bool showBackButton;
+
+        public SettingsSidebar(bool showBackButton)
+            : base(CONTRACTED_WIDTH, EXPANDED_WIDTH)
         {
+            this.showBackButton = showBackButton;
+            Expanded.Value = true;
         }
 
         [BackgroundDependencyLoader]
@@ -27,6 +42,71 @@ namespace osu.Game.Overlays.Settings
                 RelativeSizeAxes = Axes.Both,
                 Depth = float.MaxValue
             });
+
+            if (showBackButton)
+            {
+                AddInternal(new BackButton
+                {
+                    Anchor = Anchor.BottomCentre,
+                    Origin = Anchor.BottomCentre,
+                    Action = () => BackButtonAction?.Invoke(),
+                });
+            }
+        }
+
+        public partial class BackButton : SidebarButton
+        {
+            private Drawable content = null!;
+
+            public BackButton()
+                : base(HoverSampleSet.Default)
+            {
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                Size = new Vector2(SettingsSidebar.EXPANDED_WIDTH);
+
+                Padding = new MarginPadding(40);
+
+                AddRange(new[]
+                {
+                    content = new FillFlowContainer
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Direction = FillDirection.Vertical,
+                        AutoSizeAxes = Axes.Both,
+                        Spacing = new Vector2(5),
+                        Children = new Drawable[]
+                        {
+                            new SpriteIcon
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Size = new Vector2(30),
+                                Shadow = true,
+                                Icon = FontAwesome.Solid.ChevronLeft
+                            },
+                            new OsuSpriteText
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Font = OsuFont.GetFont(size: 16, weight: FontWeight.Regular),
+                                Text = @"back",
+                            },
+                        }
+                    }
+                });
+            }
+
+            protected override void UpdateState()
+            {
+                base.UpdateState();
+
+                content.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, FADE_DURATION, Easing.OutQuint);
+            }
         }
     }
 }

osu.Game/Overlays/Settings/SidebarButton.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
+using osu.Framework.Graphics;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics.UserInterface;
 
@@ -23,6 +24,7 @@ namespace osu.Game.Overlays.Settings
         private void load()
         {
             BackgroundColour = ColourProvider.Background5;
+            Hover.Colour = ColourProvider.Light4;
         }
 
         protected override void LoadComplete()
@@ -40,6 +42,9 @@ namespace osu.Game.Overlays.Settings
 
         protected override void OnHoverLost(HoverLostEvent e) => UpdateState();
 
-        protected abstract void UpdateState();
+        protected virtual void UpdateState()
+        {
+            Hover.FadeTo(IsHovered ? 0.1f : 0, FADE_DURATION, Easing.OutQuint);
+        }
     }
 }

osu.Game/Overlays/Settings/SidebarIconButton.cs

@@ -60,26 +60,28 @@ namespace osu.Game.Overlays.Settings
             RelativeSizeAxes = Axes.X;
             Height = 46;
 
+            Padding = new MarginPadding(5);
+
             AddRange(new Drawable[]
             {
                 textIconContent = new Container
                 {
-                    Width = SettingsSidebar.DEFAULT_WIDTH,
+                    RelativeSizeAxes = Axes.Both,
-                    RelativeSizeAxes = Axes.Y,
                     Colour = OsuColour.Gray(0.6f),
                     Children = new Drawable[]
                     {
-                        headerText = new OsuSpriteText
-                        {
-                            Position = new Vector2(SettingsSidebar.DEFAULT_WIDTH + 10, 0),
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.CentreLeft,
-                        },
                         iconContainer = new ConstrainedIconContainer
                         {
-                            Anchor = Anchor.Centre,
+                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.Centre,
+                            Origin = Anchor.CentreLeft,
                             Size = new Vector2(20),
+                            Margin = new MarginPadding { Left = 25 }
+                        },
+                        headerText = new OsuSpriteText
+                        {
+                            Position = new Vector2(60, 0),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
                         },
                     }
                 },
@@ -113,6 +115,8 @@ namespace osu.Game.Overlays.Settings
 
         protected override void UpdateState()
         {
+            base.UpdateState();
+
             if (Selected)
             {
                 textIconContent.FadeColour(ColourProvider.Content1, FADE_DURATION, Easing.OutQuint);

osu.Game/Overlays/SettingsOverlay.cs

@@ -49,7 +49,7 @@ namespace osu.Game.Overlays
         protected override Drawable CreateFooter() => new SettingsFooter();
 
         public SettingsOverlay()
-            : base(true)
+            : base(false)
         {
         }
 
@@ -72,16 +72,19 @@ namespace osu.Game.Overlays
             switch (state.NewValue)
             {
                 case Visibility.Visible:
-                    Sidebar?.FadeColour(Color4.DarkGray, 300, Easing.OutQuint);
+                    Sidebar.Expanded.Value = false;
+                    Sidebar.FadeColour(Color4.DarkGray, 300, Easing.OutQuint);
 
                     SectionsContainer.FadeOut(300, Easing.OutQuint);
                     ContentContainer.MoveToX(-PANEL_WIDTH, 500, Easing.OutQuint);
 
                     lastOpenedSubPanel = panel;
+
                     break;
 
                 case Visibility.Hidden:
-                    Sidebar?.FadeColour(Color4.White, 300, Easing.OutQuint);
+                    Sidebar.Expanded.Value = true;
+                    Sidebar.FadeColour(Color4.White, 300, Easing.OutQuint);
 
                     SectionsContainer.FadeIn(500, Easing.OutQuint);
                     ContentContainer.MoveToX(0, 500, Easing.OutQuint);

osu.Game/Overlays/SettingsPanel.cs

@@ -33,7 +33,7 @@ namespace osu.Game.Overlays
 
         public const float TRANSITION_LENGTH = 600;
 
-        private const float sidebar_width = SettingsSidebar.DEFAULT_WIDTH;
+        private const float sidebar_width = SettingsSidebar.EXPANDED_WIDTH;
 
         /// <summary>
         /// The width of the settings panel content, excluding the sidebar.
@@ -59,7 +59,7 @@ namespace osu.Game.Overlays
         protected override string PopInSampleName => "UI/settings-pop-in";
         protected override double PopInOutSampleBalance => -OsuGameBase.SFX_STEREO_STRENGTH;
 
-        private readonly bool showSidebar;
+        private readonly bool showBackButton;
 
         private LoadingLayer loading;
 
@@ -72,9 +72,9 @@ namespace osu.Game.Overlays
         [Cached]
         private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
 
-        protected SettingsPanel(bool showSidebar)
+        protected SettingsPanel(bool showBackButton)
         {
-            this.showSidebar = showSidebar;
+            this.showBackButton = showBackButton;
             RelativeSizeAxes = Axes.Y;
             AutoSizeAxes = Axes.X;
         }
@@ -146,10 +146,11 @@ namespace osu.Game.Overlays
                 }
             });
 
-            if (showSidebar)
+            AddInternal(Sidebar = new SettingsSidebar(showBackButton)
             {
-                AddInternal(Sidebar = new SettingsSidebar { Width = sidebar_width });
+                BackButtonAction = Hide,
-            }
+                Width = sidebar_width
+            });
 
             CreateSections()?.ForEach(AddSection);
         }
@@ -180,7 +181,7 @@ namespace osu.Game.Overlays
             Scheduler.AddDelayed(loadSections, TRANSITION_LENGTH / 3);
 
             Sidebar?.MoveToX(0, TRANSITION_LENGTH, Easing.OutQuint);
-            this.FadeTo(1, TRANSITION_LENGTH, Easing.OutQuint);
+            this.FadeTo(1, TRANSITION_LENGTH / 2, Easing.OutQuint);
 
             searchTextBox.TakeFocus();
             searchTextBox.HoldFocus = true;
@@ -196,7 +197,7 @@ namespace osu.Game.Overlays
             ContentContainer.MoveToX(-WIDTH + ExpandedPosition, TRANSITION_LENGTH, Easing.OutQuint);
 
             Sidebar?.MoveToX(-sidebar_width, TRANSITION_LENGTH, Easing.OutQuint);
-            this.FadeTo(0, TRANSITION_LENGTH, Easing.OutQuint);
+            this.FadeTo(0, TRANSITION_LENGTH / 2, Easing.OutQuint);
 
             searchTextBox.HoldFocus = false;
             if (searchTextBox.HasFocus)
@@ -285,7 +286,6 @@ namespace osu.Game.Overlays
                             return;
 
                         SectionsContainer.ScrollTo(section);
-                        Sidebar.Expanded.Value = false;
                     },
                 };
             }

osu.Game/Overlays/SettingsSubPanel.cs

@@ -1,17 +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.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Sprites;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
-using osu.Game.Overlays.Settings;
-using osuTK;
 
 namespace osu.Game.Overlays
 {
@@ -25,63 +15,8 @@ namespace osu.Game.Overlays
         [BackgroundDependencyLoader]
         private void load()
         {
-            AddInternal(new BackButton
-            {
-                Anchor = Anchor.BottomLeft,
-                Origin = Anchor.BottomLeft,
-                Action = Hide
-            });
         }
 
         protected override bool DimMainContent => false; // dimming is handled by main overlay
-
-        public partial class BackButton : SidebarButton
-        {
-            private Container content;
-
-            public BackButton()
-                : base(HoverSampleSet.Default)
-            {
-            }
-
-            [BackgroundDependencyLoader]
-            private void load()
-            {
-                Size = new Vector2(SettingsSidebar.DEFAULT_WIDTH);
-
-                AddRange(new Drawable[]
-                {
-                    content = new Container
-                    {
-                        Anchor = Anchor.Centre,
-                        Origin = Anchor.Centre,
-                        Children = new Drawable[]
-                        {
-                            new SpriteIcon
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Size = new Vector2(15),
-                                Shadow = true,
-                                Icon = FontAwesome.Solid.ChevronLeft
-                            },
-                            new OsuSpriteText
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Y = 15,
-                                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
-                                Text = @"back",
-                            },
-                        }
-                    }
-                });
-            }
-
-            protected override void UpdateState()
-            {
-                content.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, FADE_DURATION, Easing.OutQuint);
-            }
-        }
     }
 }