Merge pull request #13384 from bdach/fixed-label-width

Align label widths of editor setup screen controls

osu.Game.Tests/Visual/UserInterface/TestSceneLabelledDrawable.cs

@@ -2,11 +2,14 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using NUnit.Framework;
+using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Testing;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterfaceV2;
+using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Tests.Visual.UserInterface
@@ -21,6 +24,45 @@ namespace osu.Game.Tests.Visual.UserInterface
         [TestCase(true)]
         public void TestNonPadded(bool hasDescription) => createPaddedComponent(hasDescription, false);
 
+        [Test]
+        public void TestFixedWidth()
+        {
+            const float label_width = 200;
+
+            AddStep("create components", () => Child = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 10),
+                Children = new Drawable[]
+                {
+                    new NonPaddedLabelledDrawable
+                    {
+                        Label = "short",
+                        FixedLabelWidth = label_width
+                    },
+                    new NonPaddedLabelledDrawable
+                    {
+                        Label = "very very very very very very very very very very very long",
+                        FixedLabelWidth = label_width
+                    },
+                    new PaddedLabelledDrawable
+                    {
+                        Label = "short",
+                        FixedLabelWidth = label_width
+                    },
+                    new PaddedLabelledDrawable
+                    {
+                        Label = "very very very very very very very very very very very long",
+                        FixedLabelWidth = label_width
+                    }
+                }
+            });
+
+            AddStep("unset label width", () => this.ChildrenOfType<LabelledDrawable<Drawable>>().ForEach(d => d.FixedLabelWidth = null));
+            AddStep("reset label width", () => this.ChildrenOfType<LabelledDrawable<Drawable>>().ForEach(d => d.FixedLabelWidth = label_width));
+        }
+
         private void createPaddedComponent(bool hasDescription = false, bool padded = true)
         {
             AddStep("create component", () =>

osu.Game/Graphics/UserInterfaceV2/LabelledDrawable.cs

@@ -14,6 +14,27 @@ namespace osu.Game.Graphics.UserInterfaceV2
     public abstract class LabelledDrawable<T> : CompositeDrawable
         where T : Drawable
     {
+        private float? fixedLabelWidth;
+
+        /// <summary>
+        /// The fixed width of the label of this <see cref="LabelledDrawable{T}"/>.
+        /// If <c>null</c>, the label portion will auto-size to its content.
+        /// Can be used in layout scenarios where several labels must match in length for the components to be aligned properly.
+        /// </summary>
+        public float? FixedLabelWidth
+        {
+            get => fixedLabelWidth;
+            set
+            {
+                if (fixedLabelWidth == value)
+                    return;
+
+                fixedLabelWidth = value;
+
+                updateLabelWidth();
+            }
+        }
+
         protected const float CONTENT_PADDING_VERTICAL = 10;
         protected const float CONTENT_PADDING_HORIZONTAL = 15;
         protected const float CORNER_RADIUS = 15;
@@ -23,6 +44,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
         /// </summary>
         protected readonly T Component;
 
+        private readonly GridContainer grid;
         private readonly OsuTextFlowContainer labelText;
         private readonly OsuTextFlowContainer descriptionText;
 
@@ -56,7 +78,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
                     Spacing = new Vector2(0, 12),
                     Children = new Drawable[]
                     {
-                        new GridContainer
+                        grid = new GridContainer
                         {
                             RelativeSizeAxes = Axes.X,
                             AutoSizeAxes = Axes.Y,
@@ -69,7 +91,13 @@ namespace osu.Game.Graphics.UserInterfaceV2
                                         Anchor = Anchor.CentreLeft,
                                         Origin = Anchor.CentreLeft,
                                         AutoSizeAxes = Axes.Both,
-                                        Padding = new MarginPadding { Right = 20 }
+                                        Padding = new MarginPadding
+                                        {
+                                            Right = 20,
+                                            // ensure that the label is always vertically padded even if the component itself isn't.
+                                            // this may become an issue if the label is taller than the component.
+                                            Vertical = padded ? 0 : CONTENT_PADDING_VERTICAL
+                                        }
                                     },
                                     new Container
                                     {
@@ -87,7 +115,6 @@ namespace osu.Game.Graphics.UserInterfaceV2
                                 },
                             },
                             RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
-                            ColumnDimensions = new[] { new Dimension(GridSizeMode.AutoSize) }
                         },
                         descriptionText = new OsuTextFlowContainer(s => s.Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold, italics: true))
                         {
@@ -99,6 +126,24 @@ namespace osu.Game.Graphics.UserInterfaceV2
                     }
                 }
             };
+
+            updateLabelWidth();
+        }
+
+        private void updateLabelWidth()
+        {
+            if (fixedLabelWidth == null)
+            {
+                grid.ColumnDimensions = new[] { new Dimension(GridSizeMode.AutoSize) };
+                labelText.RelativeSizeAxes = Axes.None;
+                labelText.AutoSizeAxes = Axes.Both;
+            }
+            else
+            {
+                grid.ColumnDimensions = new[] { new Dimension(GridSizeMode.Absolute, fixedLabelWidth.Value) };
+                labelText.AutoSizeAxes = Axes.Y;
+                labelText.RelativeSizeAxes = Axes.X;
+            }
         }
 
         [BackgroundDependencyLoader]

