Skip to content

Update style of key binding UI #38166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peppy merged 3 commits into from
Jun 29, 2026
Merged

Update style of key binding UI #38166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7da6f12
Update style of key binding UI
LiquidPL Jun 26, 2026
497e15c
Fix tests
LiquidPL Jun 26, 2026
0716504
Adjust visual and layout slightly
peppy Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 19 additions & 12 deletions osu.Game.Tests/Visual/Settings/TestSceneKeyBindingPanel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
using System.Diagnostics;
using System.Linq;
using NUnit.Framework;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Testing;
using osu.Framework.Threading;
using osu.Game.Graphics.Sprites;
Expand Down Expand Up @@ -44,6 +45,12 @@ public void SetUpSteps()
AddWaitStep("wait for scroll", 5);
}

[Test]
public void TestBasic()
{
AddStep("do nothing", () => { });
}

[Test]
public void TestBindingTwoNonModifiers()
{
Expand Down Expand Up @@ -161,15 +168,15 @@ public void TestClearButtonOnBindings()
AddStep("click first row with two bindings", () =>
{
multiBindingRow = panel.ChildrenOfType<KeyBindingRow>().First(row => row.Defaults.Count() > 1);
InputManager.MoveMouseTo(multiBindingRow.ChildrenOfType<OsuSpriteText>().First());
InputManager.MoveMouseTo(multiBindingRow.ChildrenOfType<FormFieldCaption>().First());
InputManager.Click(MouseButton.Left);
});

clickClearButton();

AddAssert("first binding cleared",
() => multiBindingRow.ChildrenOfType<KeyBindingRow.KeyButton>().First().Text.Text,
() => Is.EqualTo(InputSettingsStrings.ActionHasNoKeyBinding));
() => multiBindingRow.ChildrenOfType<KeyBindingRow.KeyButton>().First().Text.Text.ToString(),
() => Is.EqualTo(InputSettingsStrings.ActionHasNoKeyBinding.ToUpper().ToString()));

AddStep("click second binding", () =>
{
Expand All @@ -182,8 +189,8 @@ public void TestClearButtonOnBindings()
clickClearButton();

AddAssert("second binding cleared",
() => multiBindingRow.ChildrenOfType<KeyBindingRow.KeyButton>().ElementAt(1).Text.Text,
() => Is.EqualTo(InputSettingsStrings.ActionHasNoKeyBinding));
() => multiBindingRow.ChildrenOfType<KeyBindingRow.KeyButton>().ElementAt(1).Text.Text.ToString(),
() => Is.EqualTo(InputSettingsStrings.ActionHasNoKeyBinding.ToUpper().ToString()));

void clickClearButton()
{
Expand Down Expand Up @@ -395,15 +402,15 @@ public void TestBindingConflictCausedByResetToDefaultOfSingleRow()
scrollToAndStartBinding("Left (centre)");
AddStep("clear binding", () =>
{
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<OsuSpriteText>().Any(s => s.Text.ToString() == "Left (centre)"));
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<FormFieldCaption>().Any(s => s.Caption.ToString() == "Left (centre)"));
row.ChildrenOfType<DangerousRoundedButton>().Single().TriggerClick();
});
scrollToAndStartBinding("Left (rim)");
AddStep("bind M1", () => InputManager.Click(MouseButton.Left));

AddStep("reset Left (centre) to default", () =>
{
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<OsuSpriteText>().Any(s => s.Text.ToString() == "Left (centre)"));
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<FormFieldCaption>().Any(s => s.Caption.ToString() == "Left (centre)"));
row.ChildrenOfType<SettingsRevertToDefaultButton>().Single().TriggerClick();
});

Expand Down Expand Up @@ -459,7 +466,7 @@ public void TestResettingRowCannotConflictWithItself()

AddStep("revert row to default", () =>
{
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<OsuSpriteText>().Any(s => s.Text.ToString() == "Left (centre)"));
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<FormFieldCaption>().Any(s => s.Caption.ToString() == "Left (centre)"));
InputManager.MoveMouseTo(row.ChildrenOfType<SettingsRevertToDefaultButton>().Single());
InputManager.Click(MouseButton.Left);
});
Expand All @@ -471,7 +478,7 @@ private void clearBinding()
{
AddStep("clear binding", () =>
{
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<OsuSpriteText>().Any(s => s.Text.ToString() == "Left (centre)"));
var row = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<FormFieldCaption>().Any(s => s.Caption.ToString() == "Left (centre)"));
row.ChildrenOfType<DangerousRoundedButton>().Single().TriggerClick();
});
}
Expand All @@ -480,11 +487,11 @@ private void checkBinding(string name, string keyName)
{
AddAssert($"Check {name} is bound to {keyName}", () =>
{
var firstRow = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<OsuSpriteText>().Any(s => s.Text.ToString() == name));
var firstRow = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<FormFieldCaption>().Any(s => s.Caption.ToString() == name));
var firstButton = firstRow.ChildrenOfType<KeyBindingRow.KeyButton>().First();

return firstButton.Text.Text.ToString();
}, () => Is.EqualTo(keyName));
}, () => Is.EqualTo(keyName.ToUpperInvariant()));
}

private void scrollToAndStartBinding(string name, int bindingIndex = 0)
Expand All @@ -493,7 +500,7 @@ private void scrollToAndStartBinding(string name, int bindingIndex = 0)

