mirror of
https://github.com/ppy/osu.git
synced 2025-01-13 19:04:06 +08:00
Merge pull request #1348 from smoogipoo/iconbutton-refactor
Refactor + improve IconButton
This commit is contained in:
commit
4c8fe5f678
@ -15,32 +15,76 @@ namespace osu.Game.Graphics.UserInterface
|
||||
{
|
||||
public class IconButton : OsuClickableContainer
|
||||
{
|
||||
private readonly SpriteIcon icon;
|
||||
private readonly Box hover;
|
||||
private readonly Container content;
|
||||
private const float button_size = 30;
|
||||
|
||||
private Color4? flashColour;
|
||||
/// <summary>
|
||||
/// The colour that should be flashed when the <see cref="IconButton"/> is clicked.
|
||||
/// </summary>
|
||||
public Color4 FlashColour
|
||||
{
|
||||
get { return flashColour ?? Color4.White; }
|
||||
set { flashColour = value; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// The icon colour. This does not affect <see cref="IconButton.Colour"/>.
|
||||
/// </summary>
|
||||
public Color4 IconColour
|
||||
{
|
||||
get { return icon.Colour; }
|
||||
set { icon.Colour = value; }
|
||||
}
|
||||
|
||||
private Color4? hoverColour;
|
||||
/// <summary>
|
||||
/// The background colour of the <see cref="IconButton"/> while it is hovered.
|
||||
/// </summary>
|
||||
public Color4 HoverColour
|
||||
{
|
||||
get { return hoverColour ?? Color4.White; }
|
||||
set
|
||||
{
|
||||
hoverColour = value;
|
||||
hover.Colour = value;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// The icon.
|
||||
/// </summary>
|
||||
public FontAwesome Icon
|
||||
{
|
||||
get { return icon.Icon; }
|
||||
set { icon.Icon = value; }
|
||||
}
|
||||
|
||||
private const float button_size = 30;
|
||||
private Color4 flashColour;
|
||||
|
||||
/// <summary>
|
||||
/// The icon scale. This does not affect <see cref="IconButton.Scale"/>.
|
||||
/// </summary>
|
||||
public Vector2 IconScale
|
||||
{
|
||||
get { return icon.Scale; }
|
||||
set { icon.Scale = value; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// The size of the <see cref="IconButton"/> while it is not being pressed.
|
||||
/// </summary>
|
||||
public Vector2 ButtonSize
|
||||
{
|
||||
get { return content.Size; }
|
||||
set { content.Size = value; }
|
||||
}
|
||||
|
||||
private readonly Container content;
|
||||
private readonly SpriteIcon icon;
|
||||
private readonly Box hover;
|
||||
|
||||
public IconButton()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
|
||||
Origin = Anchor.Centre;
|
||||
Anchor = Anchor.Centre;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
content = new Container
|
||||
@ -48,7 +92,6 @@ namespace osu.Game.Graphics.UserInterface
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre,
|
||||
Size = new Vector2(button_size),
|
||||
|
||||
CornerRadius = 5,
|
||||
Masking = true,
|
||||
EdgeEffect = new EdgeEffectParameters
|
||||
@ -78,8 +121,11 @@ namespace osu.Game.Graphics.UserInterface
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OsuColour colours)
|
||||
{
|
||||
hover.Colour = colours.Yellow.Opacity(0.6f);
|
||||
flashColour = colours.Yellow;
|
||||
if (hoverColour == null)
|
||||
HoverColour = colours.Yellow.Opacity(0.6f);
|
||||
|
||||
if (flashColour == null)
|
||||
FlashColour = colours.Yellow;
|
||||
|
||||
Enabled.ValueChanged += enabled => this.FadeColour(enabled ? Color4.White : colours.Gray9, 200, Easing.OutQuint);
|
||||
}
|
||||
@ -98,7 +144,7 @@ namespace osu.Game.Graphics.UserInterface
|
||||
|
||||
protected override bool OnClick(InputState state)
|
||||
{
|
||||
hover.FlashColour(flashColour, 800, Easing.OutQuint);
|
||||
hover.FlashColour(FlashColour, 800, Easing.OutQuint);
|
||||
return base.OnClick(state);
|
||||
}
|
||||
|
||||
|
@ -161,11 +161,15 @@ namespace osu.Game.Overlays
|
||||
{
|
||||
prevButton = new IconButton
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Action = prev,
|
||||
Icon = FontAwesome.fa_step_backward,
|
||||
},
|
||||
playButton = new IconButton
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Scale = new Vector2(1.4f),
|
||||
IconScale = new Vector2(1.4f),
|
||||
Action = play,
|
||||
@ -173,6 +177,8 @@ namespace osu.Game.Overlays
|
||||
},
|
||||
nextButton = new IconButton
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Action = next,
|
||||
Icon = FontAwesome.fa_step_forward,
|
||||
},
|
||||
|
109
osu.Game/Tests/Visual/TestCaseIconButton.cs
Normal file
109
osu.Game/Tests/Visual/TestCaseIconButton.cs
Normal file
@ -0,0 +1,109 @@
|
||||
// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
|
||||
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
|
||||
|
||||
using OpenTK;
|
||||
using OpenTK.Graphics;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Graphics.UserInterface;
|
||||
|
||||
namespace osu.Game.Tests.Visual
|
||||
{
|
||||
public class TestCaseIconButton : OsuTestCase
|
||||
{
|
||||
public override string Description => "Various display modes of icon buttons";
|
||||
|
||||
public TestCaseIconButton()
|
||||
{
|
||||
Child = new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Spacing = new Vector2(10, 10),
|
||||
Children = new[]
|
||||
{
|
||||
new NamedIconButton("No change", new IconButton()),
|
||||
new NamedIconButton("Green colours", new IconButton
|
||||
{
|
||||
IconColour = Color4.LightGreen,
|
||||
FlashColour = Color4.DarkGreen,
|
||||
HoverColour = Color4.Green
|
||||
}),
|
||||
new NamedIconButton("Full-width", new IconButton { ButtonSize = new Vector2(200, 30) }),
|
||||
new NamedIconButton("Unchanging size", new IconButton(), false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
private class NamedIconButton : Container
|
||||
{
|
||||
public NamedIconButton(string name, IconButton button, bool allowSizeChange = true)
|
||||
{
|
||||
AutoSizeAxes = Axes.Y;
|
||||
Width = 200;
|
||||
|
||||
Container iconContainer;
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Color4.Black,
|
||||
Alpha = 0.5f,
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical,
|
||||
Spacing = new Vector2(0, 10),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
Text = name
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0.1f,
|
||||
},
|
||||
iconContainer = new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Child = button
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (allowSizeChange)
|
||||
iconContainer.AutoSizeAxes = Axes.Both;
|
||||
else
|
||||
{
|
||||
iconContainer.RelativeSizeAxes = Axes.X;
|
||||
iconContainer.Height = 30;
|
||||
}
|
||||
|
||||
button.Anchor = Anchor.Centre;
|
||||
button.Origin = Anchor.Centre;
|
||||
button.Icon = FontAwesome.fa_osu_osu_o;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -759,6 +759,7 @@
|
||||
<Compile Include="Tests\Visual\TestCaseEditorSummaryTimeline.cs" />
|
||||
<Compile Include="Tests\Visual\TestCaseGamefield.cs" />
|
||||
<Compile Include="Tests\Visual\TestCaseGraph.cs" />
|
||||
<Compile Include="Tests\Visual\TestCaseIconButton.cs" />
|
||||
<Compile Include="Tests\Visual\TestCaseKeyConfiguration.cs" />
|
||||
<Compile Include="Tests\Visual\TestCaseKeyCounter.cs" />
|
||||
<Compile Include="Tests\Visual\TestCaseLeaderboard.cs" />
|
||||
|
Loading…
Reference in New Issue
Block a user