mirror of
https://github.com/ppy/osu.git
synced 2025-02-28 01:22:55 +08:00
Merge pull request #17982 from peppy/sheared-button
Add basic sheared button implementation
This commit is contained in:
Dan Balasescu
GitHub
commit
e9d1982a7f
@ -11,11 +11,62 @@ using osuTK.Input;
|
||||
namespace osu.Game.Tests.Visual.UserInterface
|
||||
{
|
||||
[TestFixture]
|
||||
public class TestSceneShearedToggleButton : OsuManualInputManagerTestScene
|
||||
public class TestSceneShearedButtons : OsuManualInputManagerTestScene
|
||||
{
|
||||
[Cached]
|
||||
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
|
||||
|
||||
[TestCase(false)]
|
||||
[TestCase(true)]
|
||||
public void TestShearedButton(bool bigButton)
|
||||
{
|
||||
ShearedButton button = null;
|
||||
bool actionFired = false;
|
||||
|
||||
AddStep("create button", () =>
|
||||
{
|
||||
actionFired = false;
|
||||
|
||||
if (bigButton)
|
||||
{
|
||||
Child = button = new ShearedButton(400)
|
||||
{
|
||||
LighterColour = Colour4.FromHex("#FFFFFF"),
|
||||
DarkerColour = Colour4.FromHex("#FFCC22"),
|
||||
TextColour = Colour4.Black,
|
||||
TextSize = 36,
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Text = "Let's GO!",
|
||||
Height = 80,
|
||||
Action = () => actionFired = true,
|
||||
};
|
||||
}
|
||||
else
|
||||
{
|
||||
Child = button = new ShearedButton(200)
|
||||
{
|
||||
LighterColour = Colour4.FromHex("#FF86DD"),
|
||||
DarkerColour = Colour4.FromHex("#DE31AE"),
|
||||
TextColour = Colour4.White,
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Text = "Press me",
|
||||
Height = 80,
|
||||
Action = () => actionFired = true,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
AddStep("set disabled", () => button.Enabled.Value = false);
|
||||
AddStep("press button", () => button.TriggerClick());
|
||||
AddAssert("action not fired", () => !actionFired);
|
||||
|
||||
AddStep("set enabled", () => button.Enabled.Value = true);
|
||||
AddStep("press button", () => button.TriggerClick());
|
||||
AddAssert("action fired", () => actionFired);
|
||||
}
|
||||
|
||||
[Test]
|
||||
public void TestShearedToggleButton()
|
||||
{
|
||||
197
osu.Game/Graphics/UserInterface/ShearedButton.cs
Normal file
197
osu.Game/Graphics/UserInterface/ShearedButton.cs
Normal file
@ -0,0 +1,197 @@
|
||||
// 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 enable
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Colour;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Framework.Input.Events;
|
||||
using osu.Framework.Localisation;
|
||||
using osu.Game.Graphics.Containers;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Overlays;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Graphics.UserInterface
|
||||
{
|
||||
public class ShearedButton : OsuClickableContainer
|
||||
{
|
||||
public LocalisableString Text
|
||||
{
|
||||
get => text.Text;
|
||||
set => text.Text = value;
|
||||
}
|
||||
|
||||
public float TextSize
|
||||
{
|
||||
get => text.Font.Size;
|
||||
set => text.Font = OsuFont.TorusAlternate.With(size: value);
|
||||
}
|
||||
|
||||
public Colour4 DarkerColour
|
||||
{
|
||||
set
|
||||
{
|
||||
darkerColour = value;
|
||||
Scheduler.AddOnce(updateState);
|
||||
}
|
||||
}
|
||||
|
||||
public Colour4 LighterColour
|
||||
{
|
||||
set
|
||||
{
|
||||
lighterColour = value;
|
||||
Scheduler.AddOnce(updateState);
|
||||
}
|
||||
}
|
||||
|
||||
public Colour4 TextColour
|
||||
{
|
||||
set
|
||||
{
|
||||
textColour = value;
|
||||
Scheduler.AddOnce(updateState);
|
||||
}
|
||||
}
|
||||
|
||||
[Resolved]
|
||||
protected OverlayColourProvider ColourProvider { get; private set; } = null!;
|
||||
|
||||
private readonly Box background;
|
||||
private readonly OsuSpriteText text;
|
||||
|
||||
private const float shear = 0.2f;
|
||||
|
||||
private Colour4? darkerColour;
|
||||
private Colour4? lighterColour;
|
||||
private Colour4? textColour;
|
||||
|
||||
private readonly Box flashLayer;
|
||||
|
||||
/// <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 ShearedButton(float? width = null)
|
||||
{
|
||||
Height = 50;
|
||||
Padding = new MarginPadding { Horizontal = shear * 50 };
|
||||
|
||||
Content.CornerRadius = 7;
|
||||
Content.Shear = new Vector2(shear, 0);
|
||||
Content.Masking = true;
|
||||
Content.BorderThickness = 2;
|
||||
Content.Anchor = Content.Origin = Anchor.Centre;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
background = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
text = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Font = OsuFont.TorusAlternate.With(size: 17),
|
||||
Shear = new Vector2(-shear, 0)
|
||||
},
|
||||
flashLayer = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Colour4.White.Opacity(0.9f),
|
||||
Blending = BlendingParameters.Additive,
|
||||
Alpha = 0,
|
||||
},
|
||||
};
|
||||
|
||||
if (width != null)
|
||||
{
|
||||
Width = width.Value;
|
||||
}
|
||||
else
|
||||
{
|
||||
AutoSizeAxes = Axes.X;
|
||||
text.Margin = new MarginPadding { Horizontal = 15 };
|
||||
}
|
||||
}
|
||||
|
||||
protected override HoverSounds CreateHoverSounds(HoverSampleSet sampleSet) => new HoverClickSounds(sampleSet);
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
|
||||
Enabled.BindValueChanged(_ => Scheduler.AddOnce(updateState));
|
||||
|
||||
updateState();
|
||||
FinishTransforms(true);
|
||||
}
|
||||
|
||||
protected override bool OnClick(ClickEvent e)
|
||||
{
|
||||
if (Enabled.Value)
|
||||
flashLayer.FadeOutFromOne(800, Easing.OutQuint);
|
||||
|
||||
return base.OnClick(e);
|
||||
}
|
||||
|
||||
protected override bool OnHover(HoverEvent e)
|
||||
{
|
||||
Scheduler.AddOnce(updateState);
|
||||
return base.OnHover(e);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(HoverLostEvent e)
|
||||
{
|
||||
Scheduler.AddOnce(updateState);
|
||||
base.OnHoverLost(e);
|
||||
}
|
||||
|
||||
protected override bool OnMouseDown(MouseDownEvent e)
|
||||
{
|
||||
Content.ScaleTo(0.8f, 2000, Easing.OutQuint);
|
||||
return base.OnMouseDown(e);
|
||||
}
|
||||
|
||||
protected override void OnMouseUp(MouseUpEvent e)
|
||||
{
|
||||
Content.ScaleTo(1, 1000, Easing.OutElastic);
|
||||
base.OnMouseUp(e);
|
||||
}
|
||||
|
||||
private void updateState()
|
||||
{
|
||||
var colourDark = darkerColour ?? ColourProvider.Background3;
|
||||
var colourLight = lighterColour ?? ColourProvider.Background1;
|
||||
var colourText = textColour ?? ColourProvider.Content1;
|
||||
|
||||
if (!Enabled.Value)
|
||||
{
|
||||
colourDark = colourDark.Darken(0.3f);
|
||||
colourLight = colourLight.Darken(0.3f);
|
||||
}
|
||||
else if (IsHovered)
|
||||
{
|
||||
colourDark = colourDark.Lighten(0.2f);
|
||||
colourLight = colourLight.Lighten(0.2f);
|
||||
}
|
||||
|
||||
background.FadeColour(colourDark, 150, Easing.OutQuint);
|
||||
Content.TransformTo(nameof(BorderColour), ColourInfo.GradientVertical(colourDark, colourLight), 150, Easing.OutQuint);
|
||||
|
||||
if (!Enabled.Value)
|
||||
colourText = colourText.Opacity(0.6f);
|
||||
|
||||
text.FadeColour(colourText, 150, Easing.OutQuint);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,39 +8,18 @@ using osu.Framework.Allocation;
|
||||
using osu.Framework.Audio;
|
||||
using osu.Framework.Audio.Sample;
|
||||
using osu.Framework.Bindables;
|
||||
using osu.Framework.Extensions.Color4Extensions;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Colour;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Framework.Input.Events;
|
||||
using osu.Framework.Localisation;
|
||||
using osu.Game.Graphics.Containers;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Overlays;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Graphics.UserInterface
|
||||
{
|
||||
public class ShearedToggleButton : OsuClickableContainer
|
||||
public class ShearedToggleButton : ShearedButton
|
||||
{
|
||||
public BindableBool Active { get; } = new BindableBool();
|
||||
|
||||
public LocalisableString Text
|
||||
{
|
||||
get => text.Text;
|
||||
set => text.Text = value;
|
||||
}
|
||||
|
||||
private readonly Box background;
|
||||
private readonly OsuSpriteText text;
|
||||
|
||||
private Sample? sampleOff;
|
||||
private Sample? sampleOn;
|
||||
|
||||
private const float shear = 0.2f;
|
||||
|
||||
[Resolved]
|
||||
private OverlayColourProvider colourProvider { get; set; } = null!;
|
||||
/// <summary>
|
||||
/// Whether this button is currently toggled to an active state.
|
||||
/// </summary>
|
||||
public BindableBool Active { get; } = new BindableBool();
|
||||
|
||||
/// <summary>
|
||||
/// Creates a new <see cref="ShearedToggleButton"/>
|
||||
@ -53,40 +32,8 @@ namespace osu.Game.Graphics.UserInterface
|
||||
/// </list>
|
||||
/// </param>
|
||||
public ShearedToggleButton(float? width = null)
|
||||
: base(width)
|
||||
{
|
||||
Height = 50;
|
||||
Padding = new MarginPadding { Horizontal = shear * 50 };
|
||||
|
||||
Content.CornerRadius = 7;
|
||||
Content.Shear = new Vector2(shear, 0);
|
||||
Content.Masking = true;
|
||||
Content.BorderThickness = 2;
|
||||
Content.Anchor = Content.Origin = Anchor.Centre;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
background = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
text = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Font = OsuFont.TorusAlternate.With(size: 17),
|
||||
Shear = new Vector2(-shear, 0)
|
||||
}
|
||||
};
|
||||
|
||||
if (width != null)
|
||||
{
|
||||
Width = width.Value;
|
||||
}
|
||||
else
|
||||
{
|
||||
AutoSizeAxes = Axes.X;
|
||||
text.Margin = new MarginPadding { Horizontal = 15 };
|
||||
}
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
@ -100,70 +47,22 @@ namespace osu.Game.Graphics.UserInterface
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
|
||||
Active.BindDisabledChanged(disabled => Action = disabled ? (Action?)null : Active.Toggle, true);
|
||||
Active.BindValueChanged(_ =>
|
||||
{
|
||||
updateState();
|
||||
updateActiveState();
|
||||
playSample();
|
||||
});
|
||||
Active.BindDisabledChanged(disabled =>
|
||||
{
|
||||
updateState();
|
||||
Action = disabled ? (Action?)null : Active.Toggle;
|
||||
}, true);
|
||||
|
||||
FinishTransforms(true);
|
||||
updateActiveState();
|
||||
base.LoadComplete();
|
||||
}
|
||||
|
||||
protected override bool OnHover(HoverEvent e)
|
||||
private void updateActiveState()
|
||||
{
|
||||
updateState();
|
||||
return base.OnHover(e);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(HoverLostEvent e)
|
||||
{
|
||||
updateState();
|
||||
base.OnHoverLost(e);
|
||||
}
|
||||
|
||||
protected override bool OnMouseDown(MouseDownEvent e)
|
||||
{
|
||||
Content.ScaleTo(0.8f, 2000, Easing.OutQuint);
|
||||
return base.OnMouseDown(e);
|
||||
}
|
||||
|
||||
protected override void OnMouseUp(MouseUpEvent e)
|
||||
{
|
||||
Content.ScaleTo(1, 1000, Easing.OutElastic);
|
||||
base.OnMouseUp(e);
|
||||
}
|
||||
|
||||
private void updateState()
|
||||
{
|
||||
var darkerColour = Active.Value ? colourProvider.Highlight1 : colourProvider.Background3;
|
||||
var lighterColour = Active.Value ? colourProvider.Colour0 : colourProvider.Background1;
|
||||
|
||||
if (Active.Disabled)
|
||||
{
|
||||
darkerColour = darkerColour.Darken(0.3f);
|
||||
lighterColour = lighterColour.Darken(0.3f);
|
||||
}
|
||||
else if (IsHovered)
|
||||
{
|
||||
darkerColour = darkerColour.Lighten(0.3f);
|
||||
lighterColour = lighterColour.Lighten(0.3f);
|
||||
}
|
||||
|
||||
background.FadeColour(darkerColour, 150, Easing.OutQuint);
|
||||
Content.TransformTo(nameof(BorderColour), ColourInfo.GradientVertical(darkerColour, lighterColour), 150, Easing.OutQuint);
|
||||
|
||||
var textColour = Active.Value ? colourProvider.Background6 : colourProvider.Content1;
|
||||
if (Active.Disabled)
|
||||
textColour = textColour.Opacity(0.6f);
|
||||
|
||||
text.FadeColour(textColour, 150, Easing.OutQuint);
|
||||
DarkerColour = Active.Value ? ColourProvider.Highlight1 : ColourProvider.Background3;
|
||||
LighterColour = Active.Value ? ColourProvider.Colour0 : ColourProvider.Background1;
|
||||
TextColour = Active.Value ? ColourProvider.Background6 : ColourProvider.Content1;
|
||||
}
|
||||
|
||||
private void playSample()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user