1
0
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:
Dean Herbert 2017-10-11 12:14:59 +09:00 committed by GitHub
commit 4c8fe5f678
4 changed files with 175 additions and 13 deletions

View File

@ -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);
}

View File

@ -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,
},

View 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;
}
}
}
}

View File

@ -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" />