aecw/Ez2Lazer
1
0
Fork 0
mirror of https://github.com/SK-la/Ez2Lazer.git synced 2026-03-15 03:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ShearedButton to allow easier relative sizing (#36802)

Browse Source 
This commit rearranges the contents of `ShearedButtons` to be more
independent of each other in regards to sizing. Thanks to that, the
custom logic related to enabling autosizing is no longer necessary.
Witdh and height are no longer set via the constructor, and can be
freely configured using the initializer syntax.

Additionally, this allows the button to use relative sizing without
having to resort to any hackery with `Size` (this will come in handy for
me when implementing the new footer on multiplayer screens).

Given that most of the `ShearedButton`s currently in use set their width
explicitly, I did not set `AutoSizeAxes = Axes.X` like it would be by
default previously. Instead it is set on the only two such buttons (show
converts/selected mods on ssv2). I suppose it might be a good idea to
have it set that by default if no `Width` is specified, as right now
it'll just not show anything.

Also I've set the margin on the text field by default in all cases
instead of only when autosizing like how it was previously, since
otherwise it would be a pain to set that on each button instance when
needed. I've checked all affected components and could not find any text
overflowing issues that this could cause.

---------

Co-authored-by: Dean Herbert <pe@ppy.sh>
This commit is contained in:
Krzysztof Gutkowski
2026-03-05 18:09:05 +01:00
committed by GitHub
parent 6b10ef8709
commit b76a7e1bb6
18 changed files with 67 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
osu.Game.Tests/Visual/Navigation/TestSceneScreenFooterNavigation.cs
View File

@@ -349,8 +349,8 @@ namespace osu.Game.Tests.Visual.Navigation
AutoSizeAxes = Axes.Both,
Children = new[]
{
new ShearedButton(200) { Text = "Action #1", Action = () => { } },
new ShearedButton(140) { Text = "Action #2", Action = () => { } },
new ShearedButton { Width = 200, Text = "Action #1", Action = () => { } },
new ShearedButton { Width = 140, Text = "Action #2", Action = () => { } },
}
};
}

3
osu.Game.Tests/Visual/UserInterface/TestSceneButtonsInput.cs
View File

@@ -72,12 +72,13 @@ namespace osu.Game.Tests.Visual.UserInterface
Enabled = { Value = true },
Text = "Rounded button"
},
shearedButton = new ShearedButton(width)
shearedButton = new ShearedButton
{
Text = "Sheared button",
LighterColour = Colour4.FromHex("#FFFFFF"),
DarkerColour = Colour4.FromHex("#FFCC22"),
TextColour = Colour4.Black,
Width = width,
Height = 40,
Enabled = { Value = true },
Padding = new MarginPadding(0)

4
osu.Game.Tests/Visual/UserInterface/TestSceneScreenFooter.cs
View File

@@ -342,8 +342,8 @@ namespace osu.Game.Tests.Visual.UserInterface
AutoSizeAxes = Axes.Both,
Children = new[]
{
new ShearedButton(200) { Text = "Action #1", Action = () => { } },
new ShearedButton(140) { Text = "Action #2", Action = () => { } },
new ShearedButton { Width = 200, Text = "Action #1", Action = () => { } },
new ShearedButton { Width = 140, Text = "Action #2", Action = () => { } },
}
};
}

21
osu.Game.Tests/Visual/UserInterface/TestSceneShearedButtons.cs
View File

