Merge pull request #16342 from peppy/editor-toolbox-expand

Contract editor toolboxes when not in use

osu.Game/Overlays/ExpandingButtonContainer.cs

@@ -1,47 +1,46 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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 System.Linq;
 using osu.Framework;
-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.Framework.Testing;
 using osu.Framework.Threading;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
 using osuTK;
 
-namespace osu.Game.Overlays.Settings
+namespace osu.Game.Overlays
 {
-    public class Sidebar : Container<SidebarIconButton>, IStateful<ExpandedState>
+    public abstract class ExpandingButtonContainer : Container, IStateful<ExpandedState>
     {
-        private readonly Box background;
+        private readonly float contractedWidth;
-        private readonly FillFlowContainer<SidebarIconButton> content;
+        private readonly float expandedWidth;
-        public const float DEFAULT_WIDTH = 70;
-        public const int EXPANDED_WIDTH = 200;
 
         public event Action<ExpandedState> StateChanged;
 
-        protected override Container<SidebarIconButton> Content => content;
+        protected override Container<Drawable> Content => FillFlow;
 
-        public Sidebar()
+        protected FillFlowContainer FillFlow { get; }
+
+        protected ExpandingButtonContainer(float contractedWidth, float expandedWidth)
         {
+            this.contractedWidth = contractedWidth;
+            this.expandedWidth = expandedWidth;
+
             RelativeSizeAxes = Axes.Y;
+            Width = contractedWidth;
+
             InternalChildren = new Drawable[]
             {
-                background = new Box
-                {
-                    Colour = OsuColour.Gray(0.02f),
-                    RelativeSizeAxes = Axes.Both,
-                },
                 new SidebarScrollContainer
                 {
                     Children = new[]
                     {
-                        content = new FillFlowContainer<SidebarIconButton>
+                        FillFlow = new FillFlowContainer
                         {
                             Origin = Anchor.CentreLeft,
                             Anchor = Anchor.CentreLeft,
@@ -54,12 +53,6 @@ namespace osu.Game.Overlays.Settings
             };
         }
 
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
-        {
-            background.Colour = colourProvider.Background5;
-        }
-
         private ScheduledDelegate expandEvent;
         private ExpandedState state;
 
@@ -72,7 +65,7 @@ namespace osu.Game.Overlays.Settings
         protected override void OnHoverLost(HoverLostEvent e)
         {
             expandEvent?.Cancel();
-            lastHoveredButton = null;
+            hoveredButton = null;
             State = ExpandedState.Contracted;
 
             base.OnHoverLost(e);
@@ -107,11 +100,11 @@ namespace osu.Game.Overlays.Settings
                 switch (state)
                 {
                     default:
-                        this.ResizeTo(new Vector2(DEFAULT_WIDTH, Height), 500, Easing.OutQuint);
+                        this.ResizeTo(new Vector2(contractedWidth, Height), 500, Easing.OutQuint);
                         break;
 
                     case ExpandedState.Expanded:
-                        this.ResizeTo(new Vector2(EXPANDED_WIDTH, Height), 500, Easing.OutQuint);
+                        this.ResizeTo(new Vector2(expandedWidth, Height), 500, Easing.OutQuint);
                         break;
                 }
 
@@ -119,24 +112,24 @@ namespace osu.Game.Overlays.Settings
             }
         }
 
-        private Drawable lastHoveredButton;
+        private Drawable hoveredButton;
-
-        private Drawable hoveredButton => content.Children.FirstOrDefault(c => c.IsHovered);
 
         private void queueExpandIfHovering()
         {
-            // only expand when we hover a different button.
+            // if the same button is hovered, let the scheduled expand play out..
-            if (lastHoveredButton == hoveredButton) return;
+            if (hoveredButton?.IsHovered == true)
+                return;
 
-            if (!IsHovered) return;
+            // ..otherwise check whether a new button is hovered, and if so, queue a new hover operation.
 
-            if (State != ExpandedState.Expanded)
+            // usually we wouldn't use ChildrenOfType in implementations, but this is the simplest way
-            {
+            // to handle cases like the editor where the buttons may be nested within a child hierarchy.
-                expandEvent?.Cancel();
+            hoveredButton = FillFlow.ChildrenOfType<OsuButton>().FirstOrDefault(c => c.IsHovered);
+
+            expandEvent?.Cancel();
+
+            if (hoveredButton?.IsHovered == true && State != ExpandedState.Expanded)
                 expandEvent = Scheduler.AddDelayed(() => State = ExpandedState.Expanded, 750);
-            }
-
-            lastHoveredButton = hoveredButton;
         }
     }
 

osu.Game/Overlays/Settings/SettingsSidebar.cs

@@ -0,0 +1,31 @@
+// 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;
+using osu.Framework.Graphics.Shapes;
+
+namespace osu.Game.Overlays.Settings
+{
+    public class SettingsSidebar : ExpandingButtonContainer
+    {
+        public const float DEFAULT_WIDTH = 70;
+        public const int EXPANDED_WIDTH = 200;
+
+        public SettingsSidebar()
+            : base(DEFAULT_WIDTH, EXPANDED_WIDTH)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            AddInternal(new Box
+            {
+                Colour = colourProvider.Background5,
+                RelativeSizeAxes = Axes.Both,
+                Depth = float.MaxValue
+            });
+        }
+    }
+}

osu.Game/Overlays/Settings/SidebarIconButton.cs

@@ -62,14 +62,14 @@ namespace osu.Game.Overlays.Settings
             {
                 textIconContent = new Container
                 {
-                    Width = Sidebar.DEFAULT_WIDTH,
+                    Width = SettingsSidebar.DEFAULT_WIDTH,
                     RelativeSizeAxes = Axes.Y,
                     Colour = OsuColour.Gray(0.6f),
                     Children = new Drawable[]
                     {
                         headerText = new OsuSpriteText
                         {
-                            Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
+                            Position = new Vector2(SettingsSidebar.DEFAULT_WIDTH + 10, 0),
                             Anchor = Anchor.CentreLeft,
                             Origin = Anchor.CentreLeft,
                         },

osu.Game/Overlays/SettingsPanel.cs

@@ -27,7 +27,7 @@ namespace osu.Game.Overlays
 
         public const float TRANSITION_LENGTH = 600;
 
-        private const float sidebar_width = Sidebar.DEFAULT_WIDTH;
+        private const float sidebar_width = SettingsSidebar.DEFAULT_WIDTH;
 
         /// <summary>
         /// The width of the settings panel content, excluding the sidebar.
@@ -43,7 +43,7 @@ namespace osu.Game.Overlays
 
         protected override Container<Drawable> Content => ContentContainer;
 
-        protected Sidebar Sidebar;
+        protected SettingsSidebar Sidebar;
         private SidebarIconButton selectedSidebarButton;
 
         public SettingsSectionsContainer SectionsContainer { get; private set; }
@@ -129,7 +129,7 @@ namespace osu.Game.Overlays
 
             if (showSidebar)
             {
-                AddInternal(Sidebar = new Sidebar { Width = sidebar_width });
+                AddInternal(Sidebar = new SettingsSidebar { Width = sidebar_width });
             }
 
             CreateSections()?.ForEach(AddSection);
@@ -244,7 +244,7 @@ namespace osu.Game.Overlays
                     if (selectedSidebarButton != null)
                         selectedSidebarButton.Selected = false;
 
-                    selectedSidebarButton = Sidebar.Children.FirstOrDefault(b => b.Section == section.NewValue);
+                    selectedSidebarButton = Sidebar.Children.OfType<SidebarIconButton>().FirstOrDefault(b => b.Section == section.NewValue);
 
                     if (selectedSidebarButton != null)
                         selectedSidebarButton.Selected = true;

osu.Game/Overlays/SettingsSubPanel.cs

@@ -39,7 +39,7 @@ namespace osu.Game.Overlays
             [BackgroundDependencyLoader]
             private void load()
             {
-                Size = new Vector2(Sidebar.DEFAULT_WIDTH);
+                Size = new Vector2(SettingsSidebar.DEFAULT_WIDTH);
 
                 AddRange(new Drawable[]
                 {

osu.Game/Overlays/SettingsToolboxGroup.cs

@@ -0,0 +1,190 @@
+// 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.Caching;
+using osu.Framework.Extensions.EnumExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
+using osu.Framework.Layout;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays
+{
+    public abstract class SettingsToolboxGroup : Container
+    {
+        private const float transition_duration = 250;
+        private const int container_width = 270;
+        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;
+        private readonly IconButton button;
+
+        private bool expanded = true;
+
+        public bool Expanded
+        {
+            get => expanded;
+            set
+            {
+                if (expanded == value) return;
+
+                expanded = value;
+
+                content.ClearTransforms();
+
+                if (expanded)
+                    content.AutoSizeAxes = Axes.Y;
+                else
+                {
+                    content.AutoSizeAxes = Axes.None;
+                    content.ResizeHeightTo(0, transition_duration, Easing.OutQuint);
+                }
+
+                updateExpanded();
+            }
+        }
+
+        private Color4 expandedColour;
+
+        private readonly OsuSpriteText headerText;
+
+        /// <summary>
+        /// Create a new instance.
+        /// </summary>
+        /// <param name="title">The title to be displayed in the header of this group.</param>
+        protected SettingsToolboxGroup(string title)
+        {
+            AutoSizeAxes = Axes.Y;
+            Width = container_width;
+            Masking = true;
+            CornerRadius = corner_radius;
+            BorderColour = Color4.Black;
+            BorderThickness = border_thickness;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.Black,
+                    Alpha = 0.5f,
+                },
+                new FillFlowContainer
+                {
+                    Direction = FillDirection.Vertical,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            Name = @"Header",
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
+                            RelativeSizeAxes = Axes.X,
+                            Height = header_height,
+                            Children = new Drawable[]
+                            {
+                                headerText = new OsuSpriteText
+                                {
+                                    Origin = Anchor.CentreLeft,
+                                    Anchor = Anchor.CentreLeft,
+                                    Text = title.ToUpperInvariant(),
+                                    Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 17),
+                                    Padding = new MarginPadding { Left = 10, Right = 30 },
+                                },
+                                button = new IconButton
+                                {
+                                    Origin = Anchor.Centre,
+                                    Anchor = Anchor.CentreRight,
+                                    Position = new Vector2(-15, 0),
+                                    Icon = FontAwesome.Solid.Bars,
+                                    Scale = new Vector2(0.75f),
+                                    Action = () => Expanded = !Expanded,
+                                },
+                            }
+                        },
+                        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(15),
+                            Spacing = new Vector2(0, 15),
+                        }
+                    }
+                },
+            };
+        }
+
+        protected override bool OnInvalidate(Invalidation invalidation, InvalidationSource source)
+        {
+            if (invalidation.HasFlagFast(Invalidation.DrawSize))
+                headerTextVisibilityCache.Invalidate();
+
+            return base.OnInvalidate(invalidation, source);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            if (!headerTextVisibilityCache.IsValid)
+                // These toolbox grouped may be contracted to only show icons.
+                // For now, let's hide the header to avoid text truncation weirdness in such cases.
+                headerText.FadeTo(headerText.DrawWidth < DrawWidth ? 1 : 0, 150, Easing.OutQuint);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            this.Delay(600).FadeTo(inactive_alpha, fade_duration, Easing.OutQuint);
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            this.FadeIn(fade_duration, Easing.OutQuint);
+            return false;
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            this.FadeTo(inactive_alpha, fade_duration, Easing.OutQuint);
+            base.OnHoverLost(e);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            expandedColour = colours.Yellow;
+
+            updateExpanded();
+        }
+
+        private void updateExpanded() => button.FadeColour(expanded ? expandedColour : Color4.White, 200, Easing.InOutQuint);
+
+        protected override Container<Drawable> Content => content;
+
+        protected override bool OnMouseDown(MouseDownEvent e) => true;
+    }
+}

osu.Game/Rulesets/Edit/EditorToolboxGroup.cs

@@ -2,13 +2,13 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Graphics;
-using osu.Game.Screens.Play.PlayerSettings;
+using osu.Game.Overlays;
 
 namespace osu.Game.Rulesets.Edit
 {
-    public class ToolboxGroup : PlayerSettingsGroup
+    public class EditorToolboxGroup : SettingsToolboxGroup
     {
-        public ToolboxGroup(string title)
+        public EditorToolboxGroup(string title)
             : base(title)
         {
             RelativeSizeAxes = Axes.X;

osu.Game/Rulesets/Edit/HitObjectComposer.cs

@@ -13,6 +13,7 @@ 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;
@@ -98,8 +99,6 @@ namespace osu.Game.Rulesets.Edit
 
             dependencies.CacheAs(Playfield);
 
-            const float toolbar_width = 200;
-
             InternalChildren = new Drawable[]
             {
                 new Container
@@ -116,20 +115,15 @@ namespace osu.Game.Rulesets.Edit
                                               .WithChild(BlueprintContainer = CreateBlueprintContainer())
                     }
                 },
-                new FillFlowContainer
+                new LeftToolboxFlow
                 {
-                    Name = "Sidebar",
-                    RelativeSizeAxes = Axes.Y,
-                    Width = toolbar_width,
-                    Padding = new MarginPadding { Right = 10 },
-                    Spacing = new Vector2(10),
                     Children = new Drawable[]
                     {
-                        new ToolboxGroup("toolbox (1-9)")
+                        new EditorToolboxGroup("toolbox (1-9)")
                         {
                             Child = toolboxCollection = new EditorRadioButtonCollection { RelativeSizeAxes = Axes.X }
                         },
-                        new ToolboxGroup("toggles (Q~P)")
+                        new EditorToolboxGroup("toggles (Q~P)")
                         {
                             Child = togglesCollection = new FillFlowContainer
                             {
@@ -426,6 +420,18 @@ namespace osu.Game.Rulesets.Edit
         }
 
         #endregion
+
+        private class LeftToolboxFlow : ExpandingButtonContainer
+        {
+            public LeftToolboxFlow()
+                : base(80, 200)
+            {
+                RelativeSizeAxes = Axes.Y;
+                Padding = new MarginPadding { Right = 10 };
+
+                FillFlow.Spacing = new Vector2(10);
+            }
+        }
     }
 
     /// <summary>

osu.Game/Rulesets/Edit/ScrollingToolboxGroup.cs

@@ -7,7 +7,7 @@ using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Rulesets.Edit
 {
-    public class ScrollingToolboxGroup : ToolboxGroup
+    public class ScrollingToolboxGroup : EditorToolboxGroup
     {
         protected readonly OsuScrollContainer Scroll;
 

osu.Game/Screens/Play/PlayerSettings/PlayerSettingsGroup.cs

@@ -1,165 +1,24 @@
 // 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;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Events;
-using osu.Game.Graphics;
+using osu.Game.Overlays;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
-using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.Play.PlayerSettings
 {
-    public abstract class PlayerSettingsGroup : Container
+    public class PlayerSettingsGroup : SettingsToolboxGroup
     {
-        private const float transition_duration = 250;
+        public PlayerSettingsGroup(string title)
-        private const int container_width = 270;
+            : base(title)
-        private const int border_thickness = 2;
-        private const int header_height = 30;
-        private const int corner_radius = 5;
-
-        private readonly FillFlowContainer content;
-        private readonly IconButton button;
-
-        private bool expanded = true;
-
-        public bool Expanded
         {
-            get => expanded;
-            set
-            {
-                if (expanded == value) return;
-
-                expanded = value;
-
-                content.ClearTransforms();
-
-                if (expanded)
-                    content.AutoSizeAxes = Axes.Y;
-                else
-                {
-                    content.AutoSizeAxes = Axes.None;
-                    content.ResizeHeightTo(0, transition_duration, Easing.OutQuint);
-                }
-
-                updateExpanded();
-            }
-        }
-
-        private Color4 expandedColour;
-
-        /// <summary>
-        /// Create a new instance.
-        /// </summary>
-        /// <param name="title">The title to be displayed in the header of this group.</param>
-        protected PlayerSettingsGroup(string title)
-        {
-            AutoSizeAxes = Axes.Y;
-            Width = container_width;
-            Masking = true;
-            CornerRadius = corner_radius;
-            BorderColour = Color4.Black;
-            BorderThickness = border_thickness;
-
-            InternalChildren = new Drawable[]
-            {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = Color4.Black,
-                    Alpha = 0.5f,
-                },
-                new FillFlowContainer
-                {
-                    Direction = FillDirection.Vertical,
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Children = new Drawable[]
-                    {
-                        new Container
-                        {
-                            Name = @"Header",
-                            Origin = Anchor.TopCentre,
-                            Anchor = Anchor.TopCentre,
-                            RelativeSizeAxes = Axes.X,
-                            Height = header_height,
-                            Children = new Drawable[]
-                            {
-                                new OsuSpriteText
-                                {
-                                    Origin = Anchor.CentreLeft,
-                                    Anchor = Anchor.CentreLeft,
-                                    Text = title.ToUpperInvariant(),
-                                    Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 17),
-                                    Margin = new MarginPadding { Left = 10 },
-                                },
-                                button = new IconButton
-                                {
-                                    Origin = Anchor.Centre,
-                                    Anchor = Anchor.CentreRight,
-                                    Position = new Vector2(-15, 0),
-                                    Icon = FontAwesome.Solid.Bars,
-                                    Scale = new Vector2(0.75f),
-                                    Action = () => Expanded = !Expanded,
-                                },
-                            }
-                        },
-                        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(15),
-                            Spacing = new Vector2(0, 15),
-                        }
-                    }
-                },
-            };
-        }
-
-        private const float fade_duration = 800;
-        private const float inactive_alpha = 0.5f;
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-            this.Delay(600).FadeTo(inactive_alpha, fade_duration, Easing.OutQuint);
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            this.FadeIn(fade_duration, Easing.OutQuint);
+            base.OnHover(e);
+
+            // Importantly, return true to correctly take focus away from PlayerLoader.
             return true;
         }
-
-        protected override void OnHoverLost(HoverLostEvent e)
-        {
-            this.FadeTo(inactive_alpha, fade_duration, Easing.OutQuint);
-            base.OnHoverLost(e);
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            expandedColour = colours.Yellow;
-
-            updateExpanded();
-        }
-
-        private void updateExpanded() => button.FadeColour(expanded ? expandedColour : Color4.White, 200, Easing.InOutQuint);
-
-        protected override Container<Drawable> Content => content;
-
-        protected override bool OnMouseDown(MouseDownEvent e) => true;
     }
 }