Merge pull request #7899 from smoogipoo/overlined-display-refactor

Refactor overlined displays to support different sizing modes

osu.Game.Tests/Visual/Multiplayer/TestSceneOverlinedParticipants.cs

@@ -1,27 +1,57 @@
 // 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.Collections.Generic;
+using NUnit.Framework;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
+using osu.Game.Screens.Multi.Components;
-using osu.Game.Screens.Multi.Match.Components;
 using osuTK;
 
 namespace osu.Game.Tests.Visual.Multiplayer
 {
     public class TestSceneOverlinedParticipants : MultiplayerTestScene
     {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(OverlinedParticipants),
+            typeof(OverlinedDisplay),
+            typeof(ParticipantsList)
+        };
+
         protected override bool UseOnlineAPI => true;
 
         public TestSceneOverlinedParticipants()
         {
             Room.RoomID.Value = 7;
+        }
 
-            Add(new Container
+        [Test]
+        public void TestHorizontalLayout()
+        {
+            AddStep("create component", () =>
             {
-                Anchor = Anchor.Centre,
+                Child = new OverlinedParticipants(Direction.Horizontal)
-                Origin = Anchor.Centre,
+                {
-                Size = new Vector2(500),
+                    Anchor = Anchor.Centre,
-                Child = new OverlinedParticipants()
+                    Origin = Anchor.Centre,
+                    Width = 500,
+                    AutoSizeAxes = Axes.Y,
+                };
+            });
+        }
+
+        [Test]
+        public void TestVerticalLayout()
+        {
+            AddStep("create component", () =>
+            {
+                Child = new OverlinedParticipants(Direction.Vertical)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Size = new Vector2(500)
+                };
             });
         }
     }

osu.Game.Tests/Visual/Multiplayer/TestSceneOverlinedPlaylist.cs

@@ -2,10 +2,9 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Rulesets.Osu;
-using osu.Game.Screens.Multi.Match.Components;
+using osu.Game.Screens.Multi.Components;
 using osu.Game.Tests.Beatmaps;
 using osuTK;
 
@@ -27,12 +26,11 @@ namespace osu.Game.Tests.Visual.Multiplayer
                 });
             }
 
-            Add(new Container
+            Add(new OverlinedPlaylist(false)
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
                 Size = new Vector2(500),
-                Child = new OverlinedPlaylist(false)
             });
         }
     }

osu.Game/Graphics/Containers/OsuScrollContainer.cs

