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

Update design of "revert to default" button

Browse Source 
I keep getting feedback that the old design looked like anything *but* a
button to revert defaults. Including people clicking it expecting
opposite behaviour.

This is intended to be a temporary design until we get the full new UI
components online (where this is moved to the right-hand-side).
This commit is contained in:
Dean Herbert 2023-07-13 14:26:01 +09:00
parent 1bfe5a18cb
commit 94201579f6
2 changed files with 44 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
osu.Game.Tests/Visual/Settings/TestSceneRevertToDefaultButton.cs
View File

@ -1,15 +1,12 @@
// 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.
#nullable disable
using NUnit.Framework;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Overlays;
using osuTK;
@ -17,11 +14,11 @@ namespace osu.Game.Tests.Visual.Settings
{
public partial class TestSceneRevertToDefaultButton : OsuTestScene
{
[Resolved]
private OsuColour colours { get; set; }
private float scale = 1;
[Cached]
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
private readonly Bindable<float> current = new Bindable<float>
{
Default = default,
@ -31,7 +28,7 @@ namespace osu.Game.Tests.Visual.Settings
[Test]
public void TestBasic()
{
RevertToDefaultButton<float> revertToDefaultButton = null;
RevertToDefaultButton<float> revertToDefaultButton = null!;
AddStep("create button", () => Child = new Container
{
@ -41,7 +38,7 @@ namespace osu.Game.Tests.Visual.Settings
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colours.GreySeaFoam
Colour = colourProvider.Background2,
},
revertToDefaultButton = new RevertToDefaultButton<float>
{

85
osu.Game/Overlays/RevertToDefaultButton.cs
View File

@ -1,24 +1,20 @@
// 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.
#nullable disable
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Extensions.ObjectExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.UserInterface;
using osuTK;
using osu.Game.Localisation;
using osuTK;
namespace osu.Game.Overlays
{
@ -31,11 +27,17 @@ namespace osu.Game.Overlays
// this is intentionally not using BindableWithCurrent, as it can use the wrong IsDefault implementation when passed a BindableNumber.
// using GetBoundCopy() ensures that the received bindable is of the exact same type as the source bindable and uses the proper IsDefault implementation.
private Bindable<T> current;
private Bindable<T>? current;
private SpriteIcon icon = null!;
private Circle circle = null!;
[Resolved]
private OverlayColourProvider colours { get; set; } = null!;
public Bindable<T> Current
{
get => current;
get => current.AsNonNull();
set
{
current?.UnbindAll();
@ -50,43 +52,37 @@ namespace osu.Game.Overlays
}
}
[Resolved]
private OsuColour colours { get; set; }
private const float size = 4;
private CircularContainer circle = null!;
private Box background = null!;
public RevertToDefaultButton()
: base(HoverSampleSet.Button)
{
}
[BackgroundDependencyLoader]
private void load(OsuColour colour)
private void load()
{
// size intentionally much larger than actual drawn content, so that the button is easier to click.
Size = new Vector2(3 * size);
Size = new Vector2(14);
Add(circle = new CircularContainer
AddRange(new Drawable[]
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(size),
Masking = true,
Child = background = new Box
circle = new Circle
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
Colour = colour.Lime1
},
icon = new SpriteIcon
{
Icon = FontAwesome.Solid.Undo,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(8),
}
});
Alpha = 0f;
Action += () =>
{
if (!current.Disabled)
if (current?.Disabled == false)
current.SetDefault();
};
}
@ -120,28 +116,25 @@ namespace osu.Game.Overlays
if (current == null)
return;
Enabled.Value = !Current.Disabled;
Enabled.Value = !current.Disabled;
if (!Current.Disabled)
this.FadeTo(current.Disabled ? 0.2f : (Current.IsDefault ? 0 : 1), fade_duration, Easing.OutQuint);
if (IsHovered && Enabled.Value)
{
this.FadeTo(Current.IsDefault ? 0 : 1, fade_duration, Easing.OutQuint);
background.FadeColour(IsHovered ? colours.Lime0 : colours.Lime1, fade_duration, Easing.OutQuint);
circle.TweenEdgeEffectTo(new EdgeEffectParameters
{
Colour = (IsHovered ? colours.Lime1 : colours.Lime3).Opacity(0.4f),
Radius = IsHovered ? 8 : 4,
Type = EdgeEffectType.Glow
}, fade_duration, Easing.OutQuint);
icon.RotateTo(-40, 500, Easing.OutQuint);
icon.FadeColour(colours.Light1, 300, Easing.OutQuint);
circle.FadeColour(colours.Background2, 300, Easing.OutQuint);
this.ScaleTo(1.2f, 300, Easing.OutQuint);
}
else
{
background.FadeColour(colours.Lime3, fade_duration, Easing.OutQuint);
circle.TweenEdgeEffectTo(new EdgeEffectParameters
{
Colour = colours.Lime3.Opacity(0.1f),
Radius = 2,
Type = EdgeEffectType.Glow
}, fade_duration, Easing.OutQuint);
icon.RotateTo(0, 100, Easing.OutQuint);
icon.FadeColour(colours.Colour0, 100, Easing.OutQuint);
circle.FadeColour(colours.Background3, 100, Easing.OutQuint);
this.ScaleTo(1f, 100, Easing.OutQuint);
}
}
}