RepoMirrors/osu
1
0
Fork 0
mirror of https://github.com/ppy/osu synced 2025-01-18 20:10:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Align label widths of editor setup screen controls
This commit is contained in:
Dean Herbert 2021-06-10 14:55:49 +09:00 committed by GitHub
commit 9a3ca09501
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 107 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
osu.Game.Tests/Visual/UserInterface/TestSceneLabelledDrawable.cs
View File

@ -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", () =>

51
osu.Game/Graphics/UserInterfaceV2/LabelledDrawable.cs
View File

@ -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]

1
osu.Game/Screens/Edit/Setup/ColoursSection.cs
View File

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

4
osu.Game/Screens/Edit/Setup/DifficultySection.cs
View File

@ -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)
{

4
osu.Game/Screens/Edit/Setup/MetadataSection.cs
View File

@ -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
},

2
osu.Game/Screens/Edit/Setup/ResourcesSection.cs
View File

@ -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,

6
osu.Game/Screens/Edit/Setup/SetupSection.cs
View File

@ -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; }