@@ -14,6 +14,9 @@ namespace osu.Game.Graphics.Containers
 {
     public class OsuScrollContainer : ScrollContainer<Drawable>
     {
+        public const float SCROLL_BAR_HEIGHT = 10;
+        public const float SCROLL_BAR_PADDING = 3;
+
         /// <summary>
         /// Allows controlling the scroll bar from any position in the container using the right mouse button.
         /// Uses the value of <see cref="DistanceDecayOnRightMouseScrollbar"/> to smoothly scroll to the dragged location.
@@ -96,8 +99,6 @@ namespace osu.Game.Graphics.Containers
 
         protected class OsuScrollbar : ScrollbarContainer
         {
-            private const float dim_size = 10;
-
             private Color4 hoverColour;
             private Color4 defaultColour;
             private Color4 highlightColour;
@@ -135,7 +136,7 @@ namespace osu.Game.Graphics.Containers
 
             public override void ResizeTo(float val, int duration = 0, Easing easing = Easing.None)
             {
-                Vector2 size = new Vector2(dim_size)
+                Vector2 size = new Vector2(SCROLL_BAR_HEIGHT)
                 {
                     [(int)ScrollDirection] = val
                 };

osu.Game/Screens/Multi/Components/OverlinedDisplay.cs

@@ -9,12 +9,32 @@ using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osuTK;
 
-namespace osu.Game.Screens.Multi.Match.Components
+namespace osu.Game.Screens.Multi.Components
 {
     public abstract class OverlinedDisplay : MultiplayerComposite
     {
         protected readonly Container Content;
 
+        public override Axes RelativeSizeAxes
+        {
+            get => base.RelativeSizeAxes;
+            set
+            {
+                base.RelativeSizeAxes = value;
+                updateDimensions();
+            }
+        }
+
+        public override Axes AutoSizeAxes
+        {
+            get => base.AutoSizeAxes;
+            protected set
+            {
+                base.AutoSizeAxes = value;
+                updateDimensions();
+            }
+        }
+
         protected string Details
         {
             set => details.Text = value;
@@ -22,14 +42,12 @@ namespace osu.Game.Screens.Multi.Match.Components
 
         private readonly Circle line;
         private readonly OsuSpriteText details;
+        private readonly GridContainer grid;
 
         protected OverlinedDisplay(string title)
         {
-            RelativeSizeAxes = Axes.Both;
+            InternalChild = grid = new GridContainer
-
-            InternalChild = new GridContainer
             {
-                RelativeSizeAxes = Axes.Both,
                 Content = new[]
                 {
                     new Drawable[]
@@ -62,19 +80,12 @@ namespace osu.Game.Screens.Multi.Match.Components
                     },
                     new Drawable[]
                     {
-                        Content = new Container
+                        Content = new Container { Margin = new MarginPadding { Top = 5 } }
-                        {
-                            Margin = new MarginPadding { Top = 5 },
-                            RelativeSizeAxes = Axes.Both
-                        }
                     }
-                },
-                RowDimensions = new[]
-                {
-                    new Dimension(GridSizeMode.AutoSize),
-                    new Dimension(GridSizeMode.AutoSize),
                 }
             };
+
+            updateDimensions();
         }
 
         [BackgroundDependencyLoader]
@@ -83,5 +94,23 @@ namespace osu.Game.Screens.Multi.Match.Components
             line.Colour = colours.Yellow;
             details.Colour = colours.Yellow;
         }
+
+        private void updateDimensions()
+        {
+            grid.RowDimensions = new[]
+            {
+                new Dimension(GridSizeMode.AutoSize),
+                new Dimension(GridSizeMode.AutoSize),
+                new Dimension(AutoSizeAxes.HasFlag(Axes.Y) ? GridSizeMode.AutoSize : GridSizeMode.Distributed),
+            };
+
+            // Assigning to none is done so that setting auto and relative size modes doesn't cause exceptions to be thrown
+            grid.AutoSizeAxes = Content.AutoSizeAxes = Axes.None;
+            grid.RelativeSizeAxes = Content.RelativeSizeAxes = Axes.None;
+
+            // Auto-size when required, otherwise eagerly relative-size
+            grid.AutoSizeAxes = Content.AutoSizeAxes = AutoSizeAxes;
+            grid.RelativeSizeAxes = Content.RelativeSizeAxes = ~AutoSizeAxes;
+        }
     }
 }

osu.Game/Screens/Multi/Components/OverlinedParticipants.cs

@@ -0,0 +1,56 @@
+// 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.Game.Graphics.Containers;
+
+namespace osu.Game.Screens.Multi.Components
+{
+    public class OverlinedParticipants : OverlinedDisplay
+    {
+        public new Axes AutoSizeAxes
+        {
+            get => base.AutoSizeAxes;
+            set => base.AutoSizeAxes = value;
+        }
+
+        public OverlinedParticipants(Direction direction)
+            : base("Participants")
+        {
+            OsuScrollContainer scroll;
+            ParticipantsList list;
+
+            Content.Add(scroll = new OsuScrollContainer(direction)
+            {
+                Child = list = new ParticipantsList()
+            });
+
+            switch (direction)
+            {
+                case Direction.Horizontal:
+                    scroll.RelativeSizeAxes = Axes.X;
+                    scroll.Height = ParticipantsList.TILE_SIZE + OsuScrollContainer.SCROLL_BAR_HEIGHT + OsuScrollContainer.SCROLL_BAR_PADDING * 2;
+                    list.AutoSizeAxes = Axes.Both;
+                    break;
+
+                case Direction.Vertical:
+                    scroll.RelativeSizeAxes = Axes.Both;
+                    list.RelativeSizeAxes = Axes.X;
+                    list.AutoSizeAxes = Axes.Y;
+                    break;
+            }
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            ParticipantCount.BindValueChanged(_ => setParticipantCount());
+            MaxParticipants.BindValueChanged(_ => setParticipantCount());
+
+            setParticipantCount();
+        }
+
+        private void setParticipantCount() => Details = MaxParticipants.Value != null ? $"{ParticipantCount.Value}/{MaxParticipants.Value}" : ParticipantCount.Value.ToString();
+    }
+}

osu.Game/Screens/Multi/Components/OverlinedPlaylist.cs

@@ -6,7 +6,7 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Game.Online.Multiplayer;
 
-namespace osu.Game.Screens.Multi.Match.Components
+namespace osu.Game.Screens.Multi.Components
 {
     public class OverlinedPlaylist : OverlinedDisplay
     {

osu.Game/Screens/Multi/Components/ParticipantsList.cs

@@ -8,7 +8,6 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
 using osu.Game.Online.API;
 using osu.Game.Online.API.Requests;
 using osu.Game.Users;
@@ -19,21 +18,39 @@ namespace osu.Game.Screens.Multi.Components
 {
     public class ParticipantsList : MultiplayerComposite
     {
+        public const float TILE_SIZE = 70;
+
+        public override Axes RelativeSizeAxes
+        {
+            get => base.RelativeSizeAxes;
+            set
+            {
+                base.RelativeSizeAxes = value;
+                fill.RelativeSizeAxes = value;
+            }
+        }
+
+        public new Axes AutoSizeAxes
+        {
+            get => base.AutoSizeAxes;
+            set
+            {
+                base.AutoSizeAxes = value;
+                fill.AutoSizeAxes = value;
+            }
+        }
+
+        public FillDirection Direction
+        {
+            get => fill.Direction;
+            set => fill.Direction = value;
+        }
+
         private readonly FillFlowContainer fill;
 
         public ParticipantsList()
         {
-            InternalChild = new OsuScrollContainer
+            InternalChild = fill = new FillFlowContainer { Spacing = new Vector2(10) };
-            {
-                RelativeSizeAxes = Axes.Both,
-                Child = fill = new FillFlowContainer
-                {
-                    Spacing = new Vector2(10),
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Direction = FillDirection.Full,
-                }
-            };
         }
 
         [BackgroundDependencyLoader]

osu.Game/Screens/Multi/Lounge/Components/RoomInspector.cs

@@ -10,6 +10,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
 using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Screens.Multi.Components;
@@ -157,7 +158,15 @@ namespace osu.Game.Screens.Multi.Lounge.Components
                             {
                                 RelativeSizeAxes = Axes.Both,
                                 Padding = new MarginPadding { Horizontal = 10 },
-                                Child = new ParticipantsList { RelativeSizeAxes = Axes.Both }
+                                Child = new OsuScrollContainer
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Child = new ParticipantsList
+                                    {
+                                        RelativeSizeAxes = Axes.X,
+                                        AutoSizeAxes = Axes.Y
+                                    }
+                                }
                             }
                         }
                     }

osu.Game/Screens/Multi/Match/Components/OverlinedParticipants.cs

@@ -1,29 +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.
-
-using osu.Framework.Allocation;
-using osu.Framework.Graphics;
-using osu.Game.Screens.Multi.Components;
-
-namespace osu.Game.Screens.Multi.Match.Components
-{
-    public class OverlinedParticipants : OverlinedDisplay
-    {
-        public OverlinedParticipants()
-            : base("Participants")
-        {
-            Content.Add(new ParticipantsList { RelativeSizeAxes = Axes.Both });
-        }
-
-        [BackgroundDependencyLoader]
-        private void load()
-        {
-            ParticipantCount.BindValueChanged(_ => setParticipantCount());
-            MaxParticipants.BindValueChanged(_ => setParticipantCount());
-
-            setParticipantCount();
-        }
-
-        private void setParticipantCount() => Details = MaxParticipants.Value != null ? $"{ParticipantCount.Value}/{MaxParticipants.Value}" : ParticipantCount.Value.ToString();
-    }
-}

osu.Game/Screens/Multi/Match/MatchSubScreen.cs

@@ -114,7 +114,7 @@ namespace osu.Game.Screens.Multi.Match
                                                             {
                                                                 RelativeSizeAxes = Axes.Both,
                                                                 Padding = new MarginPadding { Right = 5 },
-                                                                Child = new OverlinedParticipants()
+                                                                Child = new OverlinedParticipants(Direction.Vertical) { RelativeSizeAxes = Axes.Both }
                                                             },
                                                             new Container
                                                             {
@@ -122,6 +122,7 @@ namespace osu.Game.Screens.Multi.Match
                                                                 Padding = new MarginPadding { Horizontal = 5 },
                                                                 Child = new OverlinedPlaylist(true) // Temporarily always allow selection
                                                                 {
+                                                                    RelativeSizeAxes = Axes.Both,
                                                                     SelectedItem = { BindTarget = SelectedItem }
                                                                 }
                                                             },