osu.Game/Screens/Edit/Setup/ColoursSection.cs

@@ -25,6 +25,7 @@ namespace osu.Game.Screens.Edit.Setup
                 comboColours = new LabelledColourPalette
                 {
                     Label = "Hitcircle / Slider Combos",
+                    FixedLabelWidth = LABEL_WIDTH,
                     ColourNamePrefix = "Combo"
                 }
             };

osu.Game/Screens/Edit/Setup/DifficultySection.cs

@@ -28,6 +28,7 @@ namespace osu.Game.Screens.Edit.Setup
                 circleSizeSlider = new LabelledSliderBar<float>
                 {
                     Label = "Object Size",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Description = "The size of all hit objects",
                     Current = new BindableFloat(Beatmap.BeatmapInfo.BaseDifficulty.CircleSize)
                     {
@@ -40,6 +41,7 @@ namespace osu.Game.Screens.Edit.Setup
                 healthDrainSlider = new LabelledSliderBar<float>
                 {
                     Label = "Health Drain",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Description = "The rate of passive health drain throughout playable time",
                     Current = new BindableFloat(Beatmap.BeatmapInfo.BaseDifficulty.DrainRate)
                     {
@@ -52,6 +54,7 @@ namespace osu.Game.Screens.Edit.Setup
                 approachRateSlider = new LabelledSliderBar<float>
                 {
                     Label = "Approach Rate",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Description = "The speed at which objects are presented to the player",
                     Current = new BindableFloat(Beatmap.BeatmapInfo.BaseDifficulty.ApproachRate)
                     {
@@ -64,6 +67,7 @@ namespace osu.Game.Screens.Edit.Setup
                 overallDifficultySlider = new LabelledSliderBar<float>
                 {
                     Label = "Overall Difficulty",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Description = "The harshness of hit windows and difficulty of special objects (ie. spinners)",
                     Current = new BindableFloat(Beatmap.BeatmapInfo.BaseDifficulty.OverallDifficulty)
                     {

osu.Game/Screens/Edit/Setup/MetadataSection.cs

@@ -27,24 +27,28 @@ namespace osu.Game.Screens.Edit.Setup
                 artistTextBox = new LabelledTextBox
                 {
                     Label = "Artist",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Current = { Value = Beatmap.Metadata.Artist },
                     TabbableContentContainer = this
                 },
                 titleTextBox = new LabelledTextBox
                 {
                     Label = "Title",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Current = { Value = Beatmap.Metadata.Title },
                     TabbableContentContainer = this
                 },
                 creatorTextBox = new LabelledTextBox
                 {
                     Label = "Creator",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Current = { Value = Beatmap.Metadata.AuthorString },
                     TabbableContentContainer = this
                 },
                 difficultyTextBox = new LabelledTextBox
                 {
                     Label = "Difficulty Name",
+                    FixedLabelWidth = LABEL_WIDTH,
                     Current = { Value = Beatmap.BeatmapInfo.Version },
                     TabbableContentContainer = this
                 },

osu.Game/Screens/Edit/Setup/ResourcesSection.cs

@@ -54,6 +54,7 @@ namespace osu.Game.Screens.Edit.Setup
                         backgroundTextBox = new FileChooserLabelledTextBox(".jpg", ".jpeg", ".png")
                         {
                             Label = "Background",
+                            FixedLabelWidth = LABEL_WIDTH,
                             PlaceholderText = "Click to select a background image",
                             Current = { Value = working.Value.Metadata.BackgroundFile },
                             Target = backgroundFileChooserContainer,
@@ -72,6 +73,7 @@ namespace osu.Game.Screens.Edit.Setup
                         audioTrackTextBox = new FileChooserLabelledTextBox(".mp3", ".ogg")
                         {
                             Label = "Audio Track",
+                            FixedLabelWidth = LABEL_WIDTH,
                             PlaceholderText = "Click to select a track",
                             Current = { Value = working.Value.Metadata.AudioFile },
                             Target = audioTrackFileChooserContainer,

osu.Game/Screens/Edit/Setup/SetupSection.cs

@@ -7,6 +7,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Localisation;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterfaceV2;
 using osuTK;
 
 namespace osu.Game.Screens.Edit.Setup
@@ -15,6 +16,11 @@ namespace osu.Game.Screens.Edit.Setup
     {
         private readonly FillFlowContainer flow;
 
+        /// <summary>
+        /// Used to align some of the child <see cref="LabelledDrawable{T}"/>s together to achieve a grid-like look.
+        /// </summary>
+        protected const float LABEL_WIDTH = 160;
+
         [Resolved]
         protected OsuColour Colours { get; private set; }