@@ -36,8 +36,10 @@ namespace osu.Game.Tests.Visual.UserInterface
if (bigButton)
{
Child = button = new ShearedButton(400, 80)
Child = button = new ShearedButton
{
Width = 400,
Height = 80,
LighterColour = Colour4.FromHex("#FFFFFF"),
DarkerColour = Colour4.FromHex("#FFCC22"),
TextColour = Colour4.Black,
@@ -50,8 +52,10 @@ namespace osu.Game.Tests.Visual.UserInterface
}
else
{
Child = button = new ShearedButton(200, 80)
Child = button = new ShearedButton
{
Width = 200,
Height = 80,
LighterColour = Colour4.FromHex("#FF86DD"),
DarkerColour = Colour4.FromHex("#DE31AE"),
TextColour = Colour4.White,
@@ -79,8 +83,9 @@ namespace osu.Game.Tests.Visual.UserInterface
AddStep("create button", () =>
{
Child = button = new ShearedToggleButton(200)
Child = button = new ShearedToggleButton
{
Width = 200,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "Toggle me",
@@ -96,8 +101,9 @@ namespace osu.Game.Tests.Visual.UserInterface
{
ShearedToggleButton toggleButton = null;
AddStep("create fixed width button", () => Child = toggleButton = new ShearedToggleButton(200)
AddStep("create fixed width button", () => Child = toggleButton = new ShearedToggleButton
{
Width = 200,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "Fixed width"
@@ -109,6 +115,7 @@ namespace osu.Game.Tests.Visual.UserInterface
AddStep("create auto-sizing button", () => Child = toggleButton = new ShearedToggleButton
{
AutoSizeAxes = Axes.X,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "This button autosizes to its text!"
@@ -130,8 +137,9 @@ namespace osu.Game.Tests.Visual.UserInterface
AddStep("create button", () =>
{
Child = button = new ShearedToggleButton(200)
Child = button = new ShearedToggleButton
{
Width = 200,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "Toggle me",
@@ -186,6 +194,7 @@ namespace osu.Game.Tests.Visual.UserInterface
{
new ShearedButton
{
AutoSizeAxes = Axes.X,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Text = "Button",
@@ -194,6 +203,7 @@ namespace osu.Game.Tests.Visual.UserInterface
},
new ShearedButton
{
AutoSizeAxes = Axes.X,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Text = "Button",
@@ -202,6 +212,7 @@ namespace osu.Game.Tests.Visual.UserInterface
},
new ShearedButton
{
AutoSizeAxes = Axes.X,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Text = "Button",

62
osu.Game/Graphics/UserInterface/ShearedButton.cs
View File

@@ -75,19 +75,15 @@ namespace osu.Game.Graphics.UserInterface
protected readonly Container ButtonContent;
/// <summary>
/// Creates a new <see cref="ShearedToggleButton"/>
/// Creates a new <see cref="ShearedButton"/>
/// </summary>
/// <param name="width">
/// The width of the button.
/// <list type="bullet">
/// <item>If a non-<see langword="null"/> value is provided, this button will have a fixed width equal to the provided value.</item>
/// <item>If a <see langword="null"/> value is provided (or the argument is omitted entirely), the button will autosize in width to fit the text.</item>
/// </list>
/// </param>
/// <param name="height">The height of the button.</param>
public ShearedButton(float? width = null, float height = DEFAULT_HEIGHT)
/// <remarks>
/// By default, the button will have a height of <see cref="DEFAULT_HEIGHT"/>.
/// Width should be set for each usage.
/// </remarks>
public ShearedButton()
{
Height = height;
Height = DEFAULT_HEIGHT;
Shear = OsuGame.SHEAR;
@@ -99,27 +95,25 @@ namespace osu.Game.Graphics.UserInterface
{
backgroundLayer = new Container
{
RelativeSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.Both,
CornerRadius = CORNER_RADIUS,
Masking = true,
BorderThickness = BORDER_THICKNESS,
Children = new Drawable[]
Child = background = new Box
{
background = new Box
{
RelativeSizeAxes = Axes.Both
},
ButtonContent = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
AutoSizeAxes = Axes.Both,
Shear = -OsuGame.SHEAR,
Child = text = new OsuSpriteText
{
Font = OsuFont.TorusAlternate.With(size: 17),
}
},
RelativeSizeAxes = Axes.Both,
},
},
ButtonContent = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
AutoSizeAxes = Axes.Both,
Shear = -OsuGame.SHEAR,
Child = text = new OsuSpriteText
{
Font = OsuFont.TorusAlternate.With(size: 17),
Margin = new MarginPadding { Horizontal = 15 },
}
},
flashLayer = new Box
@@ -130,18 +124,6 @@ namespace osu.Game.Graphics.UserInterface
Alpha = 0,
},
};
if (width != null)
{
Width = width.Value;
backgroundLayer.RelativeSizeAxes = Axes.Both;
}
else
{
AutoSizeAxes = Axes.X;
backgroundLayer.AutoSizeAxes = Axes.X;
text.Margin = new MarginPadding { Horizontal = 15 };
}
}
protected override HoverSounds CreateHoverSounds(HoverSampleSet sampleSet) => new HoverClickSounds(sampleSet) { Enabled = { BindTarget = Enabled } };

15
osu.Game/Graphics/UserInterface/ShearedToggleButton.cs
View File

@@ -24,21 +24,6 @@ namespace osu.Game.Graphics.UserInterface
/// </summary>
public BindableBool Active { get; } = new BindableBool();
/// <summary>
/// Creates a new <see cref="ShearedToggleButton"/>
/// </summary>
/// <param name="width">
/// The width of the button.
/// <list type="bullet">
/// <item>If a non-<see langword="null"/> value is provided, this button will have a fixed width equal to the provided value.</item>
/// <item>If a <see langword="null"/> value is provided (or the argument is omitted entirely), the button will autosize in width to fit the text.</item>
/// </list>
/// </param>
public ShearedToggleButton(float? width = null)
: base(width)
{
}
[BackgroundDependencyLoader]
private void load(AudioManager audio)
{

1
osu.Game/Overlays/Mods/AddPresetButton.cs
View File

@@ -27,7 +27,6 @@ namespace osu.Game.Overlays.Mods
private Bindable<IReadOnlyList<Mod>> selectedMods { get; set; } = null!;
public AddPresetButton()
: base(1)
{
RelativeSizeAxes = Axes.X;
Height = ModSelectPanel.HEIGHT;

3
osu.Game/Overlays/Mods/AddPresetPopover.cs
View File

@@ -74,11 +74,12 @@ namespace osu.Game.Overlays.Mods
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
createButton = new ShearedButton(content_width)
createButton = new ShearedButton
{
// todo: for some very odd reason, this needs to be anchored to topright for the fill flow to be correctly sized to the AABB of the sheared button
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Width = content_width,
Text = ModSelectOverlayStrings.AddPreset,
Action = createPreset
}

3
osu.Game/Overlays/Mods/DeselectAllModsButton.cs
View File

@@ -15,8 +15,9 @@ namespace osu.Game.Overlays.Mods
private readonly Bindable<IReadOnlyList<Mod>> selectedMods = new Bindable<IReadOnlyList<Mod>>();
public DeselectAllModsButton(ModSelectOverlay modSelectOverlay)
: base(ModSelectOverlay.BUTTON_WIDTH)
{
Width = ModSelectOverlay.BUTTON_WIDTH;
Text = CommonStrings.DeselectAll;
Action = modSelectOverlay.DeselectAll;

6
osu.Game/Overlays/Mods/EditPresetPopover.cs
View File

@@ -114,22 +114,24 @@ namespace osu.Game.Overlays.Mods
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
useCurrentModsButton = new ShearedButton(content_width)
useCurrentModsButton = new ShearedButton
{
// todo: for some very odd reason, this needs to be anchored to topright for the fill flow to be correctly sized to the AABB of the sheared button
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Width = content_width,
Text = ModSelectOverlayStrings.UseCurrentMods,
DarkerColour = colours.Blue1,
LighterColour = colours.Blue0,
TextColour = colourProvider.Background6,
Action = useCurrentMods,
},
saveButton = new ShearedButton(content_width)
saveButton = new ShearedButton
{
// todo: for some very odd reason, this needs to be anchored to topright for the fill flow to be correctly sized to the AABB of the sheared button
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Width = content_width,
Text = Resources.Localisation.Web.CommonStrings.ButtonsSave,
DarkerColour = colours.Orange1,
LighterColour = colours.Orange0,

3
osu.Game/Overlays/Mods/SelectAllModsButton.cs
View File

@@ -18,8 +18,9 @@ namespace osu.Game.Overlays.Mods
private readonly Bindable<string> searchTerm = new Bindable<string>();
public SelectAllModsButton(FreeModSelectOverlay modSelectOverlay)
: base(ModSelectOverlay.BUTTON_WIDTH)
{
Width = ModSelectOverlay.BUTTON_WIDTH;
Text = CommonStrings.SelectAll;
Action = modSelectOverlay.SelectAll;

3
osu.Game/Overlays/WizardOverlay.cs
View File

@@ -245,10 +245,9 @@ namespace osu.Game.Overlays
Padding = new MarginPadding { Right = OsuGame.SCREEN_EDGE_MARGIN };
InternalChild = NextButton = new ShearedButton(0)
InternalChild = NextButton = new ShearedButton
{
RelativeSizeAxes = Axes.X,
Width = 1,
Text = FirstRunSetupOverlayStrings.GetStarted,
DarkerColour = colourProvider.Colour3,
LighterColour = colourProvider.Colour2,

7
osu.Game/Screens/Footer/ScreenBackButton.cs
View File

@@ -32,14 +32,11 @@ namespace osu.Game.Screens.Footer
return inputRectangle.Contains(ToLocalSpace(screenSpacePos));
}
public ScreenBackButton()
: base(BUTTON_WIDTH)
{
}
[BackgroundDependencyLoader]
private void load()
{
Width = BUTTON_WIDTH;
ButtonContent.Child = new FillFlowContainer
{
X = -10f,

16
osu.Game/Screens/OnlinePlay/Matchmaking/Queue/ScreenQueue.cs
View File

@@ -269,12 +269,13 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue
AvailablePools = { BindTarget = availablePools },
SelectedPool = { BindTarget = selectedPool }
},
new BeginQueueingButton(200)
new BeginQueueingButton
{
DarkerColour = colours.Blue2,
LighterColour = colours.Blue1,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
Width = 200,
SelectedPool = { BindTarget = selectedPool },
Action = () =>
{
@@ -308,12 +309,13 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue
{
State = { Value = Visibility.Visible },
},
new ShearedButton(200)
new ShearedButton
{
DarkerColour = colours.Red3,
LighterColour = colours.Red4,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Width = 200,
Text = "Stop queueing",
Action = () => client.MatchmakingLeaveQueue().FireAndForget()
}
@@ -430,11 +432,6 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue
{
public readonly IBindable<MatchmakingPool?> SelectedPool = new Bindable<MatchmakingPool?>();
public BeginQueueingButton(float? width = null)
: base(width)
{
}
protected override void LoadComplete()
{
base.LoadComplete();
@@ -445,11 +442,6 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue
private partial class SelectionButton : ShearedButton, IKeyBindingHandler<GlobalAction>
{
protected SelectionButton(float? width = null, float height = DEFAULT_HEIGHT)
: base(width, height)
{
}
public bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
{
if (e.Action == GlobalAction.Select && !e.Repeat)

7
osu.Game/Screens/OnlinePlay/Playlists/AddToPlaylistFooterButton.cs
View File

@@ -13,14 +13,11 @@ namespace osu.Game.Screens.OnlinePlay.Playlists
{
public partial class AddToPlaylistFooterButton : ShearedButton
{
public AddToPlaylistFooterButton()
: base(width: 220)
{
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Width = 220;
DarkerColour = colours.Blue3;
LighterColour = colours.Blue1;

1
osu.Game/Screens/Select/BeatmapDetailsArea.Header.cs
View File

@@ -76,6 +76,7 @@ namespace osu.Game.Screens.Select
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
AutoSizeAxes = Axes.X,
Text = UserInterfaceStrings.SelectedMods,
Height = 30f,
// Eyeballed to make spacing match. Because shear is silly and implemented in different ways between dropdown and button.

3
osu.Game/Screens/Select/FilterControl.ScopedBeatmapSetDisplay.cs
View File

@@ -73,10 +73,11 @@ namespace osu.Game.Screens.Select
Colour = colourProvider.Background6,
Padding = new MarginPadding { Right = 80, Vertical = 5 }
},
new ShearedButton(80)
new ShearedButton
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Width = 80,
Text = CommonStrings.Back,
RelativeSizeAxes = Axes.Y,
Height = 1,

1
osu.Game/Screens/Select/FilterControl.cs
View File

@@ -151,6 +151,7 @@ namespace osu.Game.Screens.Select
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
AutoSizeAxes = Axes.X,
Text = UserInterfaceStrings.ShowConverts,
Height = 30f,
},