AddStep($"Scroll to {name}", () =>
{
var firstRow = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<OsuSpriteText>().Any(s => s.Text.ToString() == name));
var firstRow = panel.ChildrenOfType<KeyBindingRow>().First(r => r.ChildrenOfType<FormFieldCaption>().Any(s => s.Caption.ToString() == name));
targetButton = firstRow.ChildrenOfType<KeyBindingRow.KeyButton>().ElementAt(bindingIndex);

panel.ChildrenOfType<SettingsPanel.SettingsSectionsContainer>().First().ScrollTo(targetButton);
Expand Down
5 changes: 5 additions & 0 deletions osu.Game/Localisation/InputSettingsStrings.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,11 @@ public static class InputSettingsStrings
/// </summary>
public static LocalisableString ActionHasNoKeyBinding => new TranslatableString(getKey(@"action_has_no_key_binding"), @"(none)");

/// <summary>
/// "Press a key combination to set a new binding..."
/// </summary>
public static LocalisableString PendingBinding => new TranslatableString(getKey(@"press_akey_combination_to"), @"Press a key combination to set a new binding...");

private static string getKey(string key) => $"{prefix}:{key}";
}
}
21 changes: 9 additions & 12 deletions osu.Game/Overlays/Settings/Sections/Input/KeyBindingConflictPopover.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
Expand Down Expand Up @@ -200,11 +201,7 @@ private void load(OverlayColourProvider colourProvider)
Masking = true,
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background5
},
new FormControlBackground(),
new GridContainer
{
RelativeSizeAxes = Axes.X,
Expand All @@ -219,10 +216,10 @@ private void load(OverlayColourProvider colourProvider)
{
new Drawable[]
{
new OsuSpriteText
new FormFieldCaption
{
Text = action.GetLocalisableDescription(),
Margin = new MarginPadding(7.5f),
Caption = action.GetLocalisableDescription(),
Margin = new MarginPadding(9),
},
new Container
{
Expand All @@ -239,13 +236,13 @@ private void load(OverlayColourProvider colourProvider)
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background6
},
Empty().With(d => d.Width = 80), // poor man's min-width
Empty().With(d => d.Width = 60), // poor man's min-width
newBindingText = new OsuSpriteText
{
Font = OsuFont.Numeric.With(size: 10),
Font = OsuFont.Default.With(size: 14, weight: FontWeight.Bold),
Margin = new MarginPadding(5),
Anchor = Anchor.Centre,
Origin = Anchor.Centre
Origin = Anchor.Centre,
}
}
},
Expand Down Expand Up @@ -288,7 +285,7 @@ private void updateState()
if (LocalisableString.IsNullOrEmpty(keyCombinationText))
keyCombinationText = InputSettingsStrings.ActionHasNoKeyBinding;

newBindingText.Text = keyCombinationText;
newBindingText.Text = keyCombinationText.ToUpper();
}
}

Expand Down
35 changes: 21 additions & 14 deletions osu.Game/Overlays/Settings/Sections/Input/KeyBindingRow.KeyButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Extensions.ObjectExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
Expand All @@ -20,6 +21,7 @@
using osu.Game.Input;
using osu.Game.Input.Bindings;
using osu.Game.Localisation;
using osuTK;
using osuTK.Graphics;

namespace osu.Game.Overlays.Settings.Sections.Input
Expand Down Expand Up @@ -56,30 +58,28 @@ public bool IsBinding

public KeyButton()
{
Margin = new MarginPadding(padding);

AutoSizeAxes = Axes.Both;
Masking = true;
CornerRadius = padding;

Height = height;
AutoSizeAxes = Axes.X;
CornerRadius = 3f;
CornerExponent = 2.5f;

Children = new Drawable[]
{
new Container
{
AlwaysPresent = true,
Width = 80,
Height = height,
Width = 65,
AutoSizeAxes = Axes.Y,
},
box = new Box
{
RelativeSizeAxes = Axes.Both,
},
Text = new OsuSpriteText
{
Font = OsuFont.Numeric.With(size: 10),
Margin = new MarginPadding(5),
Font = OsuFont.Style.Caption1.With(weight: FontWeight.SemiBold),
Spacing = new Vector2(1, 0),
Margin = new MarginPadding { Horizontal = 10, Vertical = 5 },
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
},
Expand Down Expand Up @@ -123,15 +123,22 @@ protected override void OnHoverLost(HoverLostEvent e)

private void updateHoverState()
{
const float transition_time = 120;

if (isBinding)
{
box.FadeColour(colourProvider.Light2, transition_time, Easing.OutQuint);
box.FadeColour(colourProvider.Light3, transition_time, Easing.OutQuint);
Text.FadeColour(Color4.Black, transition_time, Easing.OutQuint);
}
else if (IsHovered)
{
box.FadeColour(colourProvider.Light4, transition_time, Easing.OutQuint);
Text.FadeColour(Color4.Black, transition_time, Easing.OutQuint);
}
else
{
box.FadeColour(IsHovered ? colourProvider.Light4 : colourProvider.Background6, transition_time, Easing.OutQuint);
Text.FadeColour(IsHovered ? Color4.Black : Color4.White, transition_time, Easing.OutQuint);
box.FadeColour(colourProvider.Background5, transition_time * 2, Easing.OutQuint);
Text.FadeColour(colourProvider.Content1, transition_time * 2, Easing.OutQuint);
}
}

Expand Down Expand Up @@ -180,7 +187,7 @@ void updateText()
alpha = 0.4f;
}

Text.Text = keyCombinationString;
Text.Text = keyCombinationString.ToUpper();
Text.Alpha = alpha;
}
}
Expand Down
Loading